From 3649232c6826926acf2514d71d9b365a4bad63ea Mon Sep 17 00:00:00 2001
From: cmyers-mieweb <cmyers@mieweb.com>
Date: Tue, 4 Aug 2026 15:47:38 -0700
Subject: [PATCH 1/5] Replace container/node views with DataVis NITRO grids,
 Further UI enhancements

Unified the cards/table view toggle for containers and nodes lists into a single DataVis-based grid component with built-in sorting, filtering, and column management. Added expandable resource dashboard for nodes showing live CPU/memory/storage utilization. Updated container list filtering to default to user's own containers (empty filter) while `*` parameter shows all visible containers. Added `/nodes/{id}/stats` endpoint and NodeStats type for live hardware metrics.
---
 create-a-container/client/package-lock.json   | 1127 ++++++++++++++++-
 create-a-container/client/package.json        |    4 +-
 .../containers/ContainerFilters.tsx           |    2 +-
 .../containers/ContainersDataGrid.tsx         |  184 +++
 .../src/components/containers/RowActions.tsx  |    3 +-
 .../src/components/nodes/CredentialsBadge.tsx |   23 +
 .../src/components/nodes/NodeRowActions.tsx   |   46 +
 .../client/src/components/nodes/NodeStats.tsx |   97 ++
 .../src/components/nodes/NodesDataGrid.tsx    |  130 ++
 .../src/components/nodes/NvidiaBadge.tsx      |   11 +
 .../src/components/nodes/ResourceBar.tsx      |   53 +
 create-a-container/client/src/lib/queries.ts  |    5 +
 create-a-container/client/src/lib/types.ts    |   35 +
 .../pages/containers/ContainersListPage.tsx   |  211 +--
 .../client/src/pages/nodes/NodesListPage.tsx  |  207 +--
 create-a-container/openapi.v1.yaml            |   16 +
 .../routers/api/v1/containers.js              |   55 +-
 create-a-container/routers/api/v1/nodes.js    |   70 +
 create-a-container/utils/dummy-api.js         |   25 +
 create-a-container/utils/proxmox-api.js       |   10 +
 20 files changed, 1880 insertions(+), 434 deletions(-)
 create mode 100644 create-a-container/client/src/components/containers/ContainersDataGrid.tsx
 create mode 100644 create-a-container/client/src/components/nodes/CredentialsBadge.tsx
 create mode 100644 create-a-container/client/src/components/nodes/NodeRowActions.tsx
 create mode 100644 create-a-container/client/src/components/nodes/NodeStats.tsx
 create mode 100644 create-a-container/client/src/components/nodes/NodesDataGrid.tsx
 create mode 100644 create-a-container/client/src/components/nodes/NvidiaBadge.tsx
 create mode 100644 create-a-container/client/src/components/nodes/ResourceBar.tsx

diff --git a/create-a-container/client/package-lock.json b/create-a-container/client/package-lock.json
index f16d6cea..359ad13d 100644
--- a/create-a-container/client/package-lock.json
+++ b/create-a-container/client/package-lock.json
@@ -9,8 +9,14 @@
       "version": "0.0.0",
       "dependencies": {
         "@hookform/resolvers": "^3.9.1",
+<<<<<<< Updated upstream
         "@mieweb/ui": "*",
+=======
+        "@mieweb/datavis": "1.6.0",
+        "@mieweb/ui": "^0.7.1",
+>>>>>>> Stashed changes
         "@tanstack/react-query": "^5.62.0",
+        "datavis-ace": "4.1.0",
         "lucide-react": "^0.460.0",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
@@ -29,6 +35,68 @@
         "vite": "^8.0.16"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.7.tgz",
+      "integrity": "sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@dnd-kit/accessibility": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/accessibility/-/accessibility-3.1.1.tgz",
+      "integrity": "sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/core": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/core/-/core-6.3.1.tgz",
+      "integrity": "sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@dnd-kit/accessibility": "^3.1.1",
+        "@dnd-kit/utilities": "^3.2.2",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/sortable": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/sortable/-/sortable-10.0.0.tgz",
+      "integrity": "sha512-+xqhmIIzvAYMGfBYYnbKuNicfSsk4RksY2XdmJhT+HAC01nix6fHCztU68jooFiMUB01Ky3F0FyOvhG/BZrWkg==",
+      "license": "MIT",
+      "dependencies": {
+        "@dnd-kit/utilities": "^3.2.2",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "@dnd-kit/core": "^6.3.0",
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/utilities": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/utilities/-/utilities-3.2.2.tgz",
+      "integrity": "sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/@emnapi/core": {
       "version": "1.10.0",
       "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.10.0.tgz",
@@ -122,43 +190,212 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@mieweb/datavis": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@mieweb/datavis/-/datavis-1.6.0.tgz",
+      "integrity": "sha512-KCO8h/BkOUa7cMjS8rdD3CmXIJjKK770BOdbp99/2cpy8+Ij9e+lE6De0hnvWoHAq7pGAkYXelHI+kKrwOVcdA==",
+      "dependencies": {
+        "@dnd-kit/core": "^6.3.1",
+        "@dnd-kit/sortable": "^10.0.0",
+        "@dnd-kit/utilities": "^3.2.2",
+        "@mieweb/ui": "=0.6.1-dev.169",
+        "datavis-ace": ">=4.1.0",
+        "i18next": "^26.3.4",
+        "lucide-react": "^1.23.0",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0",
+        "react-i18next": "^17.0.8",
+        "react-is": "^18.3.1",
+        "recharts": "^3.9.2"
+      },
+      "peerDependencies": {
+        "datavis-ace": ">=4.1.0",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
+      }
+    },
+    "node_modules/@mieweb/datavis/node_modules/@mieweb/ui": {
+      "version": "0.6.1-dev.169",
+      "resolved": "https://registry.npmjs.org/@mieweb/ui/-/ui-0.6.1-dev.169.tgz",
+      "integrity": "sha512-YE6vtT/6+hMB7YQROZxPUKm4FVxLTYyLAru+IY8enn9x6GsctCeOA0yjHD6RjQ8oqQDknWS2c3NEfCJ665pGQw==",
+      "hasInstallScript": true,
+      "license": "SEE LICENSE IN LICENSE",
+      "dependencies": {
+        "@swc/helpers": "^0.5.19",
+        "@tanstack/react-virtual": "^3.14.2",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
+        "dompurify": "^3.4.0",
+        "google-libphonenumber": "^3.2.44",
+        "highlight.js": "^11.11.1",
+        "lucide-react": "^0.562.0",
+        "luxon": "^3.7.2",
+        "marked": "^17.0.3",
+        "onnxruntime-web": "1.19.0",
+        "tailwind-merge": "^2.6.1"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "peerDependencies": {
+        "@kerebron/editor": ">=0.7.9",
+        "@kerebron/editor-kits": ">=0.7.9",
+        "@kerebron/wasm": ">=0.7.9",
+        "@mieweb/datavis": "=1.5.0",
+        "ag-grid-community": ">=32.0.0",
+        "ag-grid-react": ">=32.0.0",
+        "datavis-ace": "=4.1.0",
+        "js-yaml": ">=4.0.0",
+        "katex": ">=0.16.0",
+        "mermaid": ">=11.0.0",
+        "papaparse": ">=5.0.0",
+        "react": ">=18.0.0",
+        "react-dom": ">=18.0.0",
+        "react-markdown": ">=9.0.0",
+        "rehype-highlight": ">=7.0.0",
+        "rehype-katex": ">=7.0.0",
+        "rehype-sanitize": ">=6.0.0",
+        "remark-gfm": ">=4.0.0",
+        "remark-math": ">=6.0.0",
+        "wavesurfer.js": ">=7.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@kerebron/editor": {
+          "optional": true
+        },
+        "@kerebron/editor-kits": {
+          "optional": true
+        },
+        "@kerebron/wasm": {
+          "optional": true
+        },
+        "@mieweb/datavis": {
+          "optional": true
+        },
+        "ag-grid-community": {
+          "optional": true
+        },
+        "ag-grid-react": {
+          "optional": true
+        },
+        "datavis-ace": {
+          "optional": true
+        },
+        "js-yaml": {
+          "optional": true
+        },
+        "katex": {
+          "optional": true
+        },
+        "mermaid": {
+          "optional": true
+        },
+        "papaparse": {
+          "optional": true
+        },
+        "react": {
+          "optional": false
+        },
+        "react-dom": {
+          "optional": false
+        },
+        "react-markdown": {
+          "optional": true
+        },
+        "rehype-highlight": {
+          "optional": true
+        },
+        "rehype-katex": {
+          "optional": true
+        },
+        "rehype-sanitize": {
+          "optional": true
+        },
+        "remark-gfm": {
+          "optional": true
+        },
+        "remark-math": {
+          "optional": true
+        },
+        "wavesurfer.js": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mieweb/datavis/node_modules/@mieweb/ui/node_modules/lucide-react": {
+      "version": "0.562.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.562.0.tgz",
+      "integrity": "sha512-82hOAu7y0dbVuFfmO4bYF1XEwYk/mEbM5E+b1jgci/udUBEE/R7LF5Ip0CCEmXe8AybRM8L+04eP+LGZeDvkiw==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@mieweb/datavis/node_modules/lucide-react": {
+      "version": "1.28.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-1.28.0.tgz",
+      "integrity": "sha512-fARAFJULsGuDDydjp6+6blekG/sBIM29TerzLjc9bQUKAcEfrSc4ZQKb25KRz4OMKd87cZTb5dgq0w/T6KufVg==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/@mieweb/ui": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/@mieweb/ui/-/ui-0.6.1.tgz",
-      "integrity": "sha512-M1zHSukvCs9fTXTa/fZfHKueWOhOv8oomq0Mic9QhXcVMkN6i+6/JQdboEEJRtQYUhxGwNoTFbYIzMpbODvoXg==",
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/@mieweb/ui/-/ui-0.7.1.tgz",
+      "integrity": "sha512-39FDW2YjTfjH28atU81BUljhH+9YWV49X9ymMuElusNlwV9DakLpr26VsH01X5M1qX6VVheOPnTyv8SzzKAo3g==",
       "hasInstallScript": true,
       "license": "SEE LICENSE IN LICENSE",
       "dependencies": {
         "@swc/helpers": "^0.5.19",
+        "@tanstack/react-virtual": "^3.14.2",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
+        "dompurify": "^3.4.0",
         "google-libphonenumber": "^3.2.44",
+        "highlight.js": "^11.11.1",
         "lucide-react": "^0.562.0",
         "luxon": "^3.7.2",
+        "marked": "^17.0.3",
+        "onnxruntime-web": "1.19.0",
         "tailwind-merge": "^2.6.1"
       },
       "engines": {
-        "node": ">=20.0.0"
+        "node": "^20.19.0 || >=22.12.0"
       },
       "peerDependencies": {
-        "@esheet/builder": ">=0.0.2",
-        "@esheet/renderer": ">=0.0.2",
-        "@ozwell/react": ">=0.1.0",
+        "@kerebron/editor": ">=0.7.9",
+        "@kerebron/editor-kits": ">=0.7.9",
+        "@kerebron/wasm": ">=0.7.9",
+        "@mieweb/datavis": "=1.6.0",
         "ag-grid-community": ">=32.0.0",
         "ag-grid-react": ">=32.0.0",
-        "datavis-ace": "=4.0.0-PRE.2",
+        "datavis-ace": "=4.1.0",
+        "js-yaml": ">=4.0.0",
+        "katex": ">=0.16.0",
+        "mermaid": ">=11.0.0",
+        "papaparse": ">=5.0.0",
         "react": ">=18.0.0",
         "react-dom": ">=18.0.0",
+        "react-markdown": ">=9.0.0",
+        "rehype-highlight": ">=7.0.0",
+        "rehype-katex": ">=7.0.0",
+        "rehype-sanitize": ">=6.0.0",
+        "remark-gfm": ">=4.0.0",
+        "remark-math": ">=6.0.0",
         "wavesurfer.js": ">=7.0.0"
       },
       "peerDependenciesMeta": {
-        "@esheet/builder": {
+        "@kerebron/editor": {
+          "optional": true
+        },
+        "@kerebron/editor-kits": {
           "optional": true
         },
-        "@esheet/renderer": {
+        "@kerebron/wasm": {
           "optional": true
         },
-        "@ozwell/react": {
+        "@mieweb/datavis": {
           "optional": true
         },
         "ag-grid-community": {
@@ -170,12 +407,42 @@
         "datavis-ace": {
           "optional": true
         },
+        "js-yaml": {
+          "optional": true
+        },
+        "katex": {
+          "optional": true
+        },
+        "mermaid": {
+          "optional": true
+        },
+        "papaparse": {
+          "optional": true
+        },
         "react": {
           "optional": false
         },
         "react-dom": {
           "optional": false
         },
+        "react-markdown": {
+          "optional": true
+        },
+        "rehype-highlight": {
+          "optional": true
+        },
+        "rehype-katex": {
+          "optional": true
+        },
+        "rehype-sanitize": {
+          "optional": true
+        },
+        "remark-gfm": {
+          "optional": true
+        },
+        "remark-math": {
+          "optional": true
+        },
         "wavesurfer.js": {
           "optional": true
         }
@@ -219,6 +486,89 @@
         "url": "https://github.com/sponsors/Boshen"
       }
     },
+    "node_modules/@protobufjs/aspromise": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/aspromise/-/aspromise-1.1.2.tgz",
+      "integrity": "sha512-j+gKExEuLmKwvz3OgROXtrJ2UG2x8Ch2YZUxahh+s1F2HZ+wAceUNLkvy6zKCPVRkU++ZWQrdxsUeQXmcg4uoQ==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@protobufjs/base64": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/base64/-/base64-1.1.2.tgz",
+      "integrity": "sha512-AZkcAA5vnN/v4PDqKyMR5lx7hZttPDgClv83E//FMNhR2TMcLUhfRUBHCmSl0oi9zMgDDqRUJkSxO3wm85+XLg==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@protobufjs/codegen": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@protobufjs/codegen/-/codegen-2.0.5.tgz",
+      "integrity": "sha512-zgXFLzW3Ap33e6d0Wlj4MGIm6Ce8O89n/apUaGNB/jx+hw+ruWEp7EwGUshdLKVRCxZW12fp9r40E1mQrf/34g==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@protobufjs/eventemitter": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@protobufjs/eventemitter/-/eventemitter-1.1.1.tgz",
+      "integrity": "sha512-vW1GmwMZNnL+gMRaovlh9yZX74kc+TTU3FObkkurpMaRtBfLP3ldjS9KQWlwZgraRE0+dheEEoAxdzcJQ8eXZg==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@protobufjs/fetch": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@protobufjs/fetch/-/fetch-1.1.1.tgz",
+      "integrity": "sha512-GpptLrs57adMSuHi3VNj0mAF8dwh36LMaYF6XyJ6JMWlVsc+t42tm1HSEDmOs3A8fC9yyeisgLhsTVQokOZ0zw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@protobufjs/aspromise": "^1.1.1"
+      }
+    },
+    "node_modules/@protobufjs/float": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/float/-/float-1.0.2.tgz",
+      "integrity": "sha512-Ddb+kVXlXst9d+R9PfTIxh1EdNkgoRe5tOX6t01f1lYWOvJnSPDBlG241QLzcyPdoNTsblLUdujGSE4RzrTZGQ==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@protobufjs/path": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/path/-/path-1.1.2.tgz",
+      "integrity": "sha512-6JOcJ5Tm08dOHAbdR3GrvP+yUUfkjG5ePsHYczMFLq3ZmMkAD98cDgcT2iA1lJ9NVwFd4tH/iSSoe44YWkltEA==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@protobufjs/pool": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/pool/-/pool-1.1.0.tgz",
+      "integrity": "sha512-0kELaGSIDBKvcgS4zkjz1PeddatrjYcmMWOlAuAPwAeccUrPHdUqo/J6LiymHHEiJT5NrF1UVwxY14f+fy4WQw==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@protobufjs/utf8": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.2.tgz",
+      "integrity": "sha512-b1UQwcEZ4yCnMCD8DAL1VlbvBJE9/IX4FTIp7BG1xYpf29SLazLSrqUkj4w7Y5y7cCVP6E5tcqqcI0xemPkHug==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@reduxjs/toolkit": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.12.0.tgz",
+      "integrity": "sha512-KiT+RzZbp6mQET+Mg+h2c97+9j1sNflUxQkIHI7Yuzf6Peu+OYpmkn6nbHWmLLWj+1ZODUJFwGZ7gx3L9R9EOw==",
+      "license": "MIT",
+      "dependencies": {
+        "@standard-schema/spec": "^1.0.0",
+        "@standard-schema/utils": "^0.3.0",
+        "immer": "^11.0.0",
+        "redux": "^5.0.1",
+        "redux-thunk": "^3.1.0",
+        "reselect": "^5.1.0"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.0 || ^18 || ^19",
+        "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-redux": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@rolldown/binding-android-arm64": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.0.3.tgz",
@@ -501,6 +851,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@standard-schema/spec": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
+      "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
+      "license": "MIT"
+    },
+    "node_modules/@standard-schema/utils": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
+      "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==",
+      "license": "MIT"
+    },
     "node_modules/@swc/helpers": {
       "version": "0.5.21",
       "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.21.tgz",
@@ -874,6 +1236,33 @@
         "react": "^18 || ^19"
       }
     },
+    "node_modules/@tanstack/react-virtual": {
+      "version": "3.14.9",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.14.9.tgz",
+      "integrity": "sha512-qZyr0FZDP8rDC4WBhsryIZmAd9bveJvFGUJJtskWaew6/0dTRS6wZxnR6VQ5bY2KwL3LjerrHqQLk3a0GKcPXQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/virtual-core": "3.17.7"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@tanstack/virtual-core": {
+      "version": "3.17.7",
+      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.17.7.tgz",
+      "integrity": "sha512-bp+v10y65sp2H7WpWfIMyxTNfl8ZVfxFTLRjPIFRryi6FV/J33z4IS53WO4pTk36KlvJ4iLiQz+oaydDC1xbcA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
     "node_modules/@tybys/wasm-util": {
       "version": "0.10.2",
       "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.2.tgz",
@@ -885,11 +1274,73 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@types/d3-array": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.2.tgz",
+      "integrity": "sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-color": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
+      "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-ease": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
+      "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-interpolate": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
+      "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-color": "*"
+      }
+    },
+    "node_modules/@types/d3-path": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz",
+      "integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-scale": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
+      "integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-time": "*"
+      }
+    },
+    "node_modules/@types/d3-shape": {
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.8.tgz",
+      "integrity": "sha512-lae0iWfcDeR7qt7rA88BNiqdvPS5pFVPpo5OfjElwNaT2yyekbM0C9vK+yqBqEmHr6lDkRnYNoTBYlAgJa7a4w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-path": "*"
+      }
+    },
+    "node_modules/@types/d3-time": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
+      "integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-timer": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
+      "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
+      "license": "MIT"
+    },
     "node_modules/@types/node": {
       "version": "22.19.19",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-22.19.19.tgz",
       "integrity": "sha512-dyh/xO2Fh5bYrfWaaqGrRQQGkNdmYw6AmaAUvYeUMNTWQtvb796ikLdmTchRmOlOiIJ1TDXfWgVx1QkUlQ6Hew==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "undici-types": "~6.21.0"
@@ -899,7 +1350,7 @@
       "version": "19.2.14",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz",
       "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "csstype": "^3.2.2"
@@ -915,6 +1366,19 @@
         "@types/react": "^19.2.0"
       }
     },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/@types/use-sync-external-store": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
