Integrate Home Assistant data table with enhanced UI features

.github/workflows/ci.yml

@@ -15,12 +15,23 @@ jobs:
 
     steps:
       - uses: actions/checkout@v6.0.1
+        with:
+          submodules: recursive
       - name: Use Node.js
         uses: actions/setup-node@v5.0.0
         with:
           node-version: 24
       - run: npm ci
-      - run: tsc
+      - name: Type check
+        run: |
+          # Type check src files only, ignoring homeassistant-frontend submodule errors
+          tsc 2>&1 | grep -v "^homeassistant-frontend/" | tee /tmp/tsc-output.txt
+          # Fail only if there are errors in our source files
+          if grep -q "^src/\|^web.esphome.io/src/" /tmp/tsc-output.txt; then
+            echo "TypeScript errors found in source files:"
+            grep "^src/\|^web.esphome.io/src/" /tmp/tsc-output.txt
+            exit 1
+          fi
       - run: script/build
       - run: web.esphome.io/script/build_web
       - run: npm exec -- prettier --check src web.esphome.io/src

.gitignore

@@ -4,3 +4,4 @@ esphome_dashboard.egg-info
 dist
 .vscode/settings.json
 venv
+deployment-notes.md

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "homeassistant-frontend"]
+	path = homeassistant-frontend
+	url = https://github.com/home-assistant/frontend.git

package.json

@@ -8,55 +8,102 @@
   "license": "Apache-2.0",
   "scripts": {
     "develop": "script/develop",
+    "build": "script/build",
     "develop_web": "web.esphome.io/script/develop_web",
-    "prepublishOnly": "script/build"
+    "prepublishOnly": "npm run build"
   },
   "devDependencies": {
+    "@babel/core": "^7.28.4",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-decorators": "^7.28.0",
+    "@babel/plugin-transform-runtime": "^7.28.3",
+    "@babel/preset-env": "^7.28.3",
+    "@babel/preset-typescript": "^7.27.1",
+    "@bundle-stats/plugin-webpack-filter": "^4.21.3",
+    "@formatjs/intl-durationformat": "^0.7.1",
+    "@lit-labs/virtualizer": "^2.1.1",
     "@rollup/plugin-commonjs": "^28.0.6",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^12.3.0",
+    "@rsdoctor/rspack-plugin": "^1.3.0",
+    "@rspack/cli": "^1.5.7",
+    "@rspack/core": "^1.5.7",
+    "@swc/helpers": "^0.5.17",
+    "@types/color-name": "^2.0.0",
+    "@vaadin/combo-box": "^24.9.1",
+    "@vaadin/vaadin-material-styles": "^24.9.1",
+    "@vaadin/vaadin-themable-mixin": "^24.9.1",
+    "babel-loader": "^10.0.0",
+    "babel-plugin-template-html-minifier": "^4.1.0",
+    "color-name": "^2.0.2",
+    "comlink": "^4.4.2",
+    "core-js": "^3.45.1",
+    "culori": "^4.0.2",
+    "fancy-log": "^2.0.0",
     "fs-extra": "^11.3.0",
+    "home-assistant-js-websocket": "^9.5.0",
     "monaco-editor": "^0.52.2",
     "nunjucks": "^3.2.4",
-    "postcss": "^8.5.6",
+    "postcss": "^8.5.3",
     "postcss-url": "^10.1.3",
     "prettier": "^3.6.2",
-    "rollup": "^4.50.1",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-monaco-editor": "^0.2.1",
     "rollup-plugin-postcss": "^4.0.2",
+    "rspack-manifest-plugin": "^5.1.0",
     "serve": "^14.2.5",
-    "typescript": "^5.8.3"
+    "terser-webpack-plugin": "^5.3.14",
+    "typescript": "^5.8.3",
+    "webpack-stats-plugin": "^1.1.3",
+    "webpackbar": "^7.0.0",
+    "weekstart": "^2.0.0"
   },
   "dependencies": {
+    "@babel/runtime": "^7.28.4",
+    "@formatjs/intl-datetimeformat": "^6.17.1",
+    "@formatjs/intl-displaynames": "^6.8.8",
+    "@formatjs/intl-getcanonicallocales": "^2.5.4",
+    "@formatjs/intl-listformat": "^7.7.8",
+    "@formatjs/intl-locale": "^4.2.8",
+    "@formatjs/intl-numberformat": "^8.15.1",
+    "@formatjs/intl-pluralrules": "^5.4.1",
+    "@formatjs/intl-relativetimeformat": "^11.4.8",
+    "@home-assistant/webawesome": "^3.0.0-beta.4.ha.3",
     "@lit-labs/motion": "^1.0.8",
+    "@lit-labs/observers": "^2.0.6",
     "@material/mwc-button": "^0.27.0",
     "@material/mwc-circular-progress": "^0.27.0",
     "@material/mwc-dialog": "^0.27.0",
     "@material/mwc-fab": "^0.27.0",
     "@material/mwc-formfield": "^0.27.0",
+    "@material/mwc-icon": "^0.27.0",
     "@material/mwc-icon-button": "^0.27.0",
     "@material/mwc-list": "^0.27.0",
     "@material/mwc-menu": "^0.27.0",
     "@material/mwc-radio": "^0.27.0",
+    "@material/mwc-select": "^0.27.0",
     "@material/mwc-snackbar": "^0.27.0",
     "@material/mwc-textfield": "^0.27.0",
+    "@material/web": "^2.4.0",
     "@mdi/js": "^7.4.47",
     "@polymer/paper-tooltip": "^3.0.1",
     "@types/w3c-web-serial": "^1.0.8",
+    "deep-clone-simple": "^1.1.1",
+    "element-internals-polyfill": "^3.0.2",
     "esptool-js": "^0.5.3",
     "improv-wifi-serial-sdk": "^2.5.0",
     "lit": "^2.8.0",
+    "memoize-one": "^6.0.0",
+    "sortablejs": "^1.15.6",
     "tslib": "^2.8.1",
     "yaml": "^2.8.1"
   },
   "overrides": {
     "@lit/reactive-element": "1.3.2",
     "rollup-plugin-monaco-editor": {
-      "monaco-editor": "$monaco-editor",
-      "rollup": "$rollup"
+      "monaco-editor": "$monaco-editor"
     }
   }
 }