+      "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==",
+      "license": "MIT"
+    },
     "node_modules/@vitejs/plugin-react": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-6.0.2.tgz",
@@ -941,6 +1405,15 @@
         }
       }
     },
+    "node_modules/bignumber.js": {
+      "version": "9.3.1",
+      "resolved": "https://registry.npmjs.org/bignumber.js/-/bignumber.js-9.3.1.tgz",
+      "integrity": "sha512-Ko0uX15oIUS7wJ3Rb30Fs6SkVbLmPBAKdlm7q9+ak9bbIeFf0MwuBsQV6z7+X768/cHsfg+WlysDWJcmthjsjQ==",
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/class-variance-authority": {
       "version": "0.7.1",
       "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
@@ -975,11 +1448,179 @@
         "url": "https://opencollective.com/express"
       }
     },
+    "node_modules/core-js": {
+      "version": "3.49.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.49.0.tgz",
+      "integrity": "sha512-es1U2+YTtzpwkxVLwAFdSpaIMyQaq0PBgm3YD1W3Qpsn1NAmO3KSgZfu+oGSWVu6NvLHoHCV/aYcsE5wiB7ALg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
     "node_modules/csstype": {
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
-      "dev": true,
+      "devOptional": true,
+      "license": "MIT"
+    },
+    "node_modules/d": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/d/-/d-1.0.2.tgz",
+      "integrity": "sha512-MOqHvMWF9/9MX6nza0KgvFH4HpMU0EF5uUDXqX/BtxtU8NfB0QzRtJ8Oe/6SuS4kbhyzVJwjd97EA4PKrzJ8bw==",
+      "license": "ISC",
+      "dependencies": {
+        "es5-ext": "^0.10.64",
+        "type": "^2.7.2"
+      },
+      "engines": {
+        "node": ">=0.12"
+      }
+    },
+    "node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "license": "ISC",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-format": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.2.tgz",
+      "integrity": "sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-path": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-time": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/datavis-ace": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/datavis-ace/-/datavis-ace-4.1.0.tgz",
+      "integrity": "sha512-heaXzdklp3jiqGRoK7YjcklyPT/2aigEEGMSV8Is2Z58oqHf8/rFPmztXjKb5ZQSqn6ygyPtV+u/iwJjTkhoFg==",
+      "license": "see LICENSE",
+      "dependencies": {
+        "bignumber.js": "=9.3.1",
+        "core-js": "=3.49.0",
+        "es6-symbol": "=3.1.4",
+        "json-formatter-js": "git+https://github.com/mieweb/json-formatter-js.git",
+        "moment": "=2.30.1",
+        "numeral": "=2.0.6",
+        "papaparse": "=5.5.4",
+        "sprintf-js": "=1.1.3",
+        "underscore": "=1.13.8"
+      }
+    },
+    "node_modules/decimal.js-light": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
+      "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==",
       "license": "MIT"
     },
     "node_modules/detect-libc": {
@@ -992,6 +1633,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/dompurify": {
+      "version": "3.4.13",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.4.13.tgz",
+      "integrity": "sha512-2vmYIoqjze2d+kakP8S/nS5shfsl587kzwEjcGlTdiksUVgFHnFCsLYDVj/JNqJVOQZGSYBTmuycv0PodwmnMQ==",
+      "license": "(MPL-2.0 OR Apache-2.0)",
+      "optionalDependencies": {
+        "@types/trusted-types": "^2.0.7"
+      }
+    },
     "node_modules/enhanced-resolve": {
       "version": "5.21.3",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.21.3.tgz",
@@ -1006,6 +1656,97 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/es-toolkit": {
+      "version": "1.50.0",
+      "resolved": "https://registry.npmjs.org/es-toolkit/-/es-toolkit-1.50.0.tgz",
+      "integrity": "sha512-OyZKhUVvEep9ITEiwHn8GKnMRQIVqoSIX7WnRbkWgJkllCujilqP2rD0u979tkl8wqyc8ICwlc1UBVv/Sl1G6w==",
+      "license": "MIT",
+      "workspaces": [
+        "docs",
+        "benchmarks",
+        "tests/types"
+      ]
+    },
+    "node_modules/es5-ext": {
+      "version": "0.10.64",
+      "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.64.tgz",
+      "integrity": "sha512-p2snDhiLaXe6dahss1LddxqEm+SkuDvV8dnIQG0MWjyHpcMNfXKPE+/Cc0y+PhxJX3A4xGNeFCj5oc0BUh6deg==",
+      "hasInstallScript": true,
+      "license": "ISC",
+      "dependencies": {
+        "es6-iterator": "^2.0.3",
+        "es6-symbol": "^3.1.3",
+        "esniff": "^2.0.1",
+        "next-tick": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/es6-iterator": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz",
+      "integrity": "sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g==",
+      "license": "MIT",
+      "dependencies": {
+        "d": "1",
+        "es5-ext": "^0.10.35",
+        "es6-symbol": "^3.1.1"
+      }
+    },
+    "node_modules/es6-symbol": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.4.tgz",
+      "integrity": "sha512-U9bFFjX8tFiATgtkJ1zg25+KviIXpgRvRHS8sau3GfhVzThRQrOeksPeT0BWW2MNZs1OEWJ1DPXOQMn0KKRkvg==",
+      "license": "ISC",
+      "dependencies": {
+        "d": "^1.0.2",
+        "ext": "^1.7.0"
+      },
+      "engines": {
+        "node": ">=0.12"
+      }
+    },
+    "node_modules/esniff": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/esniff/-/esniff-2.0.1.tgz",
+      "integrity": "sha512-kTUIGKQ/mDPFoJ0oVfcmyJn4iBDRptjNVIzwIFR7tqWXdVI9xfA2RMwY/gbSpJG3lkdWNEjLap/NqVHZiJsdfg==",
+      "license": "ISC",
+      "dependencies": {
+        "d": "^1.0.1",
+        "es5-ext": "^0.10.62",
+        "event-emitter": "^0.3.5",
+        "type": "^2.7.2"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/event-emitter": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/event-emitter/-/event-emitter-0.3.5.tgz",
+      "integrity": "sha512-D9rRn9y7kLPnJ+hMq7S/nhvoKwwvVJahBi2BPmx3bvbsEdK3W9ii8cBSGjP+72/LnM4n6fo3+dkCX5FeTQruXA==",
+      "license": "MIT",
+      "dependencies": {
+        "d": "1",
+        "es5-ext": "~0.10.14"
+      }
+    },
+    "node_modules/eventemitter3": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.4.tgz",
+      "integrity": "sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw==",
+      "license": "MIT"
+    },
+    "node_modules/ext": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/ext/-/ext-1.7.0.tgz",
+      "integrity": "sha512-6hxeJYaL110a9b5TEJSj0gojyHQAmA2ch5Os+ySCiA1QGdS697XWY1pzsrSjqA9LDEEgdB/KypIlR59RcLuHYw==",
+      "license": "ISC",
+      "dependencies": {
+        "type": "^2.7.2"
+      }
+    },
     "node_modules/fdir": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
@@ -1024,6 +1765,12 @@
         }
       }
     },
+    "node_modules/flatbuffers": {
+      "version": "1.12.0",
+      "resolved": "https://registry.npmjs.org/flatbuffers/-/flatbuffers-1.12.0.tgz",
+      "integrity": "sha512-c7CZADjRcl6j0PlvFy0ZqXQ67qSEZfrVPynmnL+2zPc+NtMvrF8Y0QceMo7QqnSPc7+uWjUIAbvCQ5WIKlMVdQ==",
+      "license": "SEE LICENSE IN LICENSE.txt"
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -1055,6 +1802,77 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/guid-typescript": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/guid-typescript/-/guid-typescript-1.0.9.tgz",
+      "integrity": "sha512-Y8T4vYhEfwJOTbouREvG+3XDsjr8E3kIr7uf+JZ0BYloFsttiHU0WfvANVsR7TxNUJa/WpCnw/Ino/p+DeBhBQ==",
+      "license": "ISC"
+    },
+    "node_modules/highlight.js": {
+      "version": "11.11.1",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.11.1.tgz",
+      "integrity": "sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/html-parse-stringify": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-4.0.1.tgz",
+      "integrity": "sha512-0zHsZJrK7S3K2aucXWL6ycoYJ/iNtIcFHC/nYQgFklPtrv5LpJctIiSCroWZWeuoXvuyFdzp6KzjJQ+OT5MfFw==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://locize.com"
+      }
+    },
+    "node_modules/i18next": {
+      "version": "26.3.6",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-26.3.6.tgz",
+      "integrity": "sha512-Bu5Z2nAXgfVyM8xvW3jk9EKRIuX37PudsrBViThNFx7CR7aaYTpP01cxNB/E4c4UUzTDiAZRstEhsRfPOL/8xA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://www.locize.com/i18next"
+        },
+        {
+          "type": "individual",
+          "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
+        },
+        {
+          "type": "individual",
+          "url": "https://www.locize.com"
+        }
+      ],
+      "license": "MIT",
+      "peerDependencies": {
+        "typescript": "^5 || ^6 || ^7"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/immer": {
+      "version": "11.1.15",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-11.1.15.tgz",
+      "integrity": "sha512-VrNANlmnWQnh5COXIIOQXM9oOJw7naGKlBT74ZOOR6lpVXc3gFEu9FJLDFcpCJ2j+NWr8TIwtWD//T6ZX6TKiQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/jiti": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.7.0.tgz",
@@ -1065,6 +1883,11 @@
         "jiti": "lib/jiti-cli.mjs"
       }
     },
+    "node_modules/json-formatter-js": {
+      "version": "2.3.4",
+      "resolved": "git+ssh://git@github.com/mieweb/json-formatter-js.git#503be5a8368ecdea777f8a7e98bda827391aa6ac",
+      "license": "MIT"
+    },
     "node_modules/lightningcss": {
       "version": "1.32.0",
       "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz",
@@ -1326,6 +2149,12 @@
         "url": "https://opencollective.com/parcel"
       }
     },
+    "node_modules/long": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/long/-/long-5.3.2.tgz",
+      "integrity": "sha512-mNAgZ1GmyNhD7AuqnTG3/VQ26o760+ZYBPKjPvugO8+nLbYfX6TVpJPseBvopbdY+qpZ/lKUnmEc1LeZYS3QAA==",
+      "license": "Apache-2.0"
+    },
     "node_modules/lucide-react": {
       "version": "0.460.0",
       "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.460.0.tgz",
@@ -1354,6 +2183,27 @@
         "@jridgewell/sourcemap-codec": "^1.5.5"
       }
     },
+    "node_modules/marked": {
+      "version": "17.0.6",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-17.0.6.tgz",
+      "integrity": "sha512-gB0gkNafnonOw0obSTEGZTT86IuhILt2Wfx0mWH/1Au83kybTayroZ/V6nS25mN7u8ASy+5fMhgB3XPNrOZdmA==",
+      "license": "MIT",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/moment": {
+      "version": "2.30.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
+      "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.12",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.12.tgz",
@@ -1373,6 +2223,47 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/next-tick": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.1.0.tgz",
+      "integrity": "sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==",
+      "license": "ISC"
+    },
+    "node_modules/numeral": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/numeral/-/numeral-2.0.6.tgz",
+      "integrity": "sha512-qaKRmtYPZ5qdw4jWJD6bxEf1FJEqllJrwxCLIm0sQU/A7v2/czigzOb+C2uSiFsa9lBUzeH7M1oK+Q+OLxL3kA==",
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/onnxruntime-common": {
+      "version": "1.19.0",
+      "resolved": "https://registry.npmjs.org/onnxruntime-common/-/onnxruntime-common-1.19.0.tgz",
+      "integrity": "sha512-Oo16UIJ/xLOtZDVGcL4bL8EP8MiNFztyBmR3pB14D+cl/UCpOgHHzEk0MADSmYXQ0FgyEegPXtOFcJqhq1YRsw==",
+      "license": "MIT"
+    },
+    "node_modules/onnxruntime-web": {
+      "version": "1.19.0",
+      "resolved": "https://registry.npmjs.org/onnxruntime-web/-/onnxruntime-web-1.19.0.tgz",
+      "integrity": "sha512-EY2KjvfJ/f5nxiXDii4eD0xe5KIn+mRs55F6z2qomALyG05Qj+kqF81CKqzTa4cXowE9b9aVSqsvEVZkjOI5yA==",
+      "license": "MIT",
+      "dependencies": {
+        "flatbuffers": "^1.12.0",
+        "guid-typescript": "^1.0.9",
+        "long": "^5.2.3",
+        "onnxruntime-common": "1.19.0",
+        "platform": "^1.3.6",
+        "protobufjs": "^7.2.4"
+      }
+    },
+    "node_modules/papaparse": {
+      "version": "5.5.4",
+      "resolved": "https://registry.npmjs.org/papaparse/-/papaparse-5.5.4.tgz",
+      "integrity": "sha512-SwzWD9gl/ElwYLCI0nUja1mFJzjq2D8ziShfNBa7zCHzkOozeOGDwHWQ+tvCzEZcewecWZ5U7kUopDnG+DFYEQ==",
+      "license": "MIT"
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -1393,6 +2284,12 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/platform": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/platform/-/platform-1.3.6.tgz",
+      "integrity": "sha512-fnWVljUchTro6RiCFvCXBbNhJc2NijN7oIQxbwsyL0buWJPG85v81ehlHI9fXrJsMNgTofEoWIQeClKpgxFLrg==",
+      "license": "MIT"
+    },
     "node_modules/postcss": {
       "version": "8.5.15",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.15.tgz",
@@ -1422,25 +2319,48 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/protobufjs": {
+      "version": "7.6.5",
+      "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-7.6.5.tgz",
+      "integrity": "sha512-/FPD0nUc9jH6rfFjji9IBqOz4pcSE3CsT1m7Ep6Mdb0LxSUMj8hgl6GomOvZzpNpAqqGaXA0P3VSrZLFzIhQrw==",
+      "hasInstallScript": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@protobufjs/aspromise": "^1.1.2",
+        "@protobufjs/base64": "^1.1.2",
+        "@protobufjs/codegen": "^2.0.5",
+        "@protobufjs/eventemitter": "^1.1.1",
+        "@protobufjs/fetch": "^1.1.1",
+        "@protobufjs/float": "^1.0.2",
+        "@protobufjs/path": "^1.1.2",
+        "@protobufjs/pool": "^1.1.0",
+        "@protobufjs/utf8": "^1.1.1",
+        "@types/node": ">=13.7.0",
+        "long": "^5.3.2"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/react": {
-      "version": "19.2.6",
-      "resolved": "https://registry.npmjs.org/react/-/react-19.2.6.tgz",
-      "integrity": "sha512-sfWGGfavi0xr8Pg0sVsyHMAOziVYKgPLNrS7ig+ivMNb3wbCBw3KxtflsGBAwD3gYQlE/AEZsTLgToRrSCjb0Q==",
+      "version": "19.2.8",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.2.8.tgz",
+      "integrity": "sha512-PWaYA1L/q9u2u7xYQi+Y3L3Yfnie7XyLeaJICV1MGD6LprsBxcAqGjYyr0eY3p+QdsA+x/Irkt4Qif8D63+Sbw==",
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
     },
     "node_modules/react-dom": {
-      "version": "19.2.6",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.6.tgz",
-      "integrity": "sha512-0prMI+hvBbPjsWnxDLxlCGyM8PN6UuWjEUCYmZhO67xIV9Xasa/r/vDnq+Xyq4Lo27g8QSbO5YzARu0D1Sps3g==",
+      "version": "19.2.8",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.8.tgz",
+      "integrity": "sha512-rVprimfGBG3DR+Tq0IQG2DT5PxKth1WIGDmj5yPmlzr4YBe7uyE+Du4oVqTDXZSHGGGXRtTJEGSSePyQCMBglQ==",
       "license": "MIT",
       "dependencies": {
         "scheduler": "^0.27.0"
       },
       "peerDependencies": {
-        "react": "^19.2.6"
+        "react": "^19.2.8"
       }
     },
     "node_modules/react-hook-form": {
@@ -1459,6 +2379,62 @@
         "react": "^16.8.0 || ^17 || ^18 || ^19"
       }
     },
+    "node_modules/react-i18next": {
+      "version": "17.0.11",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-17.0.11.tgz",
+      "integrity": "sha512-cDtkXgxjuFTWUH6V+aQn1Ve5vDiUztCNPWW5GtSHDccsgRXO1nE6QFWCEmc1KAutrb3OUv87wFShJL5RhUwPXg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.29.2",
+        "html-parse-stringify": "^4.0.1",
+        "use-sync-external-store": "^1.6.0"
+      },
+      "peerDependencies": {
+        "i18next": ">= 26.2.0",
+        "react": ">= 16.8.0",
+        "typescript": "^5 || ^6 || ^7"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-is": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
+      "license": "MIT"
+    },
+    "node_modules/react-redux": {
+      "version": "9.3.0",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.3.0.tgz",
+      "integrity": "sha512-KQopgqFo/p/fgmAs5qz6p5RWaNAzq40WAu7fJIXnQpYxFPbJYtsJPWvGeF2rOBaY/kEuV77AVsX8TsQzKm+A/g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/use-sync-external-store": "^0.0.6",
+        "use-sync-external-store": "^1.4.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^18.2.25 || ^19",
+        "react": "^18.0 || ^19",
+        "redux": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "redux": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-router": {
       "version": "7.18.0",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.18.0.tgz",
@@ -1481,6 +2457,57 @@
         }
       }
     },
+    "node_modules/recharts": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/recharts/-/recharts-3.10.1.tgz",
+      "integrity": "sha512-QXFrvt6IVcw7eeZCoyXTwkIJAX3Dv1nyVhMicXJ47GsGDDpcN8z6o644DibE9XjpBTThtsomLKnTV6lc+cVFUA==",
+      "license": "MIT",
+      "workspaces": [
+        "www"
+      ],
+      "dependencies": {
+        "@reduxjs/toolkit": "^1.9.0 || 2.x.x",
+        "clsx": "^2.1.1",
+        "decimal.js-light": "^2.5.1",
+        "es-toolkit": "^1.39.3",
+        "eventemitter3": "^5.0.1",
+        "immer": "^11.1.8",
+        "react-redux": "8.x.x || 9.x.x",
+        "reselect": "5.2.0",
+        "tiny-invariant": "^1.3.3",
+        "use-sync-external-store": "^1.2.2",
+        "victory-vendor": "^37.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-is": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/redux": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
+      "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
+      "license": "MIT"
+    },
+    "node_modules/redux-thunk": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
+      "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "redux": "^5.0.0"
+      }
+    },
+    "node_modules/reselect": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.2.0.tgz",
+      "integrity": "sha512-AgZ3UOZm3YndfrJ4OYjgrT7bmCm/1iqkjvEfH/oYjzh6PD2qw4QuT3jjnXIrpdt4MTpMXclMT3lXbmRY+XRakw==",
+      "license": "MIT"
+    },
     "node_modules/rolldown": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.0.3.tgz",
@@ -1537,6 +2564,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/sprintf-js": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.1.3.tgz",
+      "integrity": "sha512-Oo+0REFV59/rz3gfJNKQiBlwfHaSESl1pcGyABQsnnIfWOFt6JNj5gCog2U6MLZ//IGYD+nA8nI+mTShREReaA==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/tailwind-merge": {
       "version": "2.6.1",
       "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.6.1.tgz",
@@ -1568,6 +2601,12 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/tiny-invariant": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
+      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
+      "license": "MIT"
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.17",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz",
@@ -1591,11 +2630,17 @@
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
       "license": "0BSD"
     },