raw_package/index.template.html

@@ -14,7 +14,7 @@
 
 {% block footer %}
 <script
-  src="{{ get_static_file_url('js/esphome/index.js') }}"
+  src="{{ get_static_file_url('js/esphome/index.js') }}?v={{ version }}"
   type="module"
 ></script>
 {% end %}

raw_package/static/css/esphome-2.css

@@ -3,6 +3,7 @@
 :root {
   /* Colors */
   --primary-bg-color: #fafafa;
+  --primary-background-color: #fafafa;
   --primary-footer-bg-color: #212121;
   --card-background-color: #fafafa;
   --alert-standard-color: #666666;
@@ -17,7 +18,7 @@
   --alert-error-color-bg: #faefeb;
   --mdc-theme-primary: #03a9f4;
   --primary-text-color: #212121;
-  --mdc-dialog-z-index: 998;
+  --mdc-dialog-z-index: 10000;
   --mdc-theme-primary-no-attention: #444444;
   --mdc-theme-on-primary-no-attention: white;
   --esphome-background-header: #e0e0e0;
@@ -33,7 +34,8 @@
 /* dark theme */
 @media (prefers-color-scheme: dark) {
   :root {
-    --primary-bg-color: #000000;
+    --primary-bg-color: #111111;
+    --primary-background-color: #111111;
     --primary-text-color: #e1e1e1;
     --primary-footer-bg-color: #101e24;
     --esphome-background-header: #282828;
@@ -103,7 +105,7 @@ esphome-main {
   background-color: var(--esphome-background-header);
   color: var(--primary-text-color);
   padding: 0 24px;
-  z-index: 1;
+  z-index: 50;
 }
 
 .flex {

rspack.config.js

@@ -0,0 +1,129 @@
+const haRspack = require("./homeassistant-frontend/build-scripts/rspack.cjs");
+const haPaths = require("./homeassistant-frontend/build-scripts/paths.cjs");
+const path = require("path");
+const fs = require("fs");
+const rspack = require("@rspack/core");
+
+const isProdBuild = process.env.NODE_ENV === "production";
+
+// Plugin to fix manifest.json format for ESPHome compatibility and copy Monaco worker
+// ESPHome expects {"index": "index.js", "editor.worker": "..."} format
+class FixManifestPlugin {
+  apply(compiler) {
+    compiler.hooks.afterEmit.tapAsync(
+      "FixManifestPlugin",
+      (compilation, callback) => {
+        const outputPath = compiler.options.output.path;
+        const manifestPath = path.resolve(outputPath, "manifest.json");
+
+        try {
+          // Fix the manifest format
+          const manifest = JSON.parse(fs.readFileSync(manifestPath, "utf-8"));
+          const fixedManifest = {};
+          for (const [key, value] of Object.entries(manifest)) {
+            // Remove .js extension from key, extract just filename from value
+            const newKey = key.replace(/\.js$/, "");
+            const newValue = path.basename(value);
+            fixedManifest[newKey] = newValue;
+          }
+
+          // Add editor.worker entry that Monaco expects
+          fixedManifest["editor.worker"] =
+            "monaco-editor/esm/vs/editor/editor.worker.js";
+
+          fs.writeFileSync(manifestPath, JSON.stringify(fixedManifest));
+        } catch (e) {
+          console.error("FixManifestPlugin error:", e);
+        }
+
+        // Copy Monaco editor worker to the expected location
+        const monacoWorkerSrc = path.resolve(
+          __dirname,
+          "node_modules/monaco-editor/esm/vs/editor/editor.worker.js",
+        );
+        const monacoWorkerDest = path.resolve(
+          outputPath,
+          "monaco-editor/esm/vs/editor/editor.worker.js",
+        );
+
+        try {
+          fs.mkdirSync(path.dirname(monacoWorkerDest), { recursive: true });
+          fs.copyFileSync(monacoWorkerSrc, monacoWorkerDest);
+        } catch (e) {
+          console.error("Failed to copy Monaco worker:", e);
+        }
+
+        // Copy Monaco codicon font for folding icons, etc.
+        const codiconSrc = path.resolve(
+          __dirname,
+          "node_modules/monaco-editor/min/vs/base/browser/ui/codicons/codicon/codicon.ttf",
+        );
+        const codiconDest = path.resolve(outputPath, "codicon.ttf");
+
+        try {
+          fs.copyFileSync(codiconSrc, codiconDest);
+        } catch (e) {
+          console.error("Failed to copy Monaco codicon font:", e);
+        }
+
+        callback();
+      },
+    );
+  }
+}
+
+// Override paths to point to our directory structure
+haPaths.polymer_dir = __dirname;
+
+const createConfig = ({ isProdBuild, latestBuild = true }) => {
+  // Use the HA frontend's rspack configuration
+  const config = haRspack.createRspackConfig({
+    name: "esphome",
+    entry: {
+      index: path.resolve(__dirname, "src/index.ts"),
+    },
+    outputPath: path.resolve(__dirname, "esphome_dashboard/static/js/esphome"),
+    publicPath: "/static/js/esphome/",
+    isProdBuild,
+    latestBuild,
+    isStatsBuild: false,
+    isTestBuild: false,
+  });
+
+  // Override output to use consistent filename
+  config.output = {
+    ...config.output,
+    filename: "[name].js",
+    chunkFilename: "[name].chunk.js",
+  };
+
+  // Override resolve to work with our setup
+  config.resolve = {
+    ...config.resolve,
+    modules: [
+      "node_modules",
+      path.resolve(__dirname, "homeassistant-frontend/src"),
+    ],
+    alias: {
+      ...config.resolve.alias,
+      "@ha": path.resolve(__dirname, "homeassistant-frontend/src"),
+      // Stub out HA frontend build artifacts that don't exist in this project
+      "../../build/translations/translationMetadata.json": path.resolve(
+        __dirname,
+        "src/stubs/translationMetadata.json",
+      ),
+    },
+  };
+
+  // No dev server needed - we build directly to esphome_dashboard/static
+  // The develop script uses --watch mode to rebuild on changes
+
+  // Add plugin to fix manifest format for ESPHome
+  config.plugins.push(new FixManifestPlugin());
+
+  return config;
+};
+
+module.exports = isProdBuild
+  ? createConfig({ isProdBuild: true })
+  : createConfig({ isProdBuild: false });

script/build

@@ -5,8 +5,10 @@ set -e
 
 cd "$(dirname "$0")/.."
 
-rm -rf esphome_dashboard
+if [ ! -d "./node_modules" ]; then
+    echo "Directory /node_modules DOES NOT exists."
+    echo "Running npm install"
+    npm install
+fi
 
-cp -r raw_package esphome_dashboard
-
-NODE_ENV=production npm exec -- rollup -c
+NODE_ENV=production exec ./node_modules/.bin/rspack build --config rspack.config.js

script/develop

@@ -5,8 +5,11 @@ set -e
 
 cd "$(dirname "$0")/.."
 
-rm -rf esphome_dashboard
-
-cp -r raw_package esphome_dashboard
-
-npm exec -- rollup -c --watch
+if [ ! -d "./node_modules" ]; then
+    echo "Directory /node_modules DOES NOT exists."
+    echo "Running npm install"
+    npm install
+fi
+
+# Build in watch mode for development, writing directly to esphome_dashboard/static
+exec ./node_modules/.bin/rspack build --watch --config rspack.config.js