+    "node_modules/type": {
+      "version": "2.7.3",
+      "resolved": "https://registry.npmjs.org/type/-/type-2.7.3.tgz",
+      "integrity": "sha512-8j+1QmAbPvLZow5Qpi6NCaN8FB60p/6x8/vfNqOk/hC+HuvFZhL4+WfekuhQLiqFZXOgQdrs3B+XxEmCc6b3FQ==",
+      "license": "ISC"
+    },
     "node_modules/typescript": {
       "version": "5.9.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
-      "dev": true,
+      "devOptional": true,
       "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",
@@ -1605,13 +2650,49 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/underscore": {
+      "version": "1.13.8",
+      "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.13.8.tgz",
+      "integrity": "sha512-DXtD3ZtEQzc7M8m4cXotyHR+FAS18C64asBYY5vqZexfYryNNnDc02W4hKg3rdQuqOYas1jkseX0+nZXjTXnvQ==",
+      "license": "MIT"
+    },
     "node_modules/undici-types": {
       "version": "6.21.0",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
       "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
-      "dev": true,
       "license": "MIT"
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/victory-vendor": {
+      "version": "37.3.6",
+      "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-37.3.6.tgz",
+      "integrity": "sha512-SbPDPdDBYp+5MJHhBCAyI7wKM3d5ivekigc2Dk2s7pgbZ9wIgIBYGVw4zGHBml/qTFbexrofXW6Gu4noGxrOwQ==",
+      "license": "MIT AND ISC",
+      "dependencies": {
+        "@types/d3-array": "^3.0.3",
+        "@types/d3-ease": "^3.0.0",
+        "@types/d3-interpolate": "^3.0.1",
+        "@types/d3-scale": "^4.0.2",
+        "@types/d3-shape": "^3.1.0",
+        "@types/d3-time": "^3.0.0",
+        "@types/d3-timer": "^3.0.0",
+        "d3-array": "^3.1.6",
+        "d3-ease": "^3.0.1",
+        "d3-interpolate": "^3.0.1",
+        "d3-scale": "^4.0.2",
+        "d3-shape": "^3.1.0",
+        "d3-time": "^3.0.0",
+        "d3-timer": "^3.0.1"
+      }
+    },
     "node_modules/vite": {
       "version": "8.0.16",
       "resolved": "https://registry.npmjs.org/vite/-/vite-8.0.16.tgz",
diff --git a/create-a-container/client/package.json b/create-a-container/client/package.json
index 5c5a1d70..1c05c250 100644
--- a/create-a-container/client/package.json
+++ b/create-a-container/client/package.json
@@ -13,8 +13,10 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^3.9.1",
-    "@mieweb/ui": "latest",
+    "@mieweb/datavis": "1.6.0",
+    "@mieweb/ui": "^0.7.1",
     "@tanstack/react-query": "^5.62.0",
+    "datavis-ace": "4.1.0",
     "lucide-react": "^0.460.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
diff --git a/create-a-container/client/src/components/containers/ContainerFilters.tsx b/create-a-container/client/src/components/containers/ContainerFilters.tsx
index 31c58ad6..5decf606 100644
--- a/create-a-container/client/src/components/containers/ContainerFilters.tsx
+++ b/create-a-container/client/src/components/containers/ContainerFilters.tsx
@@ -50,7 +50,7 @@ export function ContainerFilters({
       <div className="flex flex-wrap items-center gap-2">
         <MultiSelect
           label="User"
-          emptyLabel="All"
+          emptyLabel="Mine"
           icon={<UserIcon className="size-4" />}
           options={userOptions}
           selected={selectedUsers}
diff --git a/create-a-container/client/src/components/containers/ContainersDataGrid.tsx b/create-a-container/client/src/components/containers/ContainersDataGrid.tsx
new file mode 100644
index 00000000..c5b7145b
--- /dev/null
+++ b/create-a-container/client/src/components/containers/ContainersDataGrid.tsx
@@ -0,0 +1,184 @@
+import { useCallback, useEffect, useMemo } from 'react';
+import { DataVisNitroGrid, DataVisNitroSource } from '@mieweb/ui/datavis';
+import type { TableColumn, TableRendererProps } from '@mieweb/datavis';
+import { User } from 'lucide-react';
+import type { Container } from '@/lib/types';
+import { HttpLinks } from './HttpLinks';
+import { NodeLink } from './NodeLink';
+import { RowActions } from './RowActions';
+import { SshLinks } from './SshLinks';
+import { STATUS_LABELS, StatusBadge } from './StatusBadge';
+import { templateTitle } from './shared';
+
+export interface ContainersDataGridProps {
+  containers: Container[];
+  /** Whether to include the owner column (hidden when the list is scoped to self). */
+  showOwner: boolean;
+  sessionUser?: string;
+  siteId?: string;
+  onDelete: (id: number) => void;
+  deleting: boolean;
+  canShare: (c: Container) => boolean;
+  onShare: (c: Container) => void;
+}
+
+// Field types for the DataVis source payload. Custom-rendered columns
+// (HTTP/SSH/actions) are omitted; their search text is supplied per-column.
+const TYPE_INFO: { field: string; type: string }[] = [
+  { field: 'hostname', type: 'string' },
+  { field: 'status', type: 'string' },
+  { field: 'nodeName', type: 'string' },
+  { field: 'owner', type: 'string' },
+  { field: 'template', type: 'string' },
+];
+
+const asContainer = (row: Record<string, unknown>) => row as unknown as Container;
+
+type FormatCell = NonNullable<TableRendererProps['formatCell']>;
+
+/**
+ * Containers list rendered with DataVis NITRO. Rows are fed to the grid through
+ * an in-memory blob URL (the library's `http` source), and the custom cells
+ * (status badge, node/HTTP/SSH links, row actions) are rendered via `formatCell`.
+ */
+export function ContainersDataGrid({
+  containers,
+  showOwner,
+  sessionUser,
+  siteId,
+  onDelete,
+  deleting,
+  canShare,
+  onShare,
+}: ContainersDataGridProps) {
+  // DataVis's `http` source fetches a URL; a blob URL lets us feed local React
+  // Query data without a network round-trip. Rebuilt whenever the rows change.
+  const url = useMemo(() => {
+    const payload = { typeInfo: TYPE_INFO, data: containers };
+    const blob = new Blob([JSON.stringify(payload)], { type: 'application/json' });
+    return URL.createObjectURL(blob);
+  }, [containers]);
+  useEffect(() => () => URL.revokeObjectURL(url), [url]);
+
+  const columns = useMemo<TableColumn[]>(
+    () => [
+      { field: 'hostname', header: 'Hostname', sortable: true, filterable: true },
+      {
+        field: 'status',
+        header: 'Status',
+        sortable: true,
+        filterable: true,
+        getSearchText: (_v, row) => {
+          const c = asContainer(row);
+          return STATUS_LABELS[c.status] ?? c.status;
+        },
+      },
+      { field: 'nodeName', header: 'Node', sortable: true, filterable: true },
+      ...(showOwner
+        ? [{ field: 'owner', header: 'User', sortable: true, filterable: true } as TableColumn]
+        : []),
+      {
+        field: 'template',
+        header: 'Template',
+        sortable: true,
+        filterable: true,
+        getSearchText: (_v, row) => templateTitle(asContainer(row).template),
+      },
+      {
+        field: 'httpEntries',
+        header: 'HTTP',
+        sortable: false,
+        filterable: false,
+        getSearchText: (_v, row) =>
+          asContainer(row)
+            .httpEntries.map((h) => h.externalUrl ?? `:${h.port}`)
+            .join(' '),
+      },
+      {
+        field: 'sshHost',
+        header: 'SSH',
+        sortable: false,
+        filterable: false,
+        getSearchText: (_v, row) => {
+          const c = asContainer(row);
+          return c.sshHost && c.sshPort ? `${c.sshHost}:${c.sshPort}` : '';
+        },
+      },
+      {
+        field: 'actions',
+        header: '',
+        sortable: false,
+        filterable: false,
+        resizable: false,
+        reorderable: false,
+        align: 'right',
+        getSearchText: () => '',
+      },
+    ],
+    [showOwner],
+  );
+
+  const formatCell = useCallback<FormatCell>(
+    (value, row, column) => {
+      const c = asContainer(row);
+      switch (column.field) {
+        case 'hostname':
+          return <span className="font-medium">{c.hostname}</span>;
+        case 'status':
+          return <StatusBadge status={c.status} />;
+        case 'nodeName':
+          return <NodeLink c={c} />;
+        case 'owner':
+          return (
+            <span className="inline-flex items-center gap-1">
+              <User className="size-3.5" aria-hidden="true" />
+              {c.owner}
+            </span>
+          );
+        case 'template':
+          return (
+            <span className="font-mono text-xs" title={c.template || undefined}>
+              {templateTitle(c.template)}
+            </span>
+          );
+        case 'httpEntries':
+          return <HttpLinks c={c} limit={2} />;
+        case 'sshHost':
+          return <SshLinks c={c} sessionUser={sessionUser} />;
+        case 'actions':
+          return (
+            <div className="flex flex-wrap items-center justify-end gap-1">
+              <RowActions
+                c={c}
+                siteId={siteId}
+                onDelete={onDelete}
+                deleting={deleting}
+                canShare={canShare(c)}
+                onShare={onShare}
+              />
+            </div>
+          );
+        default:
+          return value as React.ReactNode;
+      }
+    },
+    [sessionUser, siteId, onDelete, deleting, canShare, onShare],
+  );
+
+  return (
+    <DataVisNitroSource type="http" url={url}>
+      <DataVisNitroGrid
+        columns={columns}
+        formatCell={formatCell}
+        features={{
+          stickyHeaders: true,
+          columnResize: true,
+          columnReorder: true,
+          zebraStripe: true,
+          rowMode: 'clipped',
+        }}
+        height="70vh"
+      />
+    </DataVisNitroSource>
+  );
+}
diff --git a/create-a-container/client/src/components/containers/RowActions.tsx b/create-a-container/client/src/components/containers/RowActions.tsx
index c26ced33..580e532b 100644
--- a/create-a-container/client/src/components/containers/RowActions.tsx
+++ b/create-a-container/client/src/components/containers/RowActions.tsx
@@ -34,6 +34,7 @@ export function RowActions({
           aria-label={`Share ${c.hostname}`}
           leftIcon={<Share2 className="size-4" />}
           onClick={() => onShare(c)}
+          className="cursor-pointer"
         >
           <span className="hidden sm:inline">Share</span>
         </Button>
@@ -58,7 +59,7 @@ export function RowActions({
         }}
         disabled={deleting}
         // Danger tint on hover only; the built-in ghost transition still applies.
-        className="hover:bg-red-100 hover:text-red-700 dark:hover:bg-red-900/40 dark:hover:text-red-200"
+        className="cursor-pointer hover:bg-red-100 hover:text-red-700 dark:hover:bg-red-900/40 dark:hover:text-red-200"
       >
         <span className="hidden sm:inline">Delete</span>
       </Button>
diff --git a/create-a-container/client/src/components/nodes/CredentialsBadge.tsx b/create-a-container/client/src/components/nodes/CredentialsBadge.tsx
new file mode 100644
index 00000000..6965647d
--- /dev/null
+++ b/create-a-container/client/src/components/nodes/CredentialsBadge.tsx
@@ -0,0 +1,23 @@
+import { Badge } from '@mieweb/ui';
+import type { Node } from '@/lib/types';
+
+/** Whether the node has the credentials it needs to reach its hypervisor/host. */
+export function CredentialsBadge({ n }: { n: Node }) {
+  if (n.nodeType === 'dummy') {
+    return <Badge variant="secondary">Not required</Badge>;
+  }
+
+  if (n.nodeType === 'docker') {
+    return n.apiUrl ? (
+      <Badge variant="success">Host set</Badge>
+    ) : (
+      <Badge variant="warning">Missing</Badge>
+    );
+  }
+
+  return n.hasSecret ? (
+    <Badge variant="success">Set</Badge>
+  ) : (
+    <Badge variant="warning">Missing</Badge>
+  );
+}
diff --git a/create-a-container/client/src/components/nodes/NodeRowActions.tsx b/create-a-container/client/src/components/nodes/NodeRowActions.tsx
new file mode 100644
index 00000000..18260242
--- /dev/null
+++ b/create-a-container/client/src/components/nodes/NodeRowActions.tsx
@@ -0,0 +1,46 @@
+import { Link } from 'react-router';
+import { Button } from '@mieweb/ui';
+import { Pencil, Trash2 } from 'lucide-react';
+import { ButtonLink } from '@/components/ButtonLink';
+import type { Node } from '@/lib/types';
+
+/** Per-row actions for the nodes list: edit, delete. */
+export function NodeRowActions({
+  n,
+  siteId,
+  onDelete,
+  deleting,
+}: {
+  n: Node;
+  siteId?: string;
+  onDelete: (id: number) => void;
+  deleting: boolean;
+}) {
+  return (
+    <>
+      <ButtonLink
+        as={Link}
+        to={`/sites/${siteId}/nodes/${n.id}/edit`}
+        variant="ghost"
+        size="sm"
+        aria-label="Edit"
+        leftIcon={<Pencil className="size-4" />}
+      >
+        <span className="hidden sm:inline">Edit</span>
+      </ButtonLink>
+      <Button
+        variant="ghost"
+        size="sm"
+        aria-label="Delete"
+        leftIcon={<Trash2 className="size-4" />}
+        onClick={() => {
+          if (confirm(`Delete node "${n.name}"?`)) onDelete(n.id);
+        }}
+        disabled={deleting}
+        className="cursor-pointer"
+      >
+        <span className="hidden sm:inline">Delete</span>
+      </Button>
+    </>
+  );
+}
diff --git a/create-a-container/client/src/components/nodes/NodeStats.tsx b/create-a-container/client/src/components/nodes/NodeStats.tsx
new file mode 100644
index 00000000..1c1bfe75
--- /dev/null
+++ b/create-a-container/client/src/components/nodes/NodeStats.tsx
@@ -0,0 +1,97 @@
+import { useQuery } from '@tanstack/react-query';
+import { Alert, AlertDescription, Badge, Spinner } from '@mieweb/ui';
+import { ApiError } from '@/lib/api';
+import { keys, queries } from '@/lib/queries';
+import type { Node } from '@/lib/types';
+import { ResourceBar } from './ResourceBar';
+
+/** Compact "3d 4h" style uptime. */
+function formatUptime(seconds: number): string {
+  const d = Math.floor(seconds / 86400);
+  const h = Math.floor((seconds % 86400) / 3600);
+  const m = Math.floor((seconds % 3600) / 60);
+  if (d > 0) return `${d}d ${h}h`;
+  if (h > 0) return `${h}h ${m}m`;
+  return `${m}m`;
+}
+
+/**
+ * Expandable resource dashboard for a node. Fetched lazily (only mounts when the
+ * row is expanded) and polled while open so the bars track live utilization.
+ */
+export function NodeStats({ siteId, node }: { siteId?: string; node: Node }) {
+  const { data, isLoading, error } = useQuery({
+    queryKey: keys.nodeStats(siteId!, node.id),
+    queryFn: () => queries.getNodeStats(siteId!, node.id),
+    enabled: !!siteId,
+    staleTime: 15_000,
+    refetchInterval: 30_000,
+  });
+
+  if (isLoading) {
+    return (
+      <div className="flex justify-center p-4">
+        <Spinner size="sm" />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <Alert variant="danger">
+        <AlertDescription>{(error as ApiError).message}</AlertDescription>
+      </Alert>
+    );
+  }
+
+  if (!data || !data.available) {
+    return (
+      <Alert variant="info">
+        <AlertDescription>
+          Live statistics are unavailable for this node
+          {node.nodeType === 'docker' ? ' (Docker host)' : ''}.
+        </AlertDescription>
+      </Alert>
+    );
+  }
+
+  const cpuPct = data.cpu != null ? data.cpu * 100 : 0;
+
+  return (
+    <div className="flex flex-col gap-4 p-1">
+      <div className="flex items-center gap-2">
+        <Badge variant="success">{data.status === 'online' ? 'Online' : (data.status ?? 'Online')}</Badge>
+        {data.uptime != null && (
+          <span className="text-xs text-muted-foreground">Uptime: {formatUptime(data.uptime)}</span>
+        )}
+      </div>
+
+      <div className="grid gap-x-6 gap-y-3 sm:grid-cols-2 lg:grid-cols-3">
+        <ResourceBar
+          label={`CPU${data.cpuCount ? ` (${data.cpuCount} cores)` : ''}`}
+          used={cpuPct}
+          total={100}
+          format="percent"
+        />
+        {data.memory && <ResourceBar label="Memory" used={data.memory.used} total={data.memory.total} />}
+        {data.swap && data.swap.total > 0 && (
+          <ResourceBar label="Swap" used={data.swap.used} total={data.swap.total} />
+        )}
+        {data.rootfs && <ResourceBar label="Root FS" used={data.rootfs.used} total={data.rootfs.total} />}
+      </div>
+
+      {data.storages.length > 0 && (
+        <div className="flex flex-col gap-2">
+          <span className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
+            Storage
+          </span>
+          <div className="grid gap-x-6 gap-y-3 sm:grid-cols-2 lg:grid-cols-3">
+            {data.storages.map((s) => (
+              <ResourceBar key={s.name} label={s.name} used={s.used} total={s.total} />
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/create-a-container/client/src/components/nodes/NodesDataGrid.tsx b/create-a-container/client/src/components/nodes/NodesDataGrid.tsx
new file mode 100644
index 00000000..ddbdad6c
--- /dev/null
+++ b/create-a-container/client/src/components/nodes/NodesDataGrid.tsx
@@ -0,0 +1,130 @@
+import { useCallback, useEffect, useMemo } from 'react';
+import { DataVisNitroGrid, DataVisNitroSource } from '@mieweb/ui/datavis';
+import type { TableColumn, TableRendererProps } from '@mieweb/datavis';
+import type { Node } from '@/lib/types';
+import { CredentialsBadge } from './CredentialsBadge';
+import { NvidiaBadge } from './NvidiaBadge';
+import { NodeRowActions } from './NodeRowActions';
+import { NodeStats } from './NodeStats';
+
+// Field types for the DataVis source payload; custom-rendered columns
+// (credentials/actions) are omitted and supply their own search text.
+const TYPE_INFO: { field: string; type: string }[] = [
+  { field: 'name', type: 'string' },
+  { field: 'ipv4Address', type: 'string' },
+  { field: 'apiUrl', type: 'string' },
+  { field: 'nvidiaAvailable', type: 'string' },
+];
+
+const asNode = (row: Record<string, unknown>) => row as unknown as Node;
+
+type FormatCell = NonNullable<TableRendererProps['formatCell']>;
+type DetailRow = NonNullable<TableRendererProps['renderDetailRow']>;
+
+export interface NodesDataGridProps {
+  nodes: Node[];
+  siteId?: string;
+  onDelete: (id: number) => void;
+  deleting: boolean;
+}
+
+/**
+ * Nodes list rendered with DataVis NITRO. Each row has a disclosure toggle that
+ * expands a full-width detail row (`NodeStats`) with live hardware-utilization
+ * bars. Rows are fed to the grid through an in-memory blob URL.
+ */
+export function NodesDataGrid({ nodes, siteId, onDelete, deleting }: NodesDataGridProps) {
+  const url = useMemo(() => {
+    const payload = { typeInfo: TYPE_INFO, data: nodes };
+    const blob = new Blob([JSON.stringify(payload)], { type: 'application/json' });
+    return URL.createObjectURL(blob);
+  }, [nodes]);
+  useEffect(() => () => URL.revokeObjectURL(url), [url]);
+
+  const columns = useMemo<TableColumn[]>(
+    () => [
+      { field: 'name', header: 'Name', sortable: true, filterable: true },
+      { field: 'ipv4Address', header: 'IPv4', sortable: true, filterable: true },
+      { field: 'apiUrl', header: 'API URL', sortable: true, filterable: true },
+      {
+        field: 'nvidiaAvailable',
+        header: 'NVIDIA',
+        sortable: true,
+        filterable: true,
+        getSearchText: (_v, row) => (asNode(row).nvidiaAvailable ? 'Available' : 'No'),
+      },
+      {
+        field: 'credentials',
+        header: 'Credentials',
+        sortable: false,
+        filterable: false,
+        getSearchText: () => '',
+      },
+      {
+        field: 'actions',
+        header: '',
+        sortable: false,
+        filterable: false,
+        resizable: false,
+        reorderable: false,
+        align: 'right',
+        getSearchText: () => '',
+      },
+    ],
+    [],
+  );
+
+  const formatCell = useCallback<FormatCell>(
+    (value, row, column) => {
+      const n = asNode(row);
+      switch (column.field) {
+        case 'name':
+          return <span className="font-medium">{n.name}</span>;
+        case 'ipv4Address':
+          return <span className="font-mono text-xs">{n.ipv4Address || '—'}</span>;
+        case 'apiUrl':
+          return (
+            <span className="break-all font-mono text-xs" title={n.apiUrl || undefined}>
+              {n.apiUrl || '—'}
+            </span>
+          );
+        case 'nvidiaAvailable':
+          return <NvidiaBadge n={n} />;
+        case 'credentials':
+          return <CredentialsBadge n={n} />;
+        case 'actions':
+          return (
+            <div className="flex flex-wrap items-center justify-end gap-1">
+              <NodeRowActions n={n} siteId={siteId} onDelete={onDelete} deleting={deleting} />
+            </div>
+          );
+        default:
+          return value as React.ReactNode;
+      }
+    },
+    [siteId, onDelete, deleting],
+  );
+
+  const renderDetailRow = useCallback<DetailRow>(
+    (row) => <NodeStats siteId={siteId} node={asNode(row.data)} />,
+    [siteId],
+  );
+
+  return (
+    <DataVisNitroSource type="http" url={url}>
+      <DataVisNitroGrid
+        columns={columns}
+        formatCell={formatCell}
+        renderDetailRow={renderDetailRow}
+        features={{
+          stickyHeaders: true,
+          columnResize: true,
+          columnReorder: true,
+          zebraStripe: true,
+          rowMode: 'clipped',
+        }}
+        height="70vh"
+      />
+    </DataVisNitroSource>
+  );
+}
diff --git a/create-a-container/client/src/components/nodes/NvidiaBadge.tsx b/create-a-container/client/src/components/nodes/NvidiaBadge.tsx
new file mode 100644
index 00000000..26d627f8
--- /dev/null
+++ b/create-a-container/client/src/components/nodes/NvidiaBadge.tsx
@@ -0,0 +1,11 @@
+import { Badge } from '@mieweb/ui';
+import type { Node } from '@/lib/types';
+
+/** Whether the node advertises an NVIDIA GPU for container passthrough. */
+export function NvidiaBadge({ n }: { n: Node }) {
+  return n.nvidiaAvailable ? (
+    <Badge variant="success">Available</Badge>
+  ) : (
+    <Badge variant="secondary">No</Badge>
+  );
+}
diff --git a/create-a-container/client/src/components/nodes/ResourceBar.tsx b/create-a-container/client/src/components/nodes/ResourceBar.tsx
new file mode 100644
index 00000000..fa081612
--- /dev/null
+++ b/create-a-container/client/src/components/nodes/ResourceBar.tsx
@@ -0,0 +1,53 @@
+import { Progress } from '@mieweb/ui';
+
+const KiB = 1024;
+const MiB = KiB * 1024;
+const GiB = MiB * 1024;
+const TiB = GiB * 1024;
+
+/** Human-readable byte size using binary units labelled with familiar suffixes. */
+function formatBytes(bytes: number): string {
+  if (bytes >= TiB) return `${(bytes / TiB).toFixed(1)} TB`;
+  if (bytes >= GiB) return `${(bytes / GiB).toFixed(1)} GB`;
+  if (bytes >= MiB) return `${Math.round(bytes / MiB)} MB`;
+  if (bytes >= KiB) return `${Math.round(bytes / KiB)} KB`;
+  return `${bytes} B`;
+}
+
+function variantFor(pct: number): 'success' | 'warning' | 'danger' {
+  if (pct >= 90) return 'danger';
+  if (pct >= 75) return 'warning';
+  return 'success';
+}
+
+export interface ResourceBarProps {
+  label: string;
+  /** Amount in use (bytes for `bytes`, percent 0..100 for `percent`). */
+  used: number;
+  /** Capacity (bytes for `bytes`, 100 for `percent`). */
+  total: number;
+  format?: 'bytes' | 'percent';
+}
+
+/**
+ * Labelled utilization bar (used / total) that colours by fill level: green
+ * under 75%, amber under 90%, red at or above 90%.
+ */
+export function ResourceBar({ label, used, total, format = 'bytes' }: ResourceBarProps) {
+  const pct = total > 0 ? Math.min(100, (used / total) * 100) : 0;
+  const formatValue = (value: number, max: number) =>
+    format === 'percent'
+      ? `${Math.round(max > 0 ? (value / max) * 100 : 0)}%`
+      : `${formatBytes(value)} / ${formatBytes(max)}`;
+
+  return (
+    <Progress
+      value={used}
+      max={total > 0 ? total : 1}
+      label={label}
+      showValue
+      formatValue={formatValue}
+      variant={variantFor(pct)}
+    />
+  );
+}
diff --git a/create-a-container/client/src/lib/queries.ts b/create-a-container/client/src/lib/queries.ts
index 29b75e56..54ec9821 100644
--- a/create-a-container/client/src/lib/queries.ts
+++ b/create-a-container/client/src/lib/queries.ts
@@ -15,6 +15,7 @@ import type {
   Job,
   JobStatusRow,
   Node,
+  NodeStats,
   AppSettings,
   ResourceRequest,
   Site,
@@ -27,6 +28,8 @@ export const keys = {
   nodes: (siteId: number | string) => ['sites', String(siteId), 'nodes'] as const,
   node: (siteId: number | string, id: number | string) =>
     ['sites', String(siteId), 'nodes', String(id)] as const,
+  nodeStats: (siteId: number | string, id: number | string) =>
+    ['sites', String(siteId), 'nodes', String(id), 'stats'] as const,
   containers: (siteId: number | string, params?: Record<string, string | string[] | undefined>) =>
     ['sites', String(siteId), 'containers', params ?? {}] as const,
   container: (siteId: number | string, id: number | string) =>
@@ -61,6 +64,8 @@ export const queries = {
     api.get<Node[]>(`/api/v1/sites/${siteId}/nodes`),
   getNode: (siteId: number | string, id: number | string) =>
     api.get<Node>(`/api/v1/sites/${siteId}/nodes/${id}`),
+  getNodeStats: (siteId: number | string, id: number | string) =>
+    api.get<NodeStats>(`/api/v1/sites/${siteId}/nodes/${id}/stats`),
 
   // Agents
   listAgents: () => api.get<Agent[]>('/api/v1/agents'),
diff --git a/create-a-container/client/src/lib/types.ts b/create-a-container/client/src/lib/types.ts
index fbb7d30d..d24f3b0b 100644
--- a/create-a-container/client/src/lib/types.ts
+++ b/create-a-container/client/src/lib/types.ts
@@ -31,6 +31,41 @@ export interface Node {
   hasSecret: boolean;
 }
 
+/** Used/total byte pair for a node hardware resource. */
+export interface NodeResourceUsage {
+  used: number;
+  total: number;
+}
+
+/** Per-datastore usage reported by the hypervisor. */
+export interface NodeStorageUsage {
+  name: string;
+  type: string | null;
+  content: string | null;
+  used: number;
+  total: number;
+  avail: number;
+}
+
+/**
+ * Live hardware utilization for a node. `available` is false when the node has
+ * no API credentials or the hypervisor could not be reached; the remaining
+ * fields keep their shape so the UI can render an "unavailable" state.
+ */
+export interface NodeStats {
+  available: boolean;
+  status: string | null;
+  /** CPU load as a 0..1 fraction of total capacity. */
+  cpu: number | null;
+  cpuCount: number | null;
+  memory: NodeResourceUsage | null;
+  swap: NodeResourceUsage | null;
+  rootfs: NodeResourceUsage | null;
+  /** Uptime in seconds. */
+  uptime: number | null;
+  storages: NodeStorageUsage[];
+}
+
 export interface AgentServiceStatus {
   /** systemd ActiveState: active, inactive, failed, ... */
   state: string;
diff --git a/create-a-container/client/src/pages/containers/ContainersListPage.tsx b/create-a-container/client/src/pages/containers/ContainersListPage.tsx
index 233eddc5..7f43bb9e 100644
--- a/create-a-container/client/src/pages/containers/ContainersListPage.tsx
+++ b/create-a-container/client/src/pages/containers/ContainersListPage.tsx
@@ -5,9 +5,6 @@ import {
   Alert,
   AlertDescription,
   AlertTitle,
-  Button,
-  Card,
-  CardTitle,
   Modal,
   ModalBody,
   ModalClose,
@@ -15,40 +12,20 @@ import {
   ModalTitle,
   PageHeader,
   Spinner,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
   useToast,
 } from '@mieweb/ui';
-import {
-  Container as ContainerIcon,
-  LayoutGrid,
-  Plus,
-  Rows3,
-  Server,
-  User,
-} from 'lucide-react';
+import { Container as ContainerIcon, Plus, Server } from 'lucide-react';
 import { api, ApiError } from '@/lib/api';
 import { useSession } from '@/lib/auth';
 import { keys, queries } from '@/lib/queries';
 import { ButtonLink } from '@/components/ButtonLink';
-import { HttpLinks } from '@/components/containers/HttpLinks';
-import { Meta } from '@/components/containers/Meta';
-import { NodeLink } from '@/components/containers/NodeLink';
-import { RowActions } from '@/components/containers/RowActions';
-import { STATUS_LABELS, StatusBadge } from '@/components/containers/StatusBadge';
-import { SshLinks } from '@/components/containers/SshLinks';
+import { STATUS_LABELS } from '@/components/containers/StatusBadge';
 import { templateTitle } from '@/components/containers/shared';
 import { CollaboratorsManager } from '@/components/containers/CollaboratorsManager';
+import { ContainersDataGrid } from '@/components/containers/ContainersDataGrid';
 import { ContainerFilters, type FilterOption } from '@/components/containers/ContainerFilters';
 import type { Container, ContainerStatus } from '@/lib/types';
 
-type ViewMode = 'cards' | 'table';
-const VIEW_STORAGE_KEY = 'containers:view';
-
 export function ContainersListPage() {
   const { siteId } = useParams<{ siteId: string }>();
   const qc = useQueryClient();
@@ -69,9 +46,9 @@ export function ContainersListPage() {
   const selectedStatuses = parseList(searchParams.get('status'));
   const selectedTemplates = parseList(searchParams.get('template'));
   const hostnameQuery = searchParams.get('q') ?? '';
-  // A row may belong to another owner unless the filter is narrowed to just
-  // the caller, so the owner column only disappears then.
-  const showOwner = selectedUsers.length === 0 || selectedUsers.some((u) => u !== sessionUser);
+  // The default (and a self-only filter) shows only the caller's containers, so
+  // the owner column only appears once another user is included in the filter.
+  const showOwner = selectedUsers.some((u) => u !== sessionUser);
   const dnsWarnings = (location.state as { dnsWarnings?: string[] } | null)?.dnsWarnings;
 
   const setListParam = (key: string, values: string[]) =>
@@ -94,8 +71,8 @@ export function ContainersListPage() {
       },
       { replace: true },
     );
-  // The unfiltered default already shows everything the caller may see;
-  // select-all in the dropdown is just an explicit form of the same thing.
+  // Clearing all filters returns to the default view: the caller's own
+  // containers.
   const clearAllFilters = () =>
     setSearchParams(
       (prev) => {
@@ -106,28 +83,16 @@ export function ContainersListPage() {
       { replace: true },
     );
 
-  const [view, setView] = useState<ViewMode>(() => {
-    const stored = typeof window !== 'undefined' ? window.localStorage.getItem(VIEW_STORAGE_KEY) : null;
-    return stored === 'table' ? 'table' : 'cards';
-  });
   // Container whose sharing dialog is open. Tracked by id so the dialog reflects
   // live collaborator changes after the list query refetches.
   const [shareTargetId, setShareTargetId] = useState<number | null>(null);
-  const changeView = (next: ViewMode) => {
-    setView(next);
-    try {
-      window.localStorage.setItem(VIEW_STORAGE_KEY, next);
-    } catch {
-      /* ignore storage failures */
-    }
-  };
 
   const { data: site } = useQuery({
     queryKey: keys.site(siteId!),
     queryFn: () => queries.getSite(siteId!),
     enabled: !!siteId,
   });
-  // Empty selection returns everything the caller may see server-side.
+  // Empty selection defaults to the caller's own containers server-side.
   const userParam = selectedUsers.length > 0 ? selectedUsers : undefined;
   const { data, isLoading, error } = useQuery({
     queryKey: keys.containers(siteId!, { user: userParam, nodeId }),
@@ -137,17 +102,16 @@ export function ContainersListPage() {
 
   // Options for the "User" filter. Admins may filter by any user; non-admins
   // may only narrow to owners who have shared a container with them, so their
-  // option list is derived from the unfiltered list (own + shared). With no
-  // owner filter selected this is the same query as the list above, so React
-  // Query dedupes it into a single fetch.
+  // option list is derived from a `*` (own + shared) query — distinct from the
+  // own-only default list, so both run.
   const { data: allUsers } = useQuery({
     queryKey: keys.users(),
     queryFn: queries.listUsers,
     enabled: !!siteId && isAdmin,
   });
   const { data: visibleContainers } = useQuery({
-    queryKey: keys.containers(siteId!, {}),
-    queryFn: () => queries.listContainers(siteId!),
+    queryKey: keys.containers(siteId!, { user: ['*'] }),
+    queryFn: () => queries.listContainers(siteId!, { user: ['*'] }),
     enabled: !!siteId && !isAdmin,
   });
 
@@ -227,34 +191,6 @@ export function ContainersListPage() {
         icon={<ContainerIcon className="size-6" />}
         actions={
           <div className="flex flex-wrap items-center gap-2">
-            {serverHasContainers && (
-              <div
-                role="group"
-                aria-label="Container view"
-                className="inline-flex rounded-md border border-border p-0.5"
-              >
-                <Button
-                  variant={view === 'cards' ? 'secondary' : 'ghost'}
-                  size="sm"
-                  aria-pressed={view === 'cards'}
-                  aria-label="Card view"
-                  leftIcon={<LayoutGrid className="size-4" />}
-                  onClick={() => changeView('cards')}
-                >
-                  <span className="hidden sm:inline">Cards</span>
-                </Button>
-                <Button
-                  variant={view === 'table' ? 'secondary' : 'ghost'}
-                  size="sm"
-                  aria-pressed={view === 'table'}
-                  aria-label="Table view"
-                  leftIcon={<Rows3 className="size-4" />}
-                  onClick={() => changeView('table')}
-                >
-                  <span className="hidden sm:inline">Table</span>
-                </Button>
-              </div>
-            )}
             <ButtonLink as={Link} to={`/sites/${siteId}/nodes`} variant="ghost" aria-label="Nodes" leftIcon={<Server className="size-4" />}>
               <span className="hidden sm:inline">Nodes</span>
             </ButtonLink>
@@ -319,116 +255,17 @@ export function ContainersListPage() {
         </Alert>
       )}
 
-      {hasContainers && view === 'cards' && (
-        <div className="grid gap-2">
-          {visible.map((c: Container) => (
-            <Card
-              key={c.id}
-              as="article"
-              padding="none"
-              orientation="horizontal"
-              className="flex w-full flex-row flex-wrap items-center gap-x-4 gap-y-1.5 px-4 py-2.5"
-            >
-              <div className="flex min-w-0 items-center gap-2 lg:order-1">
-                <CardTitle as="h2" className="truncate text-sm font-semibold">
-                  {c.hostname}
-                </CardTitle>
-                <StatusBadge status={c.status} />
-              </div>
-              <div className="ml-auto flex shrink-0 items-center gap-1 lg:order-3 lg:ml-0">
-                <RowActions
-                  c={c}
-                  siteId={siteId}
-                  onDelete={del.mutate}
-                  deleting={del.isPending}
-                  canShare={canShareContainer(c)}
-                  onShare={(target) => setShareTargetId(target.id)}
-                />
-              </div>
-              <div className="flex w-full min-w-0 flex-wrap items-center gap-x-4 gap-y-1 lg:order-2 lg:w-auto lg:flex-1">
-                <Meta label="Node">
-                  <NodeLink c={c} />
-                </Meta>
-                {showOwner && (
-                  <Meta label="User">
-                    <span className="inline-flex items-center gap-1">
-                      <User className="size-3.5" aria-hidden="true" />
-                      {c.owner}
-                    </span>
-                  </Meta>
-                )}
-                <Meta label="Template">
-                  <span className="font-mono" title={c.template || undefined}>
-                    {templateTitle(c.template)}
-                  </span>
-                </Meta>
-                <Meta label="HTTP">
-                  <HttpLinks c={c} />
-                </Meta>
-                <Meta label="SSH">
-                  <SshLinks c={c} sessionUser={sessionUser} />
-                </Meta>
-              </div>
-            </Card>
-          ))}
-        </div>
-      )}
-
-      {hasContainers && view === 'table' && (
-        <Table responsive>
-          <TableHeader>
-            <TableRow>
-              <TableHead>Hostname</TableHead>
-              <TableHead>Status</TableHead>
-              <TableHead>Node</TableHead>
-              {showOwner && <TableHead>User</TableHead>}
-              <TableHead>Template</TableHead>
-              <TableHead>HTTP</TableHead>
-              <TableHead>SSH</TableHead>
-              <TableHead className="text-right">Actions</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {visible.map((c: Container) => (
-              <TableRow key={c.id}>
-                <TableCell className="font-medium">{c.hostname}</TableCell>
-                <TableCell>
-                  <StatusBadge status={c.status} />
-                </TableCell>
-                <TableCell>
-                  <NodeLink c={c} />
-                </TableCell>
-                {showOwner && (
-                  <TableCell>
-                    <span className="inline-flex items-center gap-1">
-                      <User className="size-3.5" aria-hidden="true" />
-                      {c.owner}
-                    </span>
-                  </TableCell>
-                )}
-                <TableCell className="font-mono text-xs" title={c.template || undefined}>
-                  {templateTitle(c.template)}
-                </TableCell>
-                <TableCell>
-                  <HttpLinks c={c} limit={2} />
-                </TableCell>
-                <TableCell>
-                  <SshLinks c={c} sessionUser={sessionUser} />
-                </TableCell>
-                <TableCell className="flex flex-wrap justify-end gap-2">
-                  <RowActions
-                    c={c}
-                    siteId={siteId}
-                    onDelete={del.mutate}
-                    deleting={del.isPending}
-                    canShare={canShareContainer(c)}
-                    onShare={(target) => setShareTargetId(target.id)}
-                  />
-                </TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
+      {hasContainers && (
+        <ContainersDataGrid
+          containers={visible}
+          showOwner={showOwner}
+          sessionUser={sessionUser}
+          siteId={siteId}
+          onDelete={del.mutate}
+          deleting={del.isPending}
+          canShare={canShareContainer}
+          onShare={(target) => setShareTargetId(target.id)}
+        />
       )}
 
       <Modal
diff --git a/create-a-container/client/src/pages/nodes/NodesListPage.tsx b/create-a-container/client/src/pages/nodes/NodesListPage.tsx
index 06d32fa7..91e88aeb 100644
--- a/create-a-container/client/src/pages/nodes/NodesListPage.tsx
+++ b/create-a-container/client/src/pages/nodes/NodesListPage.tsx
@@ -1,101 +1,11 @@
-import { useState } from 'react';
 import { Link, useParams } from 'react-router';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import {
-  Alert,
-  AlertDescription,
-  Badge,
-  Button,
-  Card,
-  CardTitle,
-  PageHeader,
-  Spinner,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-  useToast,
-} from '@mieweb/ui';
-import { Download, LayoutGrid, Pencil, Plus, Rows3, Server, Trash2 } from 'lucide-react';
+import { Alert, AlertDescription, PageHeader, Spinner, useToast } from '@mieweb/ui';
+import { Download, Plus, Server } from 'lucide-react';
 import { ButtonLink } from '@/components/ButtonLink';
+import { NodesDataGrid } from '@/components/nodes/NodesDataGrid';
 import { api, ApiError } from '@/lib/api';
 import { keys, queries } from '@/lib/queries';
-import type { Node } from '@/lib/types';
-
-type ViewMode = 'cards' | 'table';
-const VIEW_STORAGE_KEY = 'nodes:view';
-
-function Meta({ label, children }: { label: string; children: React.ReactNode }) {
-  return (
-    <span className="inline-flex items-baseline gap-1.5">
-      <span className="text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
-        {label}
-      </span>
-      <span className="text-xs">{children}</span>
-    </span>
-  );
-}
-
-function NvidiaBadge({ n }: { n: Node }) {
-  return n.nvidiaAvailable ? (
-    <Badge variant="success">Available</Badge>
-  ) : (
-    <Badge variant="secondary">No</Badge>
-  );
-}
-
-function CredentialsBadge({ n }: { n: Node }) {
-  if (n.nodeType === 'dummy') {
-    return <Badge variant="secondary">Not required</Badge>;
-  }
-
-  if (n.nodeType === 'docker') {
-    return n.apiUrl ? <Badge variant="success">Host set</Badge> : <Badge variant="warning">Missing</Badge>;
-  }
-
-  return n.hasSecret ? <Badge variant="success">Set</Badge> : <Badge variant="warning">Missing</Badge>;
-}
-
-function RowActions({
-  n,
-  siteId,
-  onDelete,
-  deleting,
-}: {
-  n: Node;
-  siteId?: string;
-  onDelete: (id: number) => void;
-  deleting: boolean;
-}) {
-  return (
-    <>
-      <ButtonLink
-        as={Link}
-        to={`/sites/${siteId}/nodes/${n.id}/edit`}
-        variant="ghost"
-        size="sm"
-        aria-label="Edit"
-        leftIcon={<Pencil className="size-4" />}
-      >
-        <span className="hidden sm:inline">Edit</span>
-      </ButtonLink>
-      <Button
-        variant="ghost"
-        size="sm"
-        aria-label="Delete"
-        leftIcon={<Trash2 className="size-4" />}
-        onClick={() => {
-          if (confirm(`Delete node "${n.name}"?`)) onDelete(n.id);
-        }}
-        disabled={deleting}
-      >
-        <span className="hidden sm:inline">Delete</span>
-      </Button>
-    </>
-  );
-}
 
 export function NodesListPage() {
   const { siteId } = useParams<{ siteId: string }>();
@@ -108,19 +18,6 @@ export function NodesListPage() {
     enabled: !!siteId,
   });
 
-  const [view, setView] = useState<ViewMode>(() => {
-    const stored = typeof window !== 'undefined' ? window.localStorage.getItem(VIEW_STORAGE_KEY) : null;
-    return stored === 'table' ? 'table' : 'cards';
-  });
-  const changeView = (next: ViewMode) => {
-    setView(next);
-    try {
-      window.localStorage.setItem(VIEW_STORAGE_KEY, next);
-    } catch {
-      /* ignore storage failures */
-    }
-  };
-
   const del = useMutation({
     mutationFn: (id: number) => api.delete(`/api/v1/sites/${siteId}/nodes/${id}`),
     onSuccess: () => {
@@ -140,34 +37,6 @@ export function NodesListPage() {
         icon={<Server className="size-6" />}
         actions={
           <div className="flex flex-wrap items-center gap-2">
-            {hasNodes && (
-              <div
-                role="group"
-                aria-label="Node view"
-                className="inline-flex rounded-md border border-border p-0.5"
-              >
-                <Button
-                  variant={view === 'cards' ? 'secondary' : 'ghost'}
-                  size="sm"
-                  aria-pressed={view === 'cards'}
-                  aria-label="Card view"
-                  leftIcon={<LayoutGrid className="size-4" />}
-                  onClick={() => changeView('cards')}
-                >
-                  <span className="hidden sm:inline">Cards</span>
-                </Button>
-                <Button
-                  variant={view === 'table' ? 'secondary' : 'ghost'}
-                  size="sm"
-                  aria-pressed={view === 'table'}
-                  aria-label="Table view"
-                  leftIcon={<Rows3 className="size-4" />}
-                  onClick={() => changeView('table')}
-                >
-                  <span className="hidden sm:inline">Table</span>
-                </Button>
-              </div>
-            )}
             <ButtonLink
               as={Link}
               to={`/sites/${siteId}/nodes/import`}
@@ -197,74 +66,8 @@ export function NodesListPage() {
         </Alert>
       )}
 
-      {hasNodes && view === 'cards' && (
-        <div className="grid gap-2">
-          {data.map((n: Node) => (
-            <Card
-              key={n.id}
-              as="article"
-              padding="none"
-              orientation="horizontal"
-              className="flex w-full flex-row flex-wrap items-center gap-x-4 gap-y-1.5 px-4 py-2.5"
-            >
-              <div className="flex min-w-0 items-center gap-2 lg:order-1">
-                <CardTitle as="h2" className="truncate text-sm font-semibold">
-                  {n.name}
-                </CardTitle>
-                <NvidiaBadge n={n} />
-              </div>
-              <div className="ml-auto flex shrink-0 items-center gap-1 lg:order-3 lg:ml-0">
-                <RowActions n={n} siteId={siteId} onDelete={del.mutate} deleting={del.isPending} />
-              </div>
-              <div className="flex w-full min-w-0 flex-wrap items-center gap-x-4 gap-y-1 lg:order-2 lg:w-auto lg:flex-1">
-                <Meta label="IPv4">
-                  <span className="font-mono">{n.ipv4Address || '—'}</span>
-                </Meta>
-                <Meta label="API">
-                  <span className="break-all font-mono" title={n.apiUrl || undefined}>
-                    {n.apiUrl || '—'}
-                  </span>
-                </Meta>
-                <Meta label="Creds">
-                  <CredentialsBadge n={n} />
-                </Meta>
-              </div>
-            </Card>
-          ))}
-        </div>
-      )}
-
-      {hasNodes && view === 'table' && (
-        <Table responsive>
-          <TableHeader>
-            <TableRow>
-              <TableHead>Name</TableHead>
-              <TableHead>IPv4</TableHead>
-              <TableHead>API URL</TableHead>
-              <TableHead>NVIDIA</TableHead>
-              <TableHead>Credentials</TableHead>
-              <TableHead className="text-right">Actions</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {data.map((n: Node) => (
-              <TableRow key={n.id}>
-                <TableCell className="font-medium">{n.name}</TableCell>
-                <TableCell className="font-mono text-sm">{n.ipv4Address || '—'}</TableCell>
-                <TableCell className="max-w-xs truncate">{n.apiUrl || '—'}</TableCell>
-                <TableCell>
-                  <NvidiaBadge n={n} />
-                </TableCell>
-                <TableCell>
-                  <CredentialsBadge n={n} />
-                </TableCell>
-                <TableCell className="flex flex-wrap justify-end gap-2">
-                  <RowActions n={n} siteId={siteId} onDelete={del.mutate} deleting={del.isPending} />
-                </TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
+      {hasNodes && (
+        <NodesDataGrid nodes={data} siteId={siteId} onDelete={del.mutate} deleting={del.isPending} />
       )}
     </div>
   );
diff --git a/create-a-container/openapi.v1.yaml b/create-a-container/openapi.v1.yaml
index 87239337..8e9d63b8 100644
--- a/create-a-container/openapi.v1.yaml
+++ b/create-a-container/openapi.v1.yaml
@@ -1033,6 +1033,7 @@ paths:
       parameters:
         - { in: path, name: siteId, required: true, schema: { type: integer } }
         - { in: path, name: id, required: true, schema: { type: integer } }
+<<<<<<< Updated upstream
       responses:
         '200':
           description: Array of Proxmox CT template storages
@@ -1040,6 +1041,21 @@ paths:
             application/json:
               schema: { type: object, properties: { data: { type: array, items: { type: object, properties: { name: { type: string }, total: { type: integer }, available: { type: integer } } } } } }
         '404': { description: 'Site not found (code: site_not_found)', content: { application/json: { schema: { $ref: '#/components/schemas/Error' } } } }
+=======
+      responses: { '200': { description: Array of Proxmox CT template storages } }
+  /sites/{siteId}/nodes/{id}/stats:
+    get:
+      tags: [Nodes]
+      parameters:
+        - { in: path, name: siteId, required: true, schema: { type: integer } }
+        - { in: path, name: id, required: true, schema: { type: integer } }
+      responses:
+        '200':
+          description: >-
+            Live hardware utilization (CPU/memory/swap/rootfs, uptime) plus
+            per-datastore usage. `available` is false when the node has no API
+            credentials or the hypervisor is unreachable.
+>>>>>>> Stashed changes
 
   /jobs/{id}:
     parameters: [{ in: path, name: id, required: true, schema: { type: integer } }]
diff --git a/create-a-container/routers/api/v1/containers.js b/create-a-container/routers/api/v1/containers.js
index 95f683a2..37451fc6 100644
--- a/create-a-container/routers/api/v1/containers.js
+++ b/create-a-container/routers/api/v1/containers.js
@@ -201,12 +201,13 @@ const CONTAINER_INCLUDE = [
  * `query.user` must be an array (callers capture `req.query` once and default
  * it with `query.user ??= []` — Express 5 re-parses req.query on each access;
  * clients send bracket notation, e.g. `user[0]=alice`, which the 'extended'
- * query parser coerces to an array). Empty -> everything the caller
- * may see: every container on the site for admins, their own plus any shared
- * with them for non-admins. A list of names -> those owners for admins; for
- * non-admins the same list intersected with what they may already see (own
- * plus shared), so a non-admin can only narrow down to owners who have shared
- * a container with them and never widen their visibility.
+ * query parser coerces to an array). Empty -> the caller's own containers (the
+ * default view). `*` -> everything the caller may see: every container on the
+ * site for admins, their own plus any shared with them for non-admins. A list
+ * of names -> those owners for admins; for non-admins the same list
+ * intersected with what they may see (own plus shared), so a non-admin can
+ * surface a sharer's containers by filtering on that username but can never
+ * widen their visibility.
  *
  * @param {object} query - req.query
  * @param {number[]} nodeIds - IDs of the nodes belonging to the site
@@ -224,19 +225,34 @@ function buildContainerListWhere(query, nodeIds, session) {
   }
 
   const names = query.user;
+  // An explicit `*` means "everything I'm allowed to see": all owners for
+  // admins, own + shared for non-admins. Absent/empty defaults to just the
+  // caller's own containers — shared containers surface when you filter by the
+  // sharer's username (see the share dialog copy).
+  const wantsAll = names.includes('*');
+
   if (session.isAdmin) {
-    // Admins may see every owner on the site; a name list simply narrows it.
-    if (names.length > 0) where.username = names;
+    if (wantsAll) return where; // every owner on the site
+    if (names.length === 0) {
+      where.username = session.user; // default: own only
+      return where;
+    }
+    where.username = names; // specific owners
     return where;
   }
-  // Non-admins may only see their own containers plus any shared with them.
+  // Non-admins may never see beyond their own containers plus shared ones.
   const visible = visibleToClauses(session.user);
+  if (wantsAll) {
+    where[Sequelize.Op.or] = visible; // own + shared
+    return where;
+  }
   if (names.length === 0) {
-    where[Sequelize.Op.or] = visible;
-  } else {
-    // Intersect the requested owners with what the caller may already see.
-    where[Sequelize.Op.and] = [{ [Sequelize.Op.or]: visible }, { username: names }];
+    where.username = session.user; // default: own only
+    return where;
   }
+  // Intersect the requested owners with what the caller may see, so filtering
+  // by a sharer's username surfaces the containers they shared.
+  where[Sequelize.Op.and] = [{ [Sequelize.Op.or]: visible }, { username: names }];
   return where;
 }
 
@@ -359,12 +375,13 @@ router.get(
     const site = await loadSite(req.params.siteId);
     const nodes = await Node.findAll({ where: { siteId: site.id }, attributes: ['id'] });
     const nodeIds = nodes.map((n) => n.id);
-    // `user` filter backs the list page's User filter: omitted, it returns
-    // everything the caller may see (all owners for admins; own + shared for
-    // non-admins); `user[0]=<name>` narrows to specific owners. See
-    // buildContainerListWhere. Express 5's req.query is a getter that re-parses
-    // on every access, so capture it once — defaulting `req.query.user` directly
-    // would mutate a throwaway object.
+    // `user` filter backs the list page's User filter: omitted, it returns the
+    // caller's own containers (the default); `user[0]=*` returns everything the
+    // caller may see (all owners for admins; own + shared for non-admins);
+    // `user[0]=<name>` selects specific owners. See buildContainerListWhere.
+    // Express 5's req.query is a getter that re-parses on every access, so
+    // capture it once — defaulting `req.query.user` directly would mutate a
+    // throwaway object.
     const query = req.query;
     query.user ??= [];
     const where = buildContainerListWhere(query, nodeIds, req.session);
diff --git a/create-a-container/routers/api/v1/nodes.js b/create-a-container/routers/api/v1/nodes.js
index 888e8ef0..b50ad716 100644
--- a/create-a-container/routers/api/v1/nodes.js
+++ b/create-a-container/routers/api/v1/nodes.js
@@ -99,6 +99,76 @@ router.get(
   }),
 );
 
+// GET /nodes/:id/stats — live hardware utilization (CPU/memory/swap/rootfs) plus
+// per-datastore usage, used by the expandable resource dashboard in the UI.
+router.get(
+  '/:id/stats',
+  asyncHandler(async (req, res) => {
+    const site = await loadSite(req);
+    const node = await Node.findOne({
+      where: { id: parseInt(req.params.id, 10), siteId: site.id },
+    });
+    if (!node) throw new ApiError(404, 'not_found', 'Node not found');
+
+    // Shape stays stable whether or not live data is reachable, so the client
+    // can render "unavailable" without special-casing missing fields.
+    const empty = {
+      available: false,
+      status: null,
+      cpu: null,
+      cpuCount: null,
+      memory: null,
+      swap: null,
+      rootfs: null,
+      uptime: null,
+      storages: [],
+    };
+    if (!node.hasApiAccess()) return ok(res, empty);
+
+    const num = (v) => (Number.isFinite(Number(v)) ? Number(v) : 0);
+    const usage = (o) => (o ? { used: num(o.used), total: num(o.total) } : null);
+
+    try {
+      const client = await node.api();
+      if (typeof client.nodeStatus !== 'function') return ok(res, empty);
+      const status = await client.nodeStatus(node.name);
+
+      let storages = [];
+      try {
+        const list = await client.datastores(node.name, null, true);
+        storages = (list || [])
+          .filter((s) => num(s.total) > 0)
+          .map((s) => ({
+            name: s.storage,
+            type: s.type || null,
+            content: s.content || null,
+            used: num(s.used),
+            total: num(s.total),
+            avail: num(s.avail),
+          }));
+      } catch (err) {
+        console.error(`Error fetching storages for node ${node.name}:`, err.message);
+      }
+
+      return ok(res, {
+        available: true,
+        // /status has no run-state field; reaching it means the node is up.
+        status: 'online',
+        cpu: typeof status.cpu === 'number' ? status.cpu : null,
+        cpuCount: status.cpuinfo?.cpus ?? null,
+        memory: usage(status.memory),
+        swap: usage(status.swap),
+        rootfs: usage(status.rootfs),
+        uptime: status.uptime ?? null,
+        storages,
+      });
+    } catch (err) {
+      console.error(`Error fetching stats for node ${node.name}:`, err.message);
+      return ok(res, empty);
+    }
+  }),
+);
+
 router.post(
   '/',
   apiAdmin,
diff --git a/create-a-container/utils/dummy-api.js b/create-a-container/utils/dummy-api.js
index 8b065ab5..0dc0de0c 100644
--- a/create-a-container/utils/dummy-api.js
+++ b/create-a-container/utils/dummy-api.js
@@ -88,6 +88,31 @@ class DummyApi {
     return vmid;
   }
 
+  // --- Node status -----------------------------------------------------------
+
+  /**
+   * Simulated live node status so the resource dashboards render locally
+   * without a hypervisor. Values jitter slightly per call to look "live".
+   */
+  async nodeStatus() {
+    const GiB = 1024 * 1024 * 1024;
+    const memTotal = 32 * GiB;
+    const memUsed = Math.round(memTotal * (0.35 + Math.random() * 0.2));
+    const swapTotal = 8 * GiB;
+    const swapUsed = Math.round(swapTotal * (0.05 + Math.random() * 0.1));
+    const diskTotal = 500 * GiB;
+    const diskUsed = Math.round(diskTotal * (0.4 + Math.random() * 0.15));
+    return {
+      cpu: 0.1 + Math.random() * 0.3,
+      cpuinfo: { cpus: 8 },
+      memory: { total: memTotal, used: memUsed, free: memTotal - memUsed },
+      swap: { total: swapTotal, used: swapUsed, free: swapTotal - swapUsed },
+      rootfs: { total: diskTotal, used: diskUsed, avail: diskTotal - diskUsed, free: diskTotal - diskUsed },
+      uptime: 3600 * 72,
+      loadavg: ['0.20', '0.15', '0.10'],
+    };
+  }
+
   // --- Storage ---------------------------------------------------------------
 
   /**
diff --git a/create-a-container/utils/proxmox-api.js b/create-a-container/utils/proxmox-api.js
index 8a287a13..e24fd86f 100644
--- a/create-a-container/utils/proxmox-api.js
+++ b/create-a-container/utils/proxmox-api.js
@@ -127,6 +127,16 @@ class ProxmoxApi {
     return response.data.data;
   }
 
+  /**
+   * Get live status for a node (CPU load, memory, swap, rootfs, uptime).
+   * @param {string} node - The node name
+   * @returns {Promise<object>} - The API response data (cpu, cpuinfo, memory, swap, rootfs, uptime, ...)
+   */
+  async nodeStatus(node) {
+    const response = await axios.get(`${this.baseUrl}/api2/json/nodes/${node}/status`, this.options);
+    return response.data.data;
+  }
+
   /**
    * Get cluster resources
    * @param {'node'|'storage'|'pool'|'qemu'|'lxc'|'openvz'|'sdn'|'network'|'vm'} type 

From d8e5b148e86ddb82a18541a1301b3acd756a8833 Mon Sep 17 00:00:00 2001
From: cmyers-mieweb <cmyers@mieweb.com>
Date: Wed, 5 Aug 2026 08:34:43 -0700
Subject: [PATCH 2/5] Potential fix for pull request finding 'CodeQL / Type
 confusion through parameter tampering'

Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>
---
 create-a-container/routers/api/v1/containers.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/create-a-container/routers/api/v1/containers.js b/create-a-container/routers/api/v1/containers.js
index 37451fc6..8d1d676b 100644
--- a/create-a-container/routers/api/v1/containers.js
+++ b/create-a-container/routers/api/v1/containers.js
@@ -224,7 +224,9 @@ function buildContainerListWhere(query, nodeIds, session) {
     where.nodeId = Number.isInteger(nodeId) && nodeIds.includes(nodeId) ? nodeId : -1;
   }
 
-  const names = query.user;
+  const names = Array.isArray(query.user)
+    ? query.user
+    : (typeof query.user === 'string' ? [query.user] : []);
   // An explicit `*` means "everything I'm allowed to see": all owners for
   // admins, own + shared for non-admins. Absent/empty defaults to just the
   // caller's own containers — shared containers surface when you filter by the

From 30b1656c180920c76825d3462020552269d3d580 Mon Sep 17 00:00:00 2001
From: cmyers-mieweb <cmyers@mieweb.com>
Date: Wed, 5 Aug 2026 08:35:06 -0700
Subject: [PATCH 3/5] Potential fix for pull request finding

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
---
 create-a-container/client/package-lock.json | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/create-a-container/client/package-lock.json b/create-a-container/client/package-lock.json
index 359ad13d..88dcc594 100644
--- a/create-a-container/client/package-lock.json
+++ b/create-a-container/client/package-lock.json
@@ -9,12 +9,8 @@
       "version": "0.0.0",
       "dependencies": {
         "@hookform/resolvers": "^3.9.1",
-<<<<<<< Updated upstream
-        "@mieweb/ui": "*",
-=======
         "@mieweb/datavis": "1.6.0",
         "@mieweb/ui": "^0.7.1",
->>>>>>> Stashed changes
         "@tanstack/react-query": "^5.62.0",
         "datavis-ace": "4.1.0",
         "lucide-react": "^0.460.0",

From 4374a697fbdd4c0ec0a4f4012695222f6ee6b69d Mon Sep 17 00:00:00 2001
From: cmyers-mieweb <cmyers@mieweb.com>
Date: Wed, 5 Aug 2026 10:22:17 -0700
Subject: [PATCH 4/5] Simplify container filtering UX

Replace the old container filter bar with built-in grid filters and a persisted default owner view. Move the container view preference into Settings, make the Settings link available to all users, but gate admin settings, and clean up the related OpenAPI merge.
---
 create-a-container/client/src/app/Header.tsx  |  14 +-
 create-a-container/client/src/app/Sidebar.tsx |   2 +-
 .../containers/ContainerFilters.tsx           | 110 ------------
 .../containers/ContainersDataGrid.tsx         |  32 +++-
 .../containers/DefaultOwnerFilter.tsx         |  30 ++++
 .../src/components/containers/MultiSelect.tsx |  69 --------
 .../settings/ContainerViewPreference.tsx      |  37 ++++
 .../client/src/lib/containerViewPreference.ts |  53 ++++++
 .../pages/containers/ContainersListPage.tsx   | 162 ++----------------
 .../src/pages/settings/SettingsPage.tsx       |  31 +++-
 create-a-container/openapi.v1.yaml            |  15 +-
 11 files changed, 198 insertions(+), 357 deletions(-)
 delete mode 100644 create-a-container/client/src/components/containers/ContainerFilters.tsx
 create mode 100644 create-a-container/client/src/components/containers/DefaultOwnerFilter.tsx
 delete mode 100644 create-a-container/client/src/components/containers/MultiSelect.tsx
 create mode 100644 create-a-container/client/src/components/settings/ContainerViewPreference.tsx
 create mode 100644 create-a-container/client/src/lib/containerViewPreference.ts

diff --git a/create-a-container/client/src/app/Header.tsx b/create-a-container/client/src/app/Header.tsx
index 2f5f81d8..52b70623 100644
--- a/create-a-container/client/src/app/Header.tsx
+++ b/create-a-container/client/src/app/Header.tsx
@@ -78,14 +78,12 @@ export function AppTopHeader() {
             />
             <DropdownSeparator />
             <DropdownContent>
-              {isAdmin && (
-                <DropdownItem
-                  icon={<Settings className="size-4" aria-hidden="true" />}
-                  onClick={() => navigate('/settings')}
-                >
-                  Settings
-                </DropdownItem>
-              )}
+              <DropdownItem
+                icon={<Settings className="size-4" aria-hidden="true" />}
+                onClick={() => navigate('/settings')}
+              >
+                Settings
+              </DropdownItem>
               <DropdownItem
                 icon={<LogOut className="size-4" aria-hidden="true" />}
                 variant="danger"
diff --git a/create-a-container/client/src/app/Sidebar.tsx b/create-a-container/client/src/app/Sidebar.tsx
index 33fe8dce..900b7601 100644
--- a/create-a-container/client/src/app/Sidebar.tsx
+++ b/create-a-container/client/src/app/Sidebar.tsx
@@ -60,7 +60,7 @@ const ADMIN: NavLink[] = [
   },
   { to: '/agents', label: 'Agents', icon: <Radio className="size-4" />, adminOnly: true },
   { to: '/apikeys', label: 'API Keys', icon: <KeyRound className="size-4" /> },
-  { to: '/settings', label: 'Settings', icon: <Settings className="size-4" />, adminOnly: true },
+  { to: '/settings', label: 'Settings', icon: <Settings className="size-4" /> },
 ];
 
 export function AppSidebar() {
diff --git a/create-a-container/client/src/components/containers/ContainerFilters.tsx b/create-a-container/client/src/components/containers/ContainerFilters.tsx
deleted file mode 100644
index 5decf606..00000000
--- a/create-a-container/client/src/components/containers/ContainerFilters.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-import { useState } from 'react';
-import { Button, Input } from '@mieweb/ui';
-import { Filter, User as UserIcon, X } from 'lucide-react';
-import { MultiSelect, type FilterOption } from './MultiSelect';
-
-// Re-exported for consumers that configure the filter bar (e.g. the list page).
-export type { FilterOption };
-
-export interface ContainerFiltersProps {
-  userOptions: FilterOption[];
-  selectedUsers: string[];
-  onUsersChange: (next: string[]) => void;
-  statusOptions: FilterOption[];
-  selectedStatuses: string[];
-  onStatusesChange: (next: string[]) => void;
-  templateOptions: FilterOption[];
-  selectedTemplates: string[];
-  onTemplatesChange: (next: string[]) => void;
-  hostname: string;
-  onHostnameChange: (next: string) => void;
-  onClearAll: () => void;
-}
-
-/**
- * Filter bar for the containers list. "User" is always visible and drives the
- * server query; the remaining filters (status, template, hostname) live behind
- * a "More filters" disclosure and filter the loaded rows client-side.
- */
-export function ContainerFilters({
-  userOptions,
-  selectedUsers,
-  onUsersChange,
-  statusOptions,
-  selectedStatuses,
-  onStatusesChange,
-  templateOptions,
-  selectedTemplates,
-  onTemplatesChange,
-  hostname,
-  onHostnameChange,
-  onClearAll,
-}: ContainerFiltersProps) {
-  const [showMore, setShowMore] = useState(false);
-  const extraCount =
-    selectedStatuses.length + selectedTemplates.length + (hostname ? 1 : 0);
-  const activeCount = selectedUsers.length + extraCount;
-
-  return (
-    <div className="flex flex-col gap-2 rounded-lg border border-border p-3">
-      <div className="flex flex-wrap items-center gap-2">
-        <MultiSelect
-          label="User"
-          emptyLabel="Mine"
-          icon={<UserIcon className="size-4" />}
-          options={userOptions}
-          selected={selectedUsers}
-          onChange={onUsersChange}
-          searchable
-          showSelectAll
-        />
-        <Button
-          variant="ghost"
-          size="sm"
-          leftIcon={<Filter className="size-4" />}
-          aria-expanded={showMore}
-          onClick={() => setShowMore((s) => !s)}
-        >
-          More filters{extraCount > 0 ? ` (${extraCount})` : ''}
-        </Button>
-        {activeCount > 0 && (
-          <Button
-            variant="ghost"
-            size="sm"
-            leftIcon={<X className="size-4" />}
-            onClick={onClearAll}
-            className="ml-auto text-muted-foreground"
-          >
-            Clear
-          </Button>
-        )}
-      </div>
-      {showMore && (
-        <div className="flex flex-wrap items-center gap-2 border-t border-border pt-2">
-          <MultiSelect
-            label="Status"
-            emptyLabel="Any"
-            options={statusOptions}
-            selected={selectedStatuses}
-            onChange={onStatusesChange}
-          />
-          <MultiSelect
-            label="Template"
-            emptyLabel="Any"
-            options={templateOptions}
-            selected={selectedTemplates}
-            onChange={onTemplatesChange}
-            searchable
-          />
-          <Input
-            value={hostname}
-            onChange={(e) => onHostnameChange(e.target.value)}
-            placeholder="Search hostname…"
-            aria-label="Search by hostname"
-            className="h-8 w-48"
-          />
-        </div>
-      )}
-    </div>
-  );
-}
diff --git a/create-a-container/client/src/components/containers/ContainersDataGrid.tsx b/create-a-container/client/src/components/containers/ContainersDataGrid.tsx
index c5b7145b..e91b316d 100644
--- a/create-a-container/client/src/components/containers/ContainersDataGrid.tsx
+++ b/create-a-container/client/src/components/containers/ContainersDataGrid.tsx
@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo } from 'react';
 import { DataVisNitroGrid, DataVisNitroSource } from '@mieweb/ui/datavis';
-import type { TableColumn, TableRendererProps } from '@mieweb/datavis';
+import type { ColumnFilterConfig, TableColumn, TableRendererProps } from '@mieweb/datavis';
 import { User } from 'lucide-react';
 import type { Container } from '@/lib/types';
 import { HttpLinks } from './HttpLinks';
@@ -8,12 +8,11 @@ import { NodeLink } from './NodeLink';
 import { RowActions } from './RowActions';
 import { SshLinks } from './SshLinks';
 import { STATUS_LABELS, StatusBadge } from './StatusBadge';
+import { DefaultOwnerFilter } from './DefaultOwnerFilter';
 import { templateTitle } from './shared';
 
 export interface ContainersDataGridProps {
   containers: Container[];
-  /** Whether to include the owner column (hidden when the list is scoped to self). */
-  showOwner: boolean;
   sessionUser?: string;
   siteId?: string;
   onDelete: (id: number) => void;
@@ -43,7 +42,6 @@ type FormatCell = NonNullable<TableRendererProps['formatCell']>;
  */
 export function ContainersDataGrid({
   containers,
-  showOwner,
   sessionUser,
   siteId,
   onDelete,
@@ -74,9 +72,7 @@ export function ContainersDataGrid({
         },
       },
       { field: 'nodeName', header: 'Node', sortable: true, filterable: true },
-      ...(showOwner
-        ? [{ field: 'owner', header: 'User', sortable: true, filterable: true } as TableColumn]
-        : []),
+      { field: 'owner', header: 'User', sortable: true, filterable: true },
       {
         field: 'template',
         header: 'Template',
@@ -115,9 +111,27 @@ export function ContainersDataGrid({
         getSearchText: () => '',
       },
     ],
-    [showOwner],
+    [],
   );
 
+  // The "User" column gets a dropdown filter listing the owners present in the
+  // data, so users can narrow to their own, shared, or a specific user's
+  // containers straight from the grid — no separate filter bar needed.
+  const filterColumns = useMemo<ColumnFilterConfig[]>(() => {
+    const owners = Array.from(new Set(containers.map((c) => c.owner))).sort((a, b) =>
+      a.localeCompare(b),
+    );
+    return [
+      {
+        field: 'owner',
+        displayName: 'User',
+        filterType: 'string',
+        widget: 'dropdown',
+        options: owners,
+      },
+    ];
+  }, [containers]);
+
   const formatCell = useCallback<FormatCell>(
     (value, row, column) => {
       const c = asContainer(row);
@@ -167,8 +181,10 @@ export function ContainersDataGrid({
 
   return (
     <DataVisNitroSource type="http" url={url}>
+      <DefaultOwnerFilter owner={sessionUser} />
       <DataVisNitroGrid
         columns={columns}
+        filterColumns={filterColumns}
         formatCell={formatCell}
         features={{
           stickyHeaders: true,
diff --git a/create-a-container/client/src/components/containers/DefaultOwnerFilter.tsx b/create-a-container/client/src/components/containers/DefaultOwnerFilter.tsx
new file mode 100644
index 00000000..e8d9ac4a
--- /dev/null
+++ b/create-a-container/client/src/components/containers/DefaultOwnerFilter.tsx
@@ -0,0 +1,30 @@
+import { useContext, useEffect } from 'react';
+import { DataVisNitroContext } from '@mieweb/ui/datavis';
+import { useContainerViewDefault } from '@/lib/containerViewPreference';
+
+/**
+ * Applies the user's default container view each time the underlying DataVis
+ * view is (re)created:
+ *   - 'own'  (default): seed the owner filter to the current user, so the list
+ *     opens showing only your own containers (preserving issue #413's default
+ *     now that the separate filter bar is gone).
+ *   - 'all': leave the view unfiltered so every container you may see (including
+ *     shared) shows by default.
+ * Either way the user can change/clear the filter from the "User" column; their
+ * choice sticks until the data reloads. Preference lives in localStorage and is
+ * editable from the Settings page. Renders nothing.
+ */
+export function DefaultOwnerFilter({ owner }: { owner?: string }) {
+  const view = useContext(DataVisNitroContext);
+  const mode = useContainerViewDefault();
+  useEffect(() => {
+    if (!view) return;
+    try {
+      if (mode === 'own' && owner) view.setFilter({ owner: { $eq: owner } });
+      else view.clearFilter();
+    } catch {
+      /* best-effort: the grid still renders if the filter API shifts */
+    }
+  }, [view, owner, mode]);
+  return null;
+}
diff --git a/create-a-container/client/src/components/containers/MultiSelect.tsx b/create-a-container/client/src/components/containers/MultiSelect.tsx
deleted file mode 100644
index b220d0b5..00000000
--- a/create-a-container/client/src/components/containers/MultiSelect.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import { Button, Dropdown, DropdownItem } from '@mieweb/ui';
-import { ChevronDown } from 'lucide-react';
-
-export interface FilterOption {
-  value: string;
-  label: string;
-}
-
-/**
- * A compact multiselect built on @mieweb/ui's Dropdown (multiSelect mode).
- * Selected values are controlled by the parent so filter state stays in the URL.
- */
-export function MultiSelect({
-  label,
-  emptyLabel,
-  icon,
-  options,
-  selected,
-  onChange,
-  searchable = false,
-  showSelectAll = false,
-}: {
-  label: string;
-  /** Trigger summary shown when nothing is selected. */
-  emptyLabel: string;
-  icon?: React.ReactElement;
-  options: FilterOption[];
-  selected: string[];
-  onChange: (next: string[]) => void;
-  searchable?: boolean;
-  showSelectAll?: boolean;
-}) {
-  const summary =
-    selected.length === 0
-      ? emptyLabel
-      : selected.length === 1
-        ? (options.find((o) => o.value === selected[0])?.label ?? selected[0])
-        : `${selected.length} selected`;
-
-  return (
-    <Dropdown
-      multiSelect
-      selectedValues={selected}
-      onSelectedValuesChange={onChange}
-      searchable={searchable}
-      searchPlaceholder="Search…"
-      searchAriaLabel={`Search ${label}`}
-      showSelectAll={showSelectAll}
-      trigger={
-        <Button
-          variant="secondary"
-          size="sm"
-          leftIcon={icon}
-          aria-label={`${label}: ${summary}`}
-        >
-          <span className="font-normal text-muted-foreground">{label}:</span>
-          <span className="ml-1">{summary}</span>
-          <ChevronDown className="ml-1 size-4" aria-hidden="true" />
-        </Button>
-      }
-    >
-      {options.map((o) => (
-        <DropdownItem key={o.value} value={o.value}>
-          {o.label}
-        </DropdownItem>
-      ))}
-    </Dropdown>
-  );
-}
diff --git a/create-a-container/client/src/components/settings/ContainerViewPreference.tsx b/create-a-container/client/src/components/settings/ContainerViewPreference.tsx
new file mode 100644
index 00000000..24a6deaf
--- /dev/null
+++ b/create-a-container/client/src/components/settings/ContainerViewPreference.tsx
@@ -0,0 +1,37 @@
+import { Radio, RadioGroup } from '@mieweb/ui';
+import {
+  setContainerViewDefault,
+  useContainerViewDefault,
+} from '@/lib/containerViewPreference';
+
+/**
+ * Personal (per-browser) preferences, available to every user on the Settings
+ * page. Currently just the default container view. Persisted to localStorage,
+ * so no server round-trip and no admin rights required.
+ */
+export function ContainerViewPreference() {
+  const value = useContainerViewDefault();
+
+  return (
+    <section className="grid gap-4">
+      <div>
+        <h2 className="text-lg font-semibold">Preferences</h2>
+        <p className="text-sm text-(--color-muted,#6b7280)">Saved in this browser.</p>
+      </div>
+      <RadioGroup
+        name="container-view-default"
+        label="Default container view"
+        description="What the Containers list shows when you first open it."
+        value={value}
+        onValueChange={(v) => setContainerViewDefault(v === 'all' ? 'all' : 'own')}
+      >
+        <Radio value="own" label="Only my containers" />
+        <Radio
+          value="all"
+          label="All containers I can access"
+          description="Includes containers shared with me (and, for admins, every user's)."
+        />
+      </RadioGroup>
+    </section>
+  );
+}
diff --git a/create-a-container/client/src/lib/containerViewPreference.ts b/create-a-container/client/src/lib/containerViewPreference.ts
new file mode 100644
index 00000000..d1f8df89
--- /dev/null
+++ b/create-a-container/client/src/lib/containerViewPreference.ts
@@ -0,0 +1,53 @@
+import { useSyncExternalStore } from 'react';
+
+/**
+ * Per-user (per-device) preference for what the Containers list shows by
+ * default: only your own containers ('own', the default) or everything you may
+ * see including shared ('all'). Persisted to localStorage and backed by a tiny
+ * external store so the Settings toggle and the containers grid stay in sync.
+ */
+export type ContainerViewDefault = 'own' | 'all';
+
+const STORAGE_KEY = 'containers:defaultView';
+const DEFAULT: ContainerViewDefault = 'own';
+
+const listeners = new Set<() => void>();
+
+function read(): ContainerViewDefault {
+  try {
+    return localStorage.getItem(STORAGE_KEY) === 'all' ? 'all' : 'own';
+  } catch {
+    return DEFAULT;
+  }
+}
+
+function emit() {
+  listeners.forEach((l) => l());
+}
+
+export function setContainerViewDefault(value: ContainerViewDefault) {
+  try {
+    localStorage.setItem(STORAGE_KEY, value);
+  } catch {
+    // ignore storage failures (e.g. private mode)
+  }
+  emit();
+}
+
+function subscribe(listener: () => void) {
+  listeners.add(listener);
+  // Keep multiple tabs in sync.
+  const onStorage = (e: StorageEvent) => {
+    if (e.key === STORAGE_KEY) listener();
+  };
+  window.addEventListener('storage', onStorage);
+  return () => {
+    listeners.delete(listener);
+    window.removeEventListener('storage', onStorage);
+  };
+}
+
+/** Reactive accessor for the container view default. */
+export function useContainerViewDefault(): ContainerViewDefault {
+  return useSyncExternalStore(subscribe, read, () => DEFAULT);
+}
diff --git a/create-a-container/client/src/pages/containers/ContainersListPage.tsx b/create-a-container/client/src/pages/containers/ContainersListPage.tsx
index 7f43bb9e..f65984ad 100644
--- a/create-a-container/client/src/pages/containers/ContainersListPage.tsx
+++ b/create-a-container/client/src/pages/containers/ContainersListPage.tsx
@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import { useState } from 'react';
 import { Link, useLocation, useParams, useSearchParams } from 'react-router';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import {
@@ -19,12 +19,9 @@ import { api, ApiError } from '@/lib/api';
 import { useSession } from '@/lib/auth';
 import { keys, queries } from '@/lib/queries';
 import { ButtonLink } from '@/components/ButtonLink';
-import { STATUS_LABELS } from '@/components/containers/StatusBadge';
-import { templateTitle } from '@/components/containers/shared';
 import { CollaboratorsManager } from '@/components/containers/CollaboratorsManager';
 import { ContainersDataGrid } from '@/components/containers/ContainersDataGrid';
-import { ContainerFilters, type FilterOption } from '@/components/containers/ContainerFilters';
-import type { Container, ContainerStatus } from '@/lib/types';
+import type { Container } from '@/lib/types';
 
 export function ContainersListPage() {
   const { siteId } = useParams<{ siteId: string }>();
@@ -34,55 +31,11 @@ export function ContainersListPage() {
   const sessionUser = session?.user;
   const isAdmin = !!session?.isAdmin;
   const location = useLocation();
-  const [searchParams, setSearchParams] = useSearchParams();
+  const [searchParams] = useSearchParams();
+  // Preserved so a node's "view containers" link can scope the list to one node.
   const nodeId = searchParams.get('nodeId') || undefined;
-  // The URL is the single source of truth for the filter bar, so views are
-  // bookmarkable and shareable. `user` is a comma-separated owner list that
-  // drives the server query; an empty list returns everything the caller may
-  // see (all owners for admins; own + shared for non-admins).
-  // Status/template/hostname refine the loaded rows client-side.
-  const parseList = (v: string | null) => (v ? v.split(',').filter(Boolean) : []);
-  const selectedUsers = parseList(searchParams.get('user'));
-  const selectedStatuses = parseList(searchParams.get('status'));
-  const selectedTemplates = parseList(searchParams.get('template'));
-  const hostnameQuery = searchParams.get('q') ?? '';
-  // The default (and a self-only filter) shows only the caller's containers, so
-  // the owner column only appears once another user is included in the filter.
-  const showOwner = selectedUsers.some((u) => u !== sessionUser);
   const dnsWarnings = (location.state as { dnsWarnings?: string[] } | null)?.dnsWarnings;
 
-  const setListParam = (key: string, values: string[]) =>
-    setSearchParams(
-      (prev) => {
-        const next = new URLSearchParams(prev);
-        if (values.length > 0) next.set(key, values.join(','));
-        else next.delete(key);
-        return next;
-      },
-      { replace: true },
-    );
-  const setTextParam = (key: string, value: string) =>
-    setSearchParams(
-      (prev) => {
-        const next = new URLSearchParams(prev);
-        if (value) next.set(key, value);
-        else next.delete(key);
-        return next;
-      },
-      { replace: true },
-    );
-  // Clearing all filters returns to the default view: the caller's own
-  // containers.
-  const clearAllFilters = () =>
-    setSearchParams(
-      (prev) => {
-        const next = new URLSearchParams(prev);
-        ['user', 'status', 'template', 'q'].forEach((k) => next.delete(k));
-        return next;
-      },
-      { replace: true },
-    );
-
   // Container whose sharing dialog is open. Tracked by id so the dialog reflects
   // live collaborator changes after the list query refetches.
   const [shareTargetId, setShareTargetId] = useState<number | null>(null);
@@ -92,29 +45,15 @@ export function ContainersListPage() {
     queryFn: () => queries.getSite(siteId!),
     enabled: !!siteId,
   });
-  // Empty selection defaults to the caller's own containers server-side.
-  const userParam = selectedUsers.length > 0 ? selectedUsers : undefined;
+  // Load everything the caller may see (own + shared, and every owner for
+  // admins) in one query; all narrowing now happens through the DataVis grid's
+  // built-in column filters and search, so there is no separate filter bar.
   const { data, isLoading, error } = useQuery({
-    queryKey: keys.containers(siteId!, { user: userParam, nodeId }),
-    queryFn: () => queries.listContainers(siteId!, { user: userParam, nodeId }),
+    queryKey: keys.containers(siteId!, { user: ['*'], nodeId }),
+    queryFn: () => queries.listContainers(siteId!, { user: ['*'], nodeId }),
     enabled: !!siteId,
   });
 
-  // Options for the "User" filter. Admins may filter by any user; non-admins
-  // may only narrow to owners who have shared a container with them, so their
-  // option list is derived from a `*` (own + shared) query — distinct from the
-  // own-only default list, so both run.
-  const { data: allUsers } = useQuery({
-    queryKey: keys.users(),
-    queryFn: queries.listUsers,
-    enabled: !!siteId && isAdmin,
-  });
-  const { data: visibleContainers } = useQuery({
-    queryKey: keys.containers(siteId!, { user: ['*'] }),
-    queryFn: () => queries.listContainers(siteId!, { user: ['*'] }),
-    enabled: !!siteId && !isAdmin,
-  });
-
   const del = useMutation({
     mutationFn: (id: number) => api.delete(`/api/v1/sites/${siteId}/containers/${id}`),
     onSuccess: () => {
@@ -124,59 +63,8 @@ export function ContainersListPage() {
     onError: (err: ApiError) => toast.error(err.message),
   });
 
-  // Client-side refinement of the loaded rows by status/template/hostname.
-  const visible = useMemo(() => {
-    const q = hostnameQuery.trim().toLowerCase();
-    return (data ?? []).filter(
-      (c) =>
-        (selectedStatuses.length === 0 || selectedStatuses.includes(c.status)) &&
-        (selectedTemplates.length === 0 ||
-          (c.template != null && selectedTemplates.includes(c.template))) &&
-        (q === '' || c.hostname.toLowerCase().includes(q)),
-    );
-  }, [data, selectedStatuses, selectedTemplates, hostnameQuery]);
-
-  const userOptions = useMemo<FilterOption[]>(() => {
-    const byLabel = (a: FilterOption, b: FilterOption) => a.label.localeCompare(b.label);
-    if (isAdmin) {
-      const opts = (allUsers ?? []).map((u) => ({
-        value: u.uid,
-        label: u.uid === sessionUser ? `${u.cn} (me)` : u.cn,
-      }));
-      return opts.sort(byLabel);
-    }
-    const owners = new Set<string>();
-    if (sessionUser) owners.add(sessionUser);
-    (visibleContainers ?? []).forEach((c) => owners.add(c.owner));
-    const opts = [...owners].map((o) => ({
-      value: o,
-      label: o === sessionUser ? `${o} (me)` : o,
-    }));
-    return opts.sort(byLabel);
-  }, [isAdmin, allUsers, visibleContainers, sessionUser]);
-
-  // Only offer statuses that actually occur in the loaded rows, so the
-  // dropdown stays clean instead of listing every theoretical status.
-  const statusOptions = useMemo<FilterOption[]>(() => {
-    const seen = new Set<ContainerStatus>();
-    (data ?? []).forEach((c) => seen.add(c.status));
-    return [...seen]
-      .map((s) => ({ value: s, label: STATUS_LABELS[s] ?? s }))
-      .sort((a, b) => a.label.localeCompare(b.label));
-  }, [data]);
-
-  const templateOptions = useMemo<FilterOption[]>(() => {
-    const seen = new Map<string, string>();
-    (data ?? []).forEach((c) => {
-      if (c.template) seen.set(c.template, templateTitle(c.template));
-    });
-    return [...seen.entries()]
-      .map(([value, label]) => ({ value, label }))
-      .sort((a, b) => a.label.localeCompare(b.label));
-  }, [data]);
-
-  const hasContainers = visible.length > 0;
-  const serverHasContainers = !!data && data.length > 0;
+  const containers = data ?? [];
+  const hasContainers = containers.length > 0;
 
   // Sharing is owner/admin only. Derive the open dialog's container from the
   // live list so its collaborator chips update after add/remove.
@@ -201,21 +89,6 @@ export function ContainersListPage() {
         }
       />
 
-      <ContainerFilters
-        userOptions={userOptions}
-        selectedUsers={selectedUsers}
-        onUsersChange={(v) => setListParam('user', v)}
-        statusOptions={statusOptions}
-        selectedStatuses={selectedStatuses}
-        onStatusesChange={(v) => setListParam('status', v)}
-        templateOptions={templateOptions}
-        selectedTemplates={selectedTemplates}
-        onTemplatesChange={(v) => setListParam('template', v)}
-        hostname={hostnameQuery}
-        onHostnameChange={(v) => setTextParam('q', v)}
-        onClearAll={clearAllFilters}
-      />
-
       {error && (
         <Alert variant="danger">
           <AlertDescription>{(error as ApiError).message}</AlertDescription>
@@ -242,23 +115,14 @@ export function ContainersListPage() {
         <Alert variant="info">
           <AlertTitle>No containers</AlertTitle>
           <AlertDescription>
-            {selectedUsers.length > 0
-              ? 'No containers match the selected users.'
-              : 'Create your first container with the button above.'}
+            Create your first container with the button above.
           </AlertDescription>
         </Alert>
       )}
-      {serverHasContainers && !hasContainers && (
-        <Alert variant="info">
-          <AlertTitle>No matches</AlertTitle>
-          <AlertDescription>No containers match the current filters.</AlertDescription>
-        </Alert>
-      )}
 
       {hasContainers && (
         <ContainersDataGrid
-          containers={visible}
-          showOwner={showOwner}
+          containers={containers}
           sessionUser={sessionUser}
           siteId={siteId}
           onDelete={del.mutate}
diff --git a/create-a-container/client/src/pages/settings/SettingsPage.tsx b/create-a-container/client/src/pages/settings/SettingsPage.tsx
index e873da66..5b7ff480 100644
--- a/create-a-container/client/src/pages/settings/SettingsPage.tsx
+++ b/create-a-container/client/src/pages/settings/SettingsPage.tsx
@@ -20,8 +20,9 @@ import {
 } from '@mieweb/ui';
 import { Plus, Settings as SettingsIcon, Trash2 } from 'lucide-react';
 import { api, ApiError } from '@/lib/api';
-import { serverInfoKey } from '@/lib/auth';
+import { serverInfoKey, useSession } from '@/lib/auth';
 import { keys, queries } from '@/lib/queries';
+import { ContainerViewPreference } from '@/components/settings/ContainerViewPreference';
 import type { AppSettings } from '@/lib/types';
 
 const envVarSchema = z.object({
@@ -43,7 +44,15 @@ type FormData = z.infer<typeof schema>;
 export function SettingsPage() {
   const qc = useQueryClient();
   const toast = useToast();
-  const { data, isLoading, error } = useQuery({ queryKey: keys.settings(), queryFn: queries.getSettings });
+  const { data: session } = useSession();
+  const isAdmin = !!session?.isAdmin;
+  const { data, isLoading, error } = useQuery({
+    queryKey: keys.settings(),
+    queryFn: queries.getSettings,
+    // The system settings API is admin-only; non-admins only see the personal
+    // Preferences section below, so skip the request (avoids a 403).
+    enabled: isAdmin,
+  });
 
   const { register, handleSubmit, reset, control } = useForm<FormData>({
     resolver: zodResolver(schema),
@@ -74,12 +83,23 @@ export function SettingsPage() {
     onError: (err: ApiError) => toast.error(err.message),
   });
 
-  if (isLoading) return <div className="flex justify-center p-12"><Spinner size="lg" /></div>;
-  if (error) return <Alert variant="danger"><AlertDescription>{(error as ApiError).message}</AlertDescription></Alert>;
-
   return (
     <div className="flex flex-col gap-6">
       <PageHeader title="Settings" icon={<SettingsIcon className="size-6" />} bordered />
+
+      <ContainerViewPreference />
+
+      {isAdmin && isLoading && (
+        <div className="flex justify-center p-12">
+          <Spinner size="lg" />
+        </div>
+      )}
+      {isAdmin && error && (
+        <Alert variant="danger">
+          <AlertDescription>{(error as ApiError).message}</AlertDescription>
+        </Alert>
+      )}
+      {isAdmin && !isLoading && !error && (
       <form onSubmit={handleSubmit((v) => mutation.mutate(v))} className="grid w-full gap-8">
         <section className="grid gap-4">
           <h2 className="text-lg font-semibold">SMTP</h2>
@@ -175,6 +195,7 @@ export function SettingsPage() {
           <Button type="submit" variant="primary" isLoading={mutation.isPending}>Save settings</Button>
         </div>
       </form>
+      )}
     </div>
   );
 }
diff --git a/create-a-container/openapi.v1.yaml b/create-a-container/openapi.v1.yaml
index 8e9d63b8..a9261dd3 100644
--- a/create-a-container/openapi.v1.yaml
+++ b/create-a-container/openapi.v1.yaml
@@ -1033,7 +1033,6 @@ paths:
       parameters:
         - { in: path, name: siteId, required: true, schema: { type: integer } }
         - { in: path, name: id, required: true, schema: { type: integer } }
-<<<<<<< Updated upstream
       responses:
         '200':
           description: Array of Proxmox CT template storages
@@ -1041,21 +1040,23 @@ paths:
             application/json:
               schema: { type: object, properties: { data: { type: array, items: { type: object, properties: { name: { type: string }, total: { type: integer }, available: { type: integer } } } } } }
         '404': { description: 'Site not found (code: site_not_found)', content: { application/json: { schema: { $ref: '#/components/schemas/Error' } } } }
-=======
-      responses: { '200': { description: Array of Proxmox CT template storages } }
   /sites/{siteId}/nodes/{id}/stats:
     get:
+      operationId: get_node_stats
       tags: [Nodes]
+      summary: Live hardware utilization (CPU/memory/swap/rootfs, uptime) plus per-datastore usage
       parameters:
         - { in: path, name: siteId, required: true, schema: { type: integer } }
         - { in: path, name: id, required: true, schema: { type: integer } }
       responses:
         '200':
           description: >-
-            Live hardware utilization (CPU/memory/swap/rootfs, uptime) plus
-            per-datastore usage. `available` is false when the node has no API
-            credentials or the hypervisor is unreachable.
->>>>>>> Stashed changes
+            Live hardware utilization. `available` is false when the node has no
+            API credentials or the hypervisor is unreachable.
+          content:
+            application/json:
+              schema: { type: object, properties: { data: { type: object } } }
+        '404': { description: 'Node not found (code: not_found)', content: { application/json: { schema: { $ref: '#/components/schemas/Error' } } } }
 
   /jobs/{id}:
     parameters: [{ in: path, name: id, required: true, schema: { type: integer } }]

From e4e1f3c5f5867274178f0d6138246fd096e98a1d Mon Sep 17 00:00:00 2001
From: cmyers-mieweb <cmyers@mieweb.com>
Date: Wed, 5 Aug 2026 14:01:59 -0700
Subject: [PATCH 5/5] Move default container view setting to
 feature/default-container-view

Reverts only the per-user default-container-view preference (Settings page, sidebar/header exposure, localStorage store) from this branch; it now lives on feature/default-container-view. The DataVis filter-bar removal is unaffected.
---
 create-a-container/client/src/app/Header.tsx  | 14 ++---
 create-a-container/client/src/app/Sidebar.tsx |  2 +-
 .../containers/DefaultOwnerFilter.tsx         | 26 ++++-----
 .../settings/ContainerViewPreference.tsx      | 37 -------------
 .../client/src/lib/containerViewPreference.ts | 53 -------------------
 .../src/pages/settings/SettingsPage.tsx       | 31 ++---------
 6 files changed, 23 insertions(+), 140 deletions(-)
 delete mode 100644 create-a-container/client/src/components/settings/ContainerViewPreference.tsx
 delete mode 100644 create-a-container/client/src/lib/containerViewPreference.ts

diff --git a/create-a-container/client/src/app/Header.tsx b/create-a-container/client/src/app/Header.tsx
index 52b70623..2f5f81d8 100644
--- a/create-a-container/client/src/app/Header.tsx
+++ b/create-a-container/client/src/app/Header.tsx
@@ -78,12 +78,14 @@ export function AppTopHeader() {
             />
             <DropdownSeparator />
             <DropdownContent>
-              <DropdownItem
-                icon={<Settings className="size-4" aria-hidden="true" />}
-                onClick={() => navigate('/settings')}
-              >
-                Settings
-              </DropdownItem>
+              {isAdmin && (
+                <DropdownItem
+                  icon={<Settings className="size-4" aria-hidden="true" />}
+                  onClick={() => navigate('/settings')}
+                >
+                  Settings
+                </DropdownItem>
+              )}
               <DropdownItem
                 icon={<LogOut className="size-4" aria-hidden="true" />}
                 variant="danger"
diff --git a/create-a-container/client/src/app/Sidebar.tsx b/create-a-container/client/src/app/Sidebar.tsx
index 900b7601..33fe8dce 100644
--- a/create-a-container/client/src/app/Sidebar.tsx
+++ b/create-a-container/client/src/app/Sidebar.tsx
@@ -60,7 +60,7 @@ const ADMIN: NavLink[] = [
   },
   { to: '/agents', label: 'Agents', icon: <Radio className="size-4" />, adminOnly: true },
   { to: '/apikeys', label: 'API Keys', icon: <KeyRound className="size-4" /> },
-  { to: '/settings', label: 'Settings', icon: <Settings className="size-4" /> },
+  { to: '/settings', label: 'Settings', icon: <Settings className="size-4" />, adminOnly: true },
 ];
 
 export function AppSidebar() {
diff --git a/create-a-container/client/src/components/containers/DefaultOwnerFilter.tsx b/create-a-container/client/src/components/containers/DefaultOwnerFilter.tsx
index e8d9ac4a..3651ac33 100644
--- a/create-a-container/client/src/components/containers/DefaultOwnerFilter.tsx
+++ b/create-a-container/client/src/components/containers/DefaultOwnerFilter.tsx
@@ -1,30 +1,22 @@
 import { useContext, useEffect } from 'react';
 import { DataVisNitroContext } from '@mieweb/ui/datavis';
-import { useContainerViewDefault } from '@/lib/containerViewPreference';
 
 /**
- * Applies the user's default container view each time the underlying DataVis
- * view is (re)created:
- *   - 'own'  (default): seed the owner filter to the current user, so the list
- *     opens showing only your own containers (preserving issue #413's default
- *     now that the separate filter bar is gone).
- *   - 'all': leave the view unfiltered so every container you may see (including
- *     shared) shows by default.
- * Either way the user can change/clear the filter from the "User" column; their
- * choice sticks until the data reloads. Preference lives in localStorage and is
- * editable from the Settings page. Renders nothing.
+ * Seeds the grid's owner filter to the current user each time the underlying
+ * DataVis view is (re)created, so the Containers list opens showing only your
+ * own containers (preserving the default from issue #413 now that the separate
+ * filter bar is gone). Users can change or clear the filter from the "User"
+ * column; their choice sticks until the data reloads. Renders nothing.
  */
 export function DefaultOwnerFilter({ owner }: { owner?: string }) {
   const view = useContext(DataVisNitroContext);
-  const mode = useContainerViewDefault();
   useEffect(() => {
-    if (!view) return;
+    if (!view || !owner) return;
     try {
-      if (mode === 'own' && owner) view.setFilter({ owner: { $eq: owner } });
-      else view.clearFilter();
+      view.setFilter({ owner: { $eq: owner } });
     } catch {
-      /* best-effort: the grid still renders if the filter API shifts */
+      /* best-effort: the grid still renders unfiltered if the API shifts */
     }
-  }, [view, owner, mode]);
+  }, [view, owner]);
   return null;
 }
diff --git a/create-a-container/client/src/components/settings/ContainerViewPreference.tsx b/create-a-container/client/src/components/settings/ContainerViewPreference.tsx
deleted file mode 100644
index 24a6deaf..00000000
--- a/create-a-container/client/src/components/settings/ContainerViewPreference.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { Radio, RadioGroup } from '@mieweb/ui';
-import {
-  setContainerViewDefault,
-  useContainerViewDefault,
-} from '@/lib/containerViewPreference';
-
-/**
- * Personal (per-browser) preferences, available to every user on the Settings
- * page. Currently just the default container view. Persisted to localStorage,
- * so no server round-trip and no admin rights required.
- */
-export function ContainerViewPreference() {
-  const value = useContainerViewDefault();
-
-  return (
-    <section className="grid gap-4">
-      <div>
-        <h2 className="text-lg font-semibold">Preferences</h2>
-        <p className="text-sm text-(--color-muted,#6b7280)">Saved in this browser.</p>
-      </div>
-      <RadioGroup
-        name="container-view-default"
-        label="Default container view"
-        description="What the Containers list shows when you first open it."
-        value={value}
-        onValueChange={(v) => setContainerViewDefault(v === 'all' ? 'all' : 'own')}
-      >
-        <Radio value="own" label="Only my containers" />
-        <Radio
-          value="all"
-          label="All containers I can access"
-          description="Includes containers shared with me (and, for admins, every user's)."
-        />
-      </RadioGroup>
-    </section>
-  );
-}
diff --git a/create-a-container/client/src/lib/containerViewPreference.ts b/create-a-container/client/src/lib/containerViewPreference.ts
deleted file mode 100644
index d1f8df89..00000000
--- a/create-a-container/client/src/lib/containerViewPreference.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import { useSyncExternalStore } from 'react';
-
-/**
- * Per-user (per-device) preference for what the Containers list shows by
- * default: only your own containers ('own', the default) or everything you may
- * see including shared ('all'). Persisted to localStorage and backed by a tiny
- * external store so the Settings toggle and the containers grid stay in sync.
- */
-export type ContainerViewDefault = 'own' | 'all';
-
-const STORAGE_KEY = 'containers:defaultView';
-const DEFAULT: ContainerViewDefault = 'own';
-
-const listeners = new Set<() => void>();
-
-function read(): ContainerViewDefault {
-  try {
-    return localStorage.getItem(STORAGE_KEY) === 'all' ? 'all' : 'own';
-  } catch {
-    return DEFAULT;
-  }
-}
-
-function emit() {
-  listeners.forEach((l) => l());
-}
-
-export function setContainerViewDefault(value: ContainerViewDefault) {
-  try {
-    localStorage.setItem(STORAGE_KEY, value);
-  } catch {
-    // ignore storage failures (e.g. private mode)
-  }
-  emit();
-}
-
-function subscribe(listener: () => void) {
-  listeners.add(listener);
-  // Keep multiple tabs in sync.
-  const onStorage = (e: StorageEvent) => {
-    if (e.key === STORAGE_KEY) listener();
-  };
-  window.addEventListener('storage', onStorage);
-  return () => {
-    listeners.delete(listener);
-    window.removeEventListener('storage', onStorage);
-  };
-}
-
-/** Reactive accessor for the container view default. */
-export function useContainerViewDefault(): ContainerViewDefault {
-  return useSyncExternalStore(subscribe, read, () => DEFAULT);
-}
diff --git a/create-a-container/client/src/pages/settings/SettingsPage.tsx b/create-a-container/client/src/pages/settings/SettingsPage.tsx
index 5b7ff480..e873da66 100644
--- a/create-a-container/client/src/pages/settings/SettingsPage.tsx
+++ b/create-a-container/client/src/pages/settings/SettingsPage.tsx
@@ -20,9 +20,8 @@ import {
 } from '@mieweb/ui';
 import { Plus, Settings as SettingsIcon, Trash2 } from 'lucide-react';
 import { api, ApiError } from '@/lib/api';
-import { serverInfoKey, useSession } from '@/lib/auth';
+import { serverInfoKey } from '@/lib/auth';
 import { keys, queries } from '@/lib/queries';
-import { ContainerViewPreference } from '@/components/settings/ContainerViewPreference';
 import type { AppSettings } from '@/lib/types';
 
 const envVarSchema = z.object({
@@ -44,15 +43,7 @@ type FormData = z.infer<typeof schema>;
 export function SettingsPage() {
   const qc = useQueryClient();
   const toast = useToast();
-  const { data: session } = useSession();
-  const isAdmin = !!session?.isAdmin;
-  const { data, isLoading, error } = useQuery({
-    queryKey: keys.settings(),
-    queryFn: queries.getSettings,
-    // The system settings API is admin-only; non-admins only see the personal
-    // Preferences section below, so skip the request (avoids a 403).
-    enabled: isAdmin,
-  });
+  const { data, isLoading, error } = useQuery({ queryKey: keys.settings(), queryFn: queries.getSettings });
 
   const { register, handleSubmit, reset, control } = useForm<FormData>({
     resolver: zodResolver(schema),
@@ -83,23 +74,12 @@ export function SettingsPage() {
     onError: (err: ApiError) => toast.error(err.message),
   });
 
+  if (isLoading) return <div className="flex justify-center p-12"><Spinner size="lg" /></div>;
+  if (error) return <Alert variant="danger"><AlertDescription>{(error as ApiError).message}</AlertDescription></Alert>;
+
   return (
     <div className="flex flex-col gap-6">
       <PageHeader title="Settings" icon={<SettingsIcon className="size-6" />} bordered />
-
-      <ContainerViewPreference />
-
-      {isAdmin && isLoading && (
-        <div className="flex justify-center p-12">
-          <Spinner size="lg" />
-        </div>
-      )}
-      {isAdmin && error && (
-        <Alert variant="danger">
-          <AlertDescription>{(error as ApiError).message}</AlertDescription>
-        </Alert>
-      )}
-      {isAdmin && !isLoading && !error && (
       <form onSubmit={handleSubmit((v) => mutation.mutate(v))} className="grid w-full gap-8">
         <section className="grid gap-4">
           <h2 className="text-lg font-semibold">SMTP</h2>
@@ -195,7 +175,6 @@ export function SettingsPage() {
           <Button type="submit" variant="primary" isLoading={mutation.isPending}>Save settings</Button>
         </div>
       </form>
-      )}
     </div>
   );
 }