Bump @rollup/plugin-node-resolve from 16.0.0 to 16.0.1 (#577)

Bumps [@rollup/plugin-node-resolve](https://github.com/rollup/plugins/tree/HEAD/packages/node-resolve) from 16.0.0 to 16.0.1.
- [Changelog](https://github.com/rollup/plugins/blob/master/packages/node-resolve/CHANGELOG.md)
- [Commits](https://github.com/rollup/plugins/commits/node-resolve-v16.0.1/packages/node-resolve)

---
updated-dependencies:
- dependency-name: "@rollup/plugin-node-resolve"
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

.devcontainer/devcontainer.json

@@ -4,9 +4,9 @@
   "name": "Node.js & TypeScript",
   "build": {
     "dockerfile": "Dockerfile",
-    // Update 'VARIANT' to pick a Node version: 12, 14, 16
+    // Update 'VARIANT' to pick a Node version: 12, 14, 16, 18, 20
     "args": {
-      "VARIANT": "16"
+      "VARIANT": "20"
     }
   },
 

.github/dependabot.yml

@@ -1,12 +1,10 @@
-# Basic dependabot.yml file with
-# minimum configuration for two package managers
-
 version: 2
 updates:
-  # Enable version updates for npm
-  - package-ecosystem: "npm"
-    # Look for `package.json` and `lock` files in the `root` directory
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+      interval: weekly
+  - package-ecosystem: "npm"
     directory: "/"
-    # Check the npm registry for updates every day (weekdays)
     schedule:
       interval: "weekly"

.github/release-drafter.yml

@@ -1,3 +1,11 @@
+categories:
+  - title: "Breaking Changes"
+    labels:
+      - "breaking change"
+  - title: "Dependencies"
+    collapse-after: 1
+    labels:
+      - "dependencies"
 template: |
   ## What's Changed
 

.github/workflows/ci.yml

@@ -14,11 +14,15 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
+      - name: Install jq tool
+        run: |
+          sudo apt-get update
+          sudo apt-get install jq
       - name: Use Node.js
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v4
         with:
           node-version: 16
       - run: npm ci
       - run: script/build
-      - run: npm exec prettier --check src
+      - run: npm exec -- prettier --check src

.github/workflows/npmpublish.yml

@@ -11,8 +11,12 @@ jobs:
   publish-npm:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
+      - uses: actions/checkout@v4
+      - name: Install jq tool
+        run: |
+          sudo apt-get update
+          sudo apt-get install jq
+      - uses: actions/setup-node@v4
         with:
           node-version: 16
           registry-url: https://registry.npmjs.org/

.github/workflows/release-drafter.yml

@@ -9,6 +9,6 @@ jobs:
   update_release_draft:
     runs-on: ubuntu-latest
     steps:
-      - uses: release-drafter/release-drafter@v5
+      - uses: release-drafter/release-drafter@v6
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

LICENSE

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

README.md

@@ -1,6 +1,6 @@
 # ESP Web Tools
 
-Allow flashing ESPHome or other ESP-based firmwares via the browser. Will automatically detect the board type and select a supported firmware.
+Allow flashing ESPHome or other ESP-based firmwares via the browser. Will automatically detect the board type and select a supported firmware. [See website for full documentation.](https://esphome.github.io/esp-web-tools/)
 
 ```html
 <esp-web-install-button
@@ -8,43 +8,63 @@ Allow flashing ESPHome or other ESP-based firmwares via the browser. Will automa
 ></esp-web-install-button>
 ```
 
-Manifest definition:
+Example manifest:
 
 ```json
 {
   "name": "ESPHome",
+  "version": "2021.10.3",
+  "home_assistant_domain": "esphome",
+  "funding_url": "https://esphome.io/guides/supporters.html",
   "builds": [
     {
       "chipFamily": "ESP32",
-      "improv": true,
       "parts": [
-        { "filename": "bootloader.bin", "offset": 4096 },
-        { "filename": "partitions.bin", "offset": 32768 },
-        { "filename": "ota.bin", "offset": 57344 },
-        { "filename": "firmware.bin", "offset": 65536 }
+        { "path": "bootloader_dout_40m.bin", "offset": 4096 },
+        { "path": "partitions.bin", "offset": 32768 },
+        { "path": "boot_app0.bin", "offset": 57344 },
+        { "path": "esp32.bin", "offset": 65536 }
+      ]
+    },
+    {
+      "chipFamily": "ESP32-C3",
+      "parts": [
+        { "path": "bootloader_dout_40m.bin", "offset": 0 },
+        { "path": "partitions.bin", "offset": 32768 },
+        { "path": "boot_app0.bin", "offset": 57344 },
+        { "path": "esp32-c3.bin", "offset": 65536 }
+      ]
+    },
+    {
+      "chipFamily": "ESP32-S2",
+      "parts": [
+        { "path": "bootloader_dout_40m.bin", "offset": 4096 },
+        { "path": "partitions.bin", "offset": 32768 },
+        { "path": "boot_app0.bin", "offset": 57344 },
+        { "path": "esp32-s2.bin", "offset": 65536 }
+      ]
+    },
+    {
+      "chipFamily": "ESP32-S3",
+      "parts": [
+        { "path": "bootloader_dout_40m.bin", "offset": 4096 },
+        { "path": "partitions.bin", "offset": 32768 },
+        { "path": "boot_app0.bin", "offset": 57344 },
+        { "path": "esp32-s3.bin", "offset": 65536 }
       ]
     },
     {
       "chipFamily": "ESP8266",
       "parts": [
-        { "filename": "esp8266.bin", "offset": 0 },
+        { "path": "esp8266.bin", "offset": 0 }
       ]
     }
   ]
 }
 ```
 
-Allows for optionally passing an attribute to trigger an erase before installation.
-
-```html
-<esp-web-install-button
-  manifest="firmware_esphome/manifest.json"
-  erase-first
-></esp-web-install-button>
-```
-
-All attributes can also be set via properties (`manifest`, `eraseFirst`)
-
 ## Development
 
-Run `script/develop`. This starts a server. Open it on http://localhost:5000.
+Run `script/develop`. This starts a server. Open it on http://localhost:5001.
+
+[![ESPHome - A project from the Open Home Foundation](https://www.openhomefoundation.org/badges/esphome.png)](https://www.openhomefoundation.org/)

firmware_build/manifest.json

@@ -1,19 +0,0 @@
-{
-  "name": "ESPHome",
-  "builds": [
-    {
-      "chipFamily": "ESP32",
-      "improv": true,
-      "parts": [
-        { "path": "bootloader.bin", "offset": 4096 },
-        { "path": "partitions.bin", "offset": 32768 },
-        { "path": "ota.bin", "offset": 57344 },
-        { "path": "firmware.bin", "offset": 65536 }
-      ]
-    },
-    {
-      "chipFamily": "ESP8266",
-      "parts": [{ "path": "esp8266.bin", "offset": 0 }]
-    }
-  ]
-}

index.html

@@ -1,6 +1,40 @@
+<!doctype html>
 <html>
   <head>
+    <meta charset="utf-8" />
     <title>ESP Web Tools</title>
+    <meta
+      name="description"
+      content="Easily allow users to flash new firmware for their ESP-devices on the web."
+    />
+    <meta name="viewport" content="width=device-width" />
+
+    <meta property="og:title" content="ESP Web Tools" />
+    <meta property="og:site_name" content="ESP Web Tools" />
+    <meta
+      property="og:url"
+      content="https://esphome.github.io/esp-web-tools/"
+    />
+    <meta property="og:type" content="website" />
+    <meta
+      property="og:description"
+      content="Easily allow users to flash new firmware for their ESP-devices on the web."
+    />
+    <meta
+      property="og:image"
+      content="https://esphome.github.io/esp-web-tools/static/social.png"
+    />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="ESP Web Tools" />
+    <meta
+      name="twitter:description"
+      content="Easily allow users to flash new firmware for their ESP-devices on the web."
+    />
+    <meta
+      name="twitter:image"
+      content="https://esphome.github.io/esp-web-tools/static/social.png"
+    />
+    <meta name="color-scheme" content="dark light" />
     <style>
       body {
         font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI",
@@ -14,12 +48,62 @@
         margin: 0 auto;
         padding: 12px;
       }
-      esp-web-flash-log {
+      h2 {
+        margin-top: 2em;
+      }
+      h3 {
+        margin-top: 1.5em;
+      }
+      .projects {
+        display: flex;
+        text-align: center;
+        flex-wrap: wrap;
+        gap: 24px;
+        justify-content: center;
+      }
+      .projects a {
+        color: initial;
+        text-decoration: none;
+      }
+      .project .logo img {
+        height: 50px;
+      }
+      .project .name {
         margin-top: 8px;
       }
       a {
         color: #03a9f4;
       }
+      .screenshot {
+        text-align: center;
+      }
+      .screenshot img {
+        max-width: 100%;
+        box-shadow:
+          rgb(0 0 0 / 20%) 0px 2px 1px -1px,
+          rgb(0 0 0 / 14%) 0px 1px 1px 0px,
+          rgb(0 0 0 / 12%) 0px 1px 3px 0px;
+        border-radius: 4px;
+      }
+      .screenshot i {
+        margin-top: 4px;
+        display: block;
+      }
+      .videoWrapper {
+        position: relative;
+        padding-bottom: 56.25%; /* 16:9 */
+        height: 0;
+        margin-bottom: 25px;
+        background: #ccc;
+      }
+      .hidden {
+        display: none;
+      }
+      .content pre {
+        display: block;
+        padding-left: 8px;
+        overflow-y: scroll;
+      }
       .footer {
         margin-top: 24px;
         border-top: 1px solid #ccc;
@@ -30,13 +114,33 @@
         font-style: italic;
         margin-top: 16px;
       }
+      table {
+        border-spacing: 0;
+      }
+      td {
+        padding: 8px;
+        border-bottom: 1px solid #ccc;
+      }
+      @media (prefers-color-scheme: dark) {
+        body {
+          background-color: #333;
+          color: #fff;
+        }
+        a {
+          color: #58a6ff;
+        }
+      }
     </style>
+    <script
+      type="module"
+      src="https://unpkg.com/@justinribeiro/lite-youtube@1.4.0/lite-youtube.js"
+    ></script>
     <script module>
       import(
         // In development we import locally.
         window.location.hostname === "localhost"
           ? "/dist/web/install-button.js"
-          : "https://unpkg.com/esp-web-tools@2.0.0/dist/web/install-button.js?module"
+          : "https://unpkg.com/esp-web-tools/dist/web/install-button.js?module"
       );
     </script>
   </head>
@@ -44,94 +148,334 @@
     <div class="content">
       <h1>ESP Web Tools</h1>
       <p>
-        ESP Web Tools is a set of open source tools to allow working with ESP
-        devices in the browser.
-        <a href="https://github.com/esphome/esp-web-tools"
-          >The code is available on GitHub.</a
-        >
+        User friendly tools to manage ESP8266 and ESP32 devices in the browser:
       </p>
+      <ul>
+        <li>Install &amp; update firmware</li>
+        <li>Connect device to the Wi-Fi network</li>
+        <li>Visit the device's hosted web interface</li>
+        <li>Access logs and send terminal commands</li>
+        <li>
+          Add devices to
+          <a href="https://www.home-assistant.io">Home Assistant</a>
+        </li>
+      </ul>
+      <div class="videoWrapper">
+        <lite-youtube
+          videoid="E8bdATqXM8c"
+          videotitle="ESP Web Tools in action"
+        ></lite-youtube>
+      </div>
+
+      <h2 id="demo">Try a live demo</h2>
       <p>
-        To try it out and install
-        <a href="https://esphome.io">the ESPHome firmware</a>, connect an ESP to
-        your computer and hit the button:
+        This demo will install
+        <a href="https://esphome.io">ESPHome</a>. To get started, connect an ESP
+        device to your computer and hit the button:
       </p>
       <esp-web-install-button
-        manifest="firmware_build/manifest.json"
-      ></esp-web-install-button>
-      <p>
-        <i>
-          Note, this only works in desktop Chrome and Edge. Android support
-          should be possible but has not been implemented yet.
+        manifest="https://firmware.esphome.io/esp-web-tools/manifest.json"
+      >
+        <i slot="unsupported">
+          The demo is not available because your browser does not support Web
+          Serial. Open this page in Google Chrome or Microsoft Edge instead<span
+            class="not-supported-i hidden"
+          >
+            (but not on your iOS device)</span
+          >.
         </i>
-      </p>
-      <p>
-        This works by combining
+      </esp-web-install-button>
+
+      <h2 id="used-by">Products using ESP Web Tools</h2>
+      <div class="projects">
+        <a href="https://install.wled.me" target="_blank" class="project">
+          <div class="logo">
+            <img src="static/logos/wled.png" alt="WLED logo" />
+          </div>
+          <div class="name">WLED</div>
+        </a>
         <a
-          href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Serial_API"
-          >Web Serial</a
+          href="https://arendst.github.io/Tasmota-firmware/"
+          target="_blank"
+          class="project"
         >
-        with a manifest which describes the firmware. It will automatically
-        detect the type of the connected ESP device and find the right firmware
-        files in the manifest.
-      </p>
-      <h2>Using ESP Web Tools on your website</h2>
+          <div class="logo">
+            <img src="static/logos/tasmota.svg" alt="Tasmota logo" />
+          </div>
+          <div class="name">Tasmota</div>
+        </a>
+        <a href="https://td-er.nl/ESPEasy/" target="_blank" class="project">
+          <div class="logo">
+            <img src="static/logos/espeasy.png" alt="ESPEasy logo" />
+          </div>
+          <div class="name">ESPEasy</div>
+        </a>
+        <a
+          href="https://canair.io/installer.html"
+          target="_blank"
+          class="project"
+        >
+          <div class="logo">
+            <img src="static/logos/canairio.png" alt="CanAirIO logo" />
+          </div>
+          <div class="name">CanAirIO</div>
+        </a>
+        <a href="https://web.esphome.io" target="_blank" class="project">
+          <div class="logo">
+            <img src="static/logos/esphome.svg" alt="ESPHome logo" />
+          </div>
+          <div class="name">ESPHome</div>
+        </a>
+        <a
+          href="https://sle118.github.io/squeezelite-esp32-installer/"
+          target="_blank"
+          class="project"
+        >
+          <div class="logo">
+            <img
+              src="static/logos/squeezelite-esp32.png"
+              alt="Squeezelite-ESP32 logo"
+            />
+          </div>
+          <div class="name">Squeezelite-ESP32</div>
+        </a>
+        <a
+          href="https://2smart.com/docs-resources/platform-updates/platform-updates-13-07-2022"
+          target="_blank"
+          class="project"
+        >
+          <div class="logo">
+            <img src="static/logos/2smart.png" alt="2Smart logo" />
+          </div>
+          <div class="name">2Smart</div>
+        </a>
+        <a href="https://clockwise.page" target="_blank" class="project">
+          <div class="logo">
+            <img src="static/logos/clockwise.png" alt="Clockwise logo" />
+          </div>
+          <div class="name">Clockwise</div>
+        </a>
+        <a
+          href="https://sblantipodi.github.io/glow_worm_luciferin"
+          target="_blank"
+          class="project"
+        >
+          <div class="logo">
+            <img
+              src="static/logos/luciferin_logo.png"
+              alt="Firefly Luciferin logo"
+            />
+          </div>
+          <div class="name">Luciferin</div>
+        </a>
+        <a
+          href="https://install.openepaperlink.de"
+          target="_blank"
+          class="project"
+        >
+          <div class="logo">
+            <img
+              src="static/logos/openepaperlink.png"
+              alt="OpenEpaperLink logo"
+            />
+          </div>
+          <div class="name">OpenEpaperLink</div>
+        </a>
+        <a href="https://openspool.io" target="_blank" class="project">
+          <div class="logo">
+            <img src="static/logos/openspool.png" alt="OpenSpool logo" />
+          </div>
+          <div class="name">OpenSpool</div>
+        </a>
+        <a href="https://usetrmnl.com/flash" target="_blank" class="project">
+          <div class="logo">
+            <img src="static/logos/trmnl.png" alt="TRMNL logo" />
+          </div>
+          <div class="name">TRMNL</div>
+        </a>
+        <a href="https://nspanelmanager.com" target="_blank" class="project">
+          <div class="logo">
+            <img src="static/logos/nspanelmanager.svg" alt="NSPanelManager logo" />
+          </div>
+          <div class="name">NSPanel Manager</div>
+        </a>
+      </div>
+
+      <h2>How it works</h2>
       <p>
-        To add this to your own website, create a manifest and add the button to
-        your website. Make sure you update the manifest attribute to point at
-        your manifest.
+        ESP Web Tools works by combining
+        <a href="https://developer.mozilla.org/docs/Web/API/Web_Serial_API"
+          >Web Serial</a
+        >, <a href="https://www.improv-wifi.com/">Improv Wi-Fi</a> (optional),
+        and a manifest which describes the firmware. ESP Web Tools detects the
+        chipset of the connected ESP device and automatically selects the right
+        firmware variant from the manifest.
+      </p>
+      <p>
+        Web Serial is available in Google Chrome and Microsoft Edge
+        browsers<span class="not-supported-i hidden">
+          (but not on your iOS device)</span
+        >. Android support should be possible but has not been implemented yet.
+      </p>
+
+      <h3 id="improv">Configuring Wi-Fi</h3>
+      <p>
+        ESP Web Tools supports the
+        <a href="https://www.improv-wifi.com/serial"
+          >Improv Wi-Fi serial standard</a
+        >. This is an open standard to allow configuring Wi-Fi via the serial
+        port.
+      </p>
+      <p>
+        If the firmware supports Improv, a user will be asked to connect the
+        device to the network after installing the firmware. Once connected, the
+        device can send the user to a URL to finish configuration. For example,
+        this can be a link to the device's IP address where it serves a local
+        UI.
+      </p>
+      <p>
+        At any time in the future a user can use ESP Web Tools to find the
+        device link or to reconfigure the Wi-Fi settings without doing a
+        reinstall.
+      </p>
+      <p class="screenshot">
+        <img
+          src="./static/screenshots/dashboard.png"
+          alt="Screenshot showing ESP Web Tools dialog offering visting the device, adding it to Home Assistant, change Wi-Fi, show logs and console and reset data."
+        />
+        <i>Screenshot showing the ESP Web Tools interface</i>
+      </p>
+
+      <h3 id="logs">Viewing logs & sending commands</h3>
+      <p>
+        ESP Web Tools allows users to open a serial console to see the logs and
+        send commands.
+      </p>
+      <p class="screenshot">
+        <img
+          src="./static/screenshots/logs.png"
+          alt="Screenshot showing ESP Web Tools dialog with a console showing ESPHome logs and a terminal prompt to sent commands."
+        />
+        <i>Screenshot showing the ESP Web Tools logs & console</i>
+      </p>
+
+      <h2 id="add-website">Adding ESP Web Tools to your website</h2>
+      <p>
+        To add this to your own website, you need to include the ESP Web Tools
+        JavaScript files on your website, create a manifest file and add the ESP
+        Web Tools button HTML.
+      </p>
+      <p>
+        <a href="https://github.com/balloob/squeezelite-esp32-install"
+          >Click here to see a full example.</a
+        >
+      </p>
+      <p>
+        <b>Step 1:</b> Load ESP Web Tools JavaScript on your website by adding
+        the following HTML snippet.
       </p>
       <pre>
 &lt;script
   type="module"
-  src="https://unpkg.com/esp-web-tools@1.0.3/dist/web/install-button.js?module"
->&lt;/script>
-
+  src="https://unpkg.com/esp-web-tools@10/dist/web/install-button.js?module"
+>&lt;/script></pre
+      >
+      <p>
+        (If you prefer to locally host the JavaScript,
+        <a href="https://unpkg.com/browse/esp-web-tools/dist/web/"
+          >download it here</a
+        >)
+      </p>
+      <p>
+        <b>Step 2:</b> Find a place on your page where you want the button to
+        appear and include the following bit of HTML. Update the
+        <code>manifest</code> attribute to point at your manifest file.
+      </p>
+      <pre>
 &lt;esp-web-install-button
-  manifest="firmware_build/manifest.json"
+  manifest="https://firmware.esphome.io/esp-web-tools/manifest.json"
 >&lt;/esp-web-install-button></pre
       >
       <p>
-        Your website needs to be served over <code>https://</code>. If your
-        manifest is hosted on another server, make sure you configure
-        <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS"
+        <b>Note:</b> ESP Web Tools requires that your website is served over
+        <code>https://</code> to work. This is a Web Serial security
+        requirement.
+      </p>
+      <p>
+        If your manifest or the firmware files are hosted on another server,
+        make sure you configure
+        <a href="https://developer.mozilla.org/docs/Web/HTTP/CORS"
           >the CORS-headers</a
         >
-        for your manifest and firmware files such that your website is allowed
-        to fetch those files by adding the header
+        such that your website is allowed to fetch those files by adding the
+        header
         <code
           >Access-Control-Allow-Origin: https://domain-of-your-website.com</code
         >.
       </p>
 
       <p>
-        Add the attribute <code>erase-first</code> if you want to first fully
-        erase the ESP prior to installation.
+        ESP Web Tools can also be integrated in your projects by installing it
+        <a href="https://www.npmjs.com/package/esp-web-tools">via NPM</a>.
+      </p>
+      <h3 id="preparing-firmware">Preparing your firmware</h3>
+      <p>
+        If you have ESP32 firmware and are using ESP-IDF framework v4 or later,
+        you will need to create a merged version of your firmware before being
+        able to use it with ESP Web Tools. If you use ESP8266 or ESP32 with
+        ESP-IDF v3 or earlier, you can skip this section.
       </p>
       <p>
-        ESP Web Tools can also be integrated in your projects by installing it
-        via NPM:<br />
-        <code>npm install --save esp-web-tools</code>
+        ESP32 firmware is split into 4 different files. When these files are
+        installed using the command-line tool <code>esptool</code>, it will
+        patch flash frequency, flash size and flash mode to match the target
+        device. ESP Web Tools is not able to do this on the fly, so you will
+        need to use <code>esptool</code> to create the single binary file and
+        use that with ESP Web Tools.
+      </p>
+      <p>
+        Create a single binary using <code>esptool</code> with the following
+        command:
+      </p>
+      <pre>
+esptool --chip esp32 merge_bin \
+  -o merged-firmware.bin \
+  --flash_mode dio \
+  --flash_freq 40m \
+  --flash_size 4MB \
+  0x1000 bootloader.bin \
+  0x8000 partitions.bin \
+  0xe000 boot.bin \
+  0x10000 your_app.bin</pre
+      >
+      <p>
+        If your memory type is <code>opi_opi</code> or <code>opi_qspi</code>,
+        set your flash mode to be <code>dout</code>. Else, if your flash mode is
+        <code>qio</code> or <code>qout</code>, override your flash mode to be
+        <code>dio</code>.
       </p>
       <h3 id="manifest">Creating your manifest</h3>
       <p>
-        ESP Web Tools manifest describe the firmware that you want to install.
-        It allows specifying different builds for the different types of ESP
-        devices. Current supported devices are ESP8266, ESP32 and ESP32-S2. The
-        correct build will be automatically selected based on the type of the
-        ESP device we detect via the serial port.
+        Manifests describe the firmware that you want to offer the user to
+        install. It allows specifying different builds for the different types
+        of ESP devices. Current supported chip families are
+        <code>ESP8266</code>, <code>ESP32</code>, <code>ESP32-C2</code>,
+        <code>ESP32-C3</code>, <code>ESP32-C6</code>, <code>ESP32-H2</code>,
+        <code>ESP32-S2</code> and <code>ESP32-S3</code>. The correct build will
+        be automatically selected based on the type of the connected ESP device.
       </p>
       <pre>
 {
   "name": "ESPHome",
+  "version": "2021.11.0",
+  "home_assistant_domain": "esphome",
+  "funding_url": "https://esphome.io/guides/supporters.html",
+  "new_install_prompt_erase": false,
   "builds": [
     {
       "chipFamily": "ESP32",
-      "improv": true,
       "parts": [
-        { "path": "bootloader.bin", "offset": 4096 },
-        { "path": "partitions.bin", "offset": 32768 },
-        { "path": "ota.bin", "offset": 57344 },
-        { "path": "firmware.bin", "offset": 65536 }
+        { "path": "merged-firmware.bin", "offset": 0 },
       ]
     },
     {
@@ -144,45 +488,133 @@
 }</pre
       >
       <p>
-        Each build contains a list of parts to be flashed to the ESP device.
+        Each build contains a list of parts to be installed to the ESP device.
         Each part consists of a path to the file and an offset on the flash
         where it should be installed. Part paths are resolved relative to the
         path of the manifest, but can also be URLs to other hosts.
       </p>
       <p>
-        Each build also allows you to specify if it supports
-        <a href="https://www.improv-wifi.com">the Improv WiFi standard</a>. If
-        it does, the user will be offered to configure the WiFi after flashing
-        is done.
+        If your firmware is supported by Home Assistant, you can add the
+        optional key <code>home_assistant_domain</code>. If present, ESP Web
+        Tools will link the user to add this device to Home Assistant.
       </p>
-      <h3>Customizing the look and feel</h3>
       <p>
-        You can customize both the activation button and the message that is
-        shown when the user uses an unsupported browser. This can be done using
-        the <code>activate</code> and <code>unsupported</code> slots:
+        By default a new installation will erase all data before installation.
+        If you want to leave this choice to the user, set the optional manifest
+        key
+        <code>new_install_prompt_erase</code> to <code>true</code>. ESP Web
+        Tools offers users a new installation if it is unable to detect the
+        current firmware of the device (via Improv Serial) or if the detected
+        firmware does not match the name specififed in the manifest.
+      </p>
+      <p>
+        When a firmware is first installed on a device, it might need to do some
+        time consuming tasks like initializing the file system. By default ESP
+        Web Tools will wait 10 seconds to receive an Improv Serial response to
+        indicate that the boot is completed. You can increase this timeout by
+        setting the optional manifest key
+        <code>new_install_improv_wait_time</code> to the number of seconds to
+        wait. Set to <code>0</code> to disable Improv Serial detection.
+      </p>
+      <p>
+        If your product accepts donations you can add
+        <code>funding_url</code> to your manifest. This allows you to link to
+        your page explaining the user how they can fund development. This link
+        is visible in the ESP Web Tools menu when connected to a device running
+        your firmware (as detected via Improv).
+      </p>
+      <p>
+        ESP Web Tools allows you to provide your own check if the device is
+        running the same firmware as specified in the manifest. This check can
+        be setting the <code>overrides</code> property on
+        <code>&lt;esp-web-install-button&gt;</code>. The value is an object
+        containing a
+        <code>checkSameFirmware(manifest, improvInfo)</code> function. The
+        <code>manifest</code> parameter is your manifest and
+        <code>improvInfo</code> is the information returned from Improv:
+        <code>{ name, firmware, version, chipFamily }</code>. This check is only
+        called if the device firmware was detected via Improv.
+      </p>
+      <pre>
+const button = document.querySelector('esp-web-install-button');
+button.overrides = {
+  checkSameFirmware(manifest, improvInfo) {
+    const manifestFirmware = manifest.name.toLowerCase();
+    const deviceFirmware = improvInfo.firmware.toLowerCase();
+    return manifestFirmware.includes(deviceFirmware);
+  }
+};</pre
+      >
+
+      <h3 id="customize">Customizing the look and feel</h3>
+      <p>
+        You can change the colors of the default UI elements with CSS custom
+        properties (variables), the following variables are available:
+      </p>
+      <ul>
+        <li><code>--esp-tools-button-color</code></li>
+        <li><code>--esp-tools-button-text-color</code></li>
+        <li><code>--esp-tools-button-border-radius</code></li>
+      </ul>
+      <p>There are also some attributes that can be used for styling:</p>
+      <table>
+        <tr>
+          <td><code>install-supported</code></td>
+          <td>Added if installing firmware is supported</td>
+        </tr>
+        <tr>
+          <td>
+            <code>install-unsupported</code>
+          </td>
+          <td>Added if installing firmware is not supported</td>
+        </tr>
+      </table>
+      <h4>Replace the button and message with a custom one</h4>
+      <p>
+        You can replace both the activation button and the message that is shown
+        when the user uses an unsupported browser or non-secure context with
+        your own elements. This can be done using the <code>activate</code>,
+        <code>unsupported</code> and <code>not-allowed</code> slots:
       </p>
       <pre>
 &lt;esp-web-install-button
-  manifest="firmware_build/manifest.json"
-  erase-first
+  manifest="https://firmware.esphome.io/esp-web-tools/manifest.json"
 >
   &lt;button slot="activate">Custom install button&lt;/button>
   &lt;span slot="unsupported">Ah snap, your browser doesn't work!&lt;/span>
+  &lt;span slot="not-allowed">Ah snap, you are not allowed to use this on HTTP!&lt;/span>
 &lt;/esp-web-install-button>
     </pre
       >
+
+      <h2>Why we created ESP Web Tools</h2>
+      <div class="videoWrapper">
+        <lite-youtube
+          videoid="6ZMXE5PXPqU"
+          videotitle="Why we created ESP Web Tools"
+          videoStartAt="1255"
+        ></lite-youtube>
+      </div>
+
       <div class="footer">
-        <div>
-          ESP Web Tools –
-          <a href="https://github.com/esphome/esp-web-tools">GitHub</a>
-        </div>
         <div class="initiative">
           ESP Web Tools is a project by
-          <a href="https://esphome.io">ESPHome</a>.<br />
+          <a href="https://esphome.io">ESPHome</a>,
+          <a href="https://www.openhomefoundation.org">Open Home Foundation</a
+          >.<br />
           Development is funded by
           <a href="https://www.nabucasa.com">Nabu Casa</a>.
         </div>
+        <div>
+          ESP Web Tools is
+          <a href="https://github.com/esphome/esp-web-tools">open source</a>.
+        </div>
       </div>
     </div>
+    <script>
+      if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
+        document.querySelector(".not-supported-i").classList.remove("hidden");
+      }
+    </script>
   </body>
 </html>

package.json

@@ -1,33 +1,34 @@
 {
   "name": "esp-web-tools",
-  "version": "2.0.0",
+  "version": "10.1.0",
   "description": "Web tools for ESP devices",
   "main": "dist/install-button.js",
-  "repository": "https://github.com/esphome/web",
+  "repository": "https://github.com/esphome/esp-web-tools",
   "author": "ESPHome maintainers",
   "license": "Apache-2.0",
   "scripts": {
     "prepublishOnly": "script/build"
   },
   "devDependencies": {
-    "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^13.0.0",
-    "@rollup/plugin-typescript": "^8.2.1",
-    "@types/w3c-web-serial": "^1.0.1",
-    "@types/web-bluetooth": "^0.0.9",
-    "prettier": "^2.3.0",
-    "rollup": "^2.50.2",
-    "rollup-plugin-terser": "^7.0.2",
-    "serve": "^11.3.2",
-    "typescript": "^4.3.2"
+    "@babel/preset-env": "^7.26.0",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^28.0.2",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^16.0.0",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^12.1.2",
+    "@types/w3c-web-serial": "^1.0.7",
+    "prettier": "^3.4.2",
+    "rollup": "^4.29.1",
+    "serve": "^14.2.4",
+    "typescript": "^5.7.2"
   },
   "dependencies": {
-    "@material/mwc-button": "^0.21.0",
-    "@material/mwc-circular-progress": "^0.21.0",
-    "@material/mwc-dialog": "^0.21.0",
-    "@material/mwc-textfield": "^0.21.0",
-    "esp-web-flasher": "^1.0.3",
-    "lit": "^2.0.0-rc.2",
-    "tslib": "^2.2.0"
+    "@material/web": "^2.2.0",
+    "esptool-js": "^0.5.3",
+    "improv-wifi-serial-sdk": "^2.5.0",
+    "lit": "^3.2.1",
+    "pako": "^2.1.0",
+    "tslib": "^2.8.1"
   }
 }

rollup.config.js

@@ -1,28 +0,0 @@
-import { nodeResolve } from "@rollup/plugin-node-resolve";
-import json from "@rollup/plugin-json";
-import { terser } from "rollup-plugin-terser";
-
-const config = {
-  input: "dist/install-button.js",
-  output: {
-    dir: "dist/web",
-    format: "module",
-  },
-  external: ["https://www.improv-wifi.com/sdk-js/launch-button.js"],
-  preserveEntrySignatures: false,
-  plugins: [nodeResolve(), json()],
-};
-
-if (process.env.NODE_ENV === "production") {
-  config.plugins.push(
-    terser({
-      ecma: 2019,
-      toplevel: true,
-      output: {
-        comments: false,
-      },
-    })
-  );
-}
-
-export default config;

rollup.config.mjs

@@ -0,0 +1,51 @@
+import nodeResolve from "@rollup/plugin-node-resolve";
+import json from "@rollup/plugin-json";
+import terser from "@rollup/plugin-terser";
+import babel from "@rollup/plugin-babel";
+import commonjs from "@rollup/plugin-commonjs";
+
+const config = {
+  input: "dist/install-button.js",
+  output: {
+    dir: "dist/web",
+    format: "module",
+  },
+  external: ["https://www.improv-wifi.com/sdk-js/launch-button.js"],
+  preserveEntrySignatures: false,
+  plugins: [
+    commonjs(),
+    nodeResolve({
+      browser: true,
+      preferBuiltins: false,
+    }),
+    babel({
+      babelHelpers: "bundled",
+      presets: [
+        [
+          "@babel/preset-env",
+          {
+            targets: {
+              // We use unpkg as CDN and it doesn't bundle modern syntax
+              chrome: "84",
+            },
+          },
+        ],
+      ],
+    }),
+    json(),
+  ],
+};
+
+if (process.env.NODE_ENV === "production") {
+  config.plugins.push(
+    terser({
+      ecma: 2019,
+      toplevel: true,
+      format: {
+        comments: false,
+      },
+    })
+  );
+}
+
+export default config;

script/build

@@ -2,6 +2,7 @@
 set -e
 
 cd "$(dirname "$0")/.."
+echo 'export const version =' `jq .version package.json`";" > src/version.ts
 
 rm -rf dist
 NODE_ENV=production npm exec -- tsc

script/develop

@@ -1,6 +1,10 @@
 # Stop on errors
 set -e
 
+if [ -z "$PORT" ]; then
+  PORT=5001
+fi
+
 cd "$(dirname "$0")/.."
 
 rm -rf dist
@@ -9,9 +13,8 @@ rm -rf dist
 trap "kill 0" EXIT
 
 # Run tsc once as rollup expects those files
-tsc || true
+npm exec -- tsc || true
 
-npm exec -- serve &
+npm exec -- serve -p "$PORT" &
 npm exec -- tsc --watch &
-npm exec -- rollup -c --watch &
-wait
+npm exec -- rollup -c --watch

src/components/ew-checkbox.ts

@@ -0,0 +1,14 @@
+import { Checkbox } from "@material/web/checkbox/internal/checkbox.js";
+import { styles } from "@material/web/checkbox/internal/checkbox-styles.js";
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ew-checkbox": EwCheckbox;
+  }
+}
+
+export class EwCheckbox extends Checkbox {
+  static override styles = [styles];
+}
+
+customElements.define("ew-checkbox", EwCheckbox);

src/components/ew-circular-progress.ts

@@ -0,0 +1,14 @@
+import { CircularProgress } from "@material/web/progress/internal/circular-progress.js";
+import { styles } from "@material/web/progress/internal/circular-progress-styles.js";
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ew-circular-progress": EwCircularProgress;
+  }
+}
+
+export class EwCircularProgress extends CircularProgress {
+  static override styles = [styles];
+}
+
+customElements.define("ew-circular-progress", EwCircularProgress);

src/components/ew-dialog.ts

@@ -0,0 +1,14 @@
+import { Dialog } from "@material/web/dialog/internal/dialog.js";
+import { styles } from "@material/web/dialog/internal/dialog-styles.js";
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ew-dialog": EwDialog;
+  }
+}
+
+export class EwDialog extends Dialog {
+  static override styles = [styles];
+}
+
+customElements.define("ew-dialog", EwDialog);

src/components/ew-divider.ts

@@ -0,0 +1,14 @@
+import { Divider } from "@material/web/divider/internal/divider.js";
+import { styles } from "@material/web/divider/internal/divider-styles.js";
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ew-divider": EwDivider;
+  }
+}
+
+export class EwDivider extends Divider {
+  static override styles = [styles];
+}
+
+customElements.define("ew-divider", EwDivider);

src/components/ew-filled-select.ts

@@ -0,0 +1,15 @@
+import { FilledSelect } from "@material/web/select/internal/filled-select.js";
+import { styles } from "@material/web/select/internal/filled-select-styles.js";
+import { styles as sharedStyles } from "@material/web/select/internal/shared-styles.js";
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ew-filled-select": EwFilledSelect;
+  }
+}
+
+export class EwFilledSelect extends FilledSelect {
+  static override styles = [sharedStyles, styles];
+}
+
+customElements.define("ew-filled-select", EwFilledSelect);

src/components/ew-filled-text-field.ts

@@ -0,0 +1,17 @@
+import { styles as filledStyles } from "@material/web/textfield/internal/filled-styles.js";
+import { FilledTextField } from "@material/web/textfield/internal/filled-text-field.js";
+import { styles as sharedStyles } from "@material/web/textfield/internal/shared-styles.js";
+import { literal } from "lit/static-html.js";
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ew-filled-text-field": EwFilledTextField;
+  }
+}
+
+export class EwFilledTextField extends FilledTextField {
+  static override styles = [sharedStyles, filledStyles];
+  protected override readonly fieldTag = literal`md-filled-field`;
+}
+
+customElements.define("ew-filled-text-field", EwFilledTextField);

src/components/ew-icon-button.ts

@@ -0,0 +1,15 @@
+import { IconButton } from "@material/web/iconbutton/internal/icon-button.js";
+import { styles as sharedStyles } from "@material/web/iconbutton/internal/shared-styles.js";
+import { styles } from "@material/web/iconbutton/internal/standard-styles.js";
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ew-icon-button": EwIconButton;
+  }
+}
+
+export class EwIconButton extends IconButton {
+  static override styles = [sharedStyles, styles];
+}
+
+customElements.define("ew-icon-button", EwIconButton);

src/components/ew-list-item.ts

@@ -0,0 +1,14 @@
+import { ListItemEl as ListItem } from "@material/web/list/internal/listitem/list-item.js";
+import { styles } from "@material/web/list/internal/listitem/list-item-styles.js";
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ew-list-item": EwListItem;
+  }
+}
+
+export class EwListItem extends ListItem {
+  static override styles = [styles];
+}
+
+customElements.define("ew-list-item", EwListItem);

src/components/ew-list.ts

@@ -0,0 +1,14 @@
+import { List } from "@material/web/list/internal/list.js";
+import { styles } from "@material/web/list/internal/list-styles.js";
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ew-list": EwList;
+  }
+}
+
+export class EwList extends List {
+  static override styles = [styles];
+}
+
+customElements.define("ew-list", EwList);

src/components/ew-select-option.ts

@@ -0,0 +1,14 @@
+import { styles } from "@material/web/menu/internal/menuitem/menu-item-styles.js";
+import { SelectOptionEl } from "@material/web/select/internal/selectoption/select-option.js";
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ew-select-option": EwSelectOption;
+  }
+}
+
+export class EwSelectOption extends SelectOptionEl {
+  static override styles = [styles];
+}
+
+customElements.define("ew-select-option", EwSelectOption);

src/components/ew-text-button.ts

@@ -0,0 +1,15 @@
+import { styles as sharedStyles } from "@material/web/button/internal/shared-styles.js";
+import { TextButton } from "@material/web/button/internal/text-button.js";
+import { styles as textStyles } from "@material/web/button/internal/text-styles.js";
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ew-text-button": EwTextButton;
+  }
+}
+
+export class EwTextButton extends TextButton {
+  static override styles = [sharedStyles, textStyles];
+}
+
+customElements.define("ew-text-button", EwTextButton);

src/components/ewt-console.ts

@@ -0,0 +1,167 @@
+import { ColoredConsole, coloredConsoleStyles } from "../util/console-color";
+import { sleep } from "../util/sleep";
+import { LineBreakTransformer } from "../util/line-break-transformer";
+import { TimestampTransformer } from "../util/timestamp-transformer";
+import { Logger } from "../const";
+
+export class EwtConsole extends HTMLElement {
+  public port!: SerialPort;
+  public logger!: Logger;
+  public allowInput = true;
+
+  private _console?: ColoredConsole;
+  private _cancelConnection?: () => Promise<void>;
+
+  public logs(): string {
+    return this._console?.logs() || "";
+  }
+
+  public connectedCallback() {
+    if (this._console) {
+      return;
+    }
+    const shadowRoot = this.attachShadow({ mode: "open" });
+
+    shadowRoot.innerHTML = `
+      <style>
+        :host, input {
+          background-color: #1c1c1c;
+          color: #ddd;
+          font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier,
+            monospace;
+          line-height: 1.45;
+          display: flex;
+          flex-direction: column;
+        }
+        form {
+          display: flex;
+          align-items: center;
+          padding: 0 8px 0 16px;
+        }
+        input {
+          flex: 1;
+          padding: 4px;
+          margin: 0 8px;
+          border: 0;
+          outline: none;
+        }
+        ${coloredConsoleStyles}
+      </style>
+      <div class="log"></div>
+      ${
+        this.allowInput
+          ? `<form>
+                >
+                <input autofocus>
+              </form>
+            `
+          : ""
+      }
+    `;
+
+    this._console = new ColoredConsole(this.shadowRoot!.querySelector("div")!);
+
+    if (this.allowInput) {
+      const input = this.shadowRoot!.querySelector("input")!;
+
+      this.addEventListener("click", () => {
+        // Only focus input if user didn't select some text
+        if (getSelection()?.toString() === "") {
+          input.focus();
+        }
+      });
+
+      input.addEventListener("keydown", (ev) => {
+        if (ev.key === "Enter") {
+          ev.preventDefault();
+          ev.stopPropagation();
+          this._sendCommand();
+        }
+      });
+    }
+
+    const abortController = new AbortController();
+    const connection = this._connect(abortController.signal);
+    this._cancelConnection = () => {
+      abortController.abort();
+      return connection;
+    };
+  }
+
+  private async _connect(abortSignal: AbortSignal) {
+    this.logger.debug("Starting console read loop");
+    try {
+      await this.port
+        .readable!.pipeThrough(new TextDecoderStream(), {
+          signal: abortSignal,
+        })
+        .pipeThrough(new TransformStream(new LineBreakTransformer()))
+        .pipeThrough(new TransformStream(new TimestampTransformer()))
+        .pipeTo(
+          new WritableStream({
+            write: (chunk) => {
+              this._console!.addLine(chunk.replace("\r", ""));
+            },
+          }),
+        );
+      if (!abortSignal.aborted) {
+        this._console!.addLine("");
+        this._console!.addLine("");
+        this._console!.addLine("Terminal disconnected");
+      }
+    } catch (e) {
+      this._console!.addLine("");
+      this._console!.addLine("");
+      this._console!.addLine(`Terminal disconnected: ${e}`);
+    } finally {
+      await sleep(100);
+      this.logger.debug("Finished console read loop");
+    }
+  }
+
+  private async _sendCommand() {
+    const input = this.shadowRoot!.querySelector("input")!;
+    const command = input.value;
+    const encoder = new TextEncoder();
+    const writer = this.port.writable!.getWriter();
+    await writer.write(encoder.encode(command + "\r\n"));
+    this._console!.addLine(`> ${command}\r\n`);
+    input.value = "";
+    input.focus();
+    try {
+      writer.releaseLock();
+    } catch (err) {
+      console.error("Ignoring release lock error", err);
+    }
+  }
+
+  public async disconnect() {
+    if (this._cancelConnection) {
+      await this._cancelConnection();
+      this._cancelConnection = undefined;
+    }
+  }
+
+  public async reset() {
+    this.logger.debug("Triggering reset");
+    await this.port.setSignals({
+      dataTerminalReady: false,
+      requestToSend: true,
+    });
+    await sleep(250);
+    await this.port.setSignals({
+      dataTerminalReady: false,
+      requestToSend: false,
+    });
+    await sleep(250);
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+  }
+}
+
+customElements.define("ewt-console", EwtConsole);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ewt-console": EwtConsole;
+  }
+}

src/components/ewt-dialog.ts

@@ -0,0 +1,22 @@
+import { DialogBase } from "@material/mwc-dialog/mwc-dialog-base";
+import { styles } from "@material/mwc-dialog/mwc-dialog.css";
+import { css } from "lit";
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ewt-dialog": EwtDialog;
+  }
+}
+
+export class EwtDialog extends DialogBase {
+  static override styles = [
+    styles,
+    css`
+      .mdc-dialog__title {
+        padding-right: 52px;
+      }
+    `,
+  ];
+}
+
+customElements.define("ewt-dialog", EwtDialog);

src/components/svg.ts

@@ -0,0 +1,61 @@
+import { svg } from "lit";
+
+export const closeIcon = svg`
+  <svg width="24" height="24" viewBox="0 0 24 24">
+    <path
+      fill="currentColor"
+      d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
+    />
+  </svg>
+`;
+
+export const refreshIcon = svg`
+  <svg viewBox="0 0 24 24">
+    <path
+      fill="currentColor"
+      d="M17.65,6.35C16.2,4.9 14.21,4 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20C15.73,20 18.84,17.45 19.73,14H17.65C16.83,16.33 14.61,18 12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6C13.66,6 15.14,6.69 16.22,7.78L13,11H20V4L17.65,6.35Z"
+    />
+  </svg>
+`;
+
+export const listItemInstallIcon = svg`
+  <svg slot="start" viewBox="0 0 24 24">
+    <path d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z" />
+  </svg>
+`;
+
+export const listItemWifi = svg`
+  <svg slot="start" viewBox="0 0 24 24">
+    <path d="M12,21L15.6,16.2C14.6,15.45 13.35,15 12,15C10.65,15 9.4,15.45 8.4,16.2L12,21M12,3C7.95,3 4.21,4.34 1.2,6.6L3,9C5.5,7.12 8.62,6 12,6C15.38,6 18.5,7.12 21,9L22.8,6.6C19.79,4.34 16.05,3 12,3M12,9C9.3,9 6.81,9.89 4.8,11.4L6.6,13.8C8.1,12.67 9.97,12 12,12C14.03,12 15.9,12.67 17.4,13.8L19.2,11.4C17.19,9.89 14.7,9 12,9Z" />
+  </svg>
+`;
+
+export const listItemConsole = svg`
+  <svg slot="start" viewBox="0 0 24 24">
+    <path d="M20,19V7H4V19H20M20,3A2,2 0 0,1 22,5V19A2,2 0 0,1 20,21H4A2,2 0 0,1 2,19V5C2,3.89 2.9,3 4,3H20M13,17V15H18V17H13M9.58,13L5.57,9H8.4L11.7,12.3C12.09,12.69 12.09,13.33 11.7,13.72L8.42,17H5.59L9.58,13Z" />
+  </svg>
+`;
+
+export const listItemVisitDevice = svg`
+  <svg slot="start" viewBox="0 0 24 24">
+  <path d="M16.36,14C16.44,13.34 16.5,12.68 16.5,12C16.5,11.32 16.44,10.66 16.36,10H19.74C19.9,10.64 20,11.31 20,12C20,12.69 19.9,13.36 19.74,14M14.59,19.56C15.19,18.45 15.65,17.25 15.97,16H18.92C17.96,17.65 16.43,18.93 14.59,19.56M14.34,14H9.66C9.56,13.34 9.5,12.68 9.5,12C9.5,11.32 9.56,10.65 9.66,10H14.34C14.43,10.65 14.5,11.32 14.5,12C14.5,12.68 14.43,13.34 14.34,14M12,19.96C11.17,18.76 10.5,17.43 10.09,16H13.91C13.5,17.43 12.83,18.76 12,19.96M8,8H5.08C6.03,6.34 7.57,5.06 9.4,4.44C8.8,5.55 8.35,6.75 8,8M5.08,16H8C8.35,17.25 8.8,18.45 9.4,19.56C7.57,18.93 6.03,17.65 5.08,16M4.26,14C4.1,13.36 4,12.69 4,12C4,11.31 4.1,10.64 4.26,10H7.64C7.56,10.66 7.5,11.32 7.5,12C7.5,12.68 7.56,13.34 7.64,14M12,4.03C12.83,5.23 13.5,6.57 13.91,8H10.09C10.5,6.57 11.17,5.23 12,4.03M18.92,8H15.97C15.65,6.75 15.19,5.55 14.59,4.44C16.43,5.07 17.96,6.34 18.92,8M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" />
+  </svg>
+`;
+
+export const listItemHomeAssistant = svg`
+  <svg slot="start" viewBox="0 0 24 24">
+    <path d="m12.151 1.5882c-.3262 0-.6523.1291-.8996.3867l-8.3848 8.7354c-.0619.0644-.1223.1368-.1807.2154-.0588.0789-.1151.1638-.1688.2534-.2593.4325-.4552.9749-.5232 1.4555-.0026.018-.0076.0369-.0094.0548-.0121.0987-.0184.1944-.0184.2857v8.0124a1.2731 1.2731 0 001.2731 1.2731h7.8313l-3.4484-3.593a1.7399 1.7399 0 111.0803-1.125l2.6847 2.7972v-10.248a1.7399 1.7399 0 111.5276-0v7.187l2.6702-2.782a1.7399 1.7399 0 111.0566 1.1505l-3.7269 3.8831v2.7299h8.174a1.2471 1.2471 0 001.2471-1.2471v-8.0375c0-.0912-.0059-.1868-.0184-.2855-.0603-.4935-.2636-1.0617-.5326-1.5105-.0537-.0896-.1101-.1745-.1684-.253-.0588-.079-.1191-.1513-.181-.2158l-8.3848-8.7363c-.2473-.2577-.5735-.3866-.8995-.3864" />
+  </svg>
+`;
+
+export const listItemEraseUserData = svg`
+  <svg slot="start" viewBox="0 0 24 24">
+    <path d="M15,14C17.67,14 23,15.33 23,18V20H7V18C7,15.33 12.33,14 15,14M15,12A4,4 0 0,1 11,8A4,4 0 0,1 15,4A4,4 0 0,1 19,8A4,4 0 0,1 15,12M5,9.59L7.12,7.46L8.54,8.88L6.41,11L8.54,13.12L7.12,14.54L5,12.41L2.88,14.54L1.46,13.12L3.59,11L1.46,8.88L2.88,7.46L5,9.59Z" />
+  </svg>
+`;
+
+export const listItemFundDevelopment = svg`
+  <svg slot="start" viewBox="0 0 24 24">
+    <path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z" />
+  </svg>
+`;

src/connect.ts

@@ -0,0 +1,42 @@
+import type { InstallButton } from "./install-button.js";
+
+export const connect = async (button: InstallButton) => {
+  import("./install-dialog.js");
+  let port: SerialPort | undefined;
+  try {
+    port = await navigator.serial.requestPort();
+  } catch (err: any) {
+    if ((err as DOMException).name === "NotFoundError") {
+      import("./no-port-picked/index").then((mod) =>
+        mod.openNoPortPickedDialog(() => connect(button)),
+      );
+      return;
+    }
+    alert(`Error: ${err.message}`);
+    return;
+  }
+
+  if (!port) {
+    return;
+  }
+
+  try {
+    await port.open({ baudRate: 115200 });
+  } catch (err: any) {
+    alert(err.message);
+    return;
+  }
+
+  const el = document.createElement("ewt-install-dialog");
+  el.port = port;
+  el.manifestPath = button.manifest || button.getAttribute("manifest")!;
+  el.overrides = button.overrides;
+  el.addEventListener(
+    "closed",
+    () => {
+      port!.close();
+    },
+    { once: true },
+  );
+  document.body.appendChild(el);
+};

src/const.ts

@@ -1,6 +1,19 @@
+export interface Logger {
+  log(msg: string, ...args: any[]): void;
+  error(msg: string, ...args: any[]): void;
+  debug(msg: string, ...args: any[]): void;
+}
+
 export interface Build {
-  chipFamily: "ESP32" | "ESP8266";
-  improv: boolean;
+  chipFamily:
+    | "ESP32"
+    | "ESP32-C2"
+    | "ESP32-C3"
+    | "ESP32-C6"
+    | "ESP32-H2"
+    | "ESP32-S2"
+    | "ESP32-S3"
+    | "ESP8266";
   parts: {
     path: string;
     offset: number;
@@ -9,5 +22,81 @@ export interface Build {
 
 export interface Manifest {
   name: string;
+  version: string;
+  home_assistant_domain?: string;
+  funding_url?: string;
+  /** @deprecated use `new_install_prompt_erase` instead */
+  new_install_skip_erase?: boolean;
+  new_install_prompt_erase?: boolean;
+  /* Time to wait to detect Improv Wi-Fi. Set to 0 to disable. */
+  new_install_improv_wait_time?: number;
   builds: Build[];
 }
+
+export interface BaseFlashState {
+  state: FlashStateType;
+  message: string;
+  manifest?: Manifest;
+  build?: Build;
+  chipFamily?: Build["chipFamily"] | "Unknown Chip";
+}
+
+export interface InitializingState extends BaseFlashState {
+  state: FlashStateType.INITIALIZING;
+  details: { done: boolean };
+}
+
+export interface PreparingState extends BaseFlashState {
+  state: FlashStateType.PREPARING;
+  details: { done: boolean };
+}
+
+export interface ErasingState extends BaseFlashState {
+  state: FlashStateType.ERASING;
+  details: { done: boolean };
+}
+
+export interface WritingState extends BaseFlashState {
+  state: FlashStateType.WRITING;
+  details: { bytesTotal: number; bytesWritten: number; percentage: number };
+}
+
+export interface FinishedState extends BaseFlashState {
+  state: FlashStateType.FINISHED;
+}
+
+export interface ErrorState extends BaseFlashState {
+  state: FlashStateType.ERROR;
+  details: { error: FlashError; details: string | Error };
+}
+
+export type FlashState =
+  | InitializingState
+  | PreparingState
+  | ErasingState
+  | WritingState
+  | FinishedState
+  | ErrorState;
+
+export const enum FlashStateType {
+  INITIALIZING = "initializing",
+  PREPARING = "preparing",
+  ERASING = "erasing",
+  WRITING = "writing",
+  FINISHED = "finished",
+  ERROR = "error",
+}
+
+export const enum FlashError {
+  FAILED_INITIALIZING = "failed_initialize",
+  FAILED_MANIFEST_FETCH = "fetch_manifest_failed",
+  NOT_SUPPORTED = "not_supported",
+  FAILED_FIRMWARE_DOWNLOAD = "failed_firmware_download",
+  WRITE_FAILED = "write_failed",
+}
+
+declare global {
+  interface HTMLElementEventMap {
+    "state-changed": CustomEvent<FlashState>;
+  }
+}

src/flash-log.ts

@@ -1,102 +0,0 @@
-import { css, html, HTMLTemplateResult, LitElement } from "lit";
-import { customElement, state } from "lit/decorators.js";
-import { classMap } from "lit/directives/class-map.js";
-
-interface Row {
-  id?: string;
-  content: HTMLTemplateResult | string;
-  error?: boolean;
-  action?: boolean;
-}
-
-@customElement("esp-web-flash-log")
-class FlashLog extends LitElement {
-  @state() _rows: Row[] = [];
-
-  protected render() {
-    return html`${this._rows.map(
-      (row) =>
-        html`<div
-          class=${classMap({
-            error: row.error === true,
-            action: row.action === true,
-          })}
-        >
-          ${row.content}
-        </div>`
-    )}`;
-  }
-
-  /**
-   * Add or replace a row.
-   */
-  public addRow(row: Row) {
-    // If last entry has same ID, replace it.
-    if (
-      row.id &&
-      this._rows.length > 0 &&
-      this._rows[this._rows.length - 1].id === row.id
-    ) {
-      const newRows = this._rows.slice(0, -1);
-      newRows.push(row);
-      this._rows = newRows;
-    } else {
-      this._rows = [...this._rows, row];
-    }
-  }
-
-  /**
-   * Add an error row
-   */
-  public addError(content: Row["content"]) {
-    this.addRow({ content, error: true });
-  }
-
-  /**
-   * Remove last row if ID matches
-   */
-  public removeRow(id: string) {
-    if (this._rows.length > 0 && this._rows[this._rows.length - 1].id === id) {
-      this._rows = this._rows.slice(0, -1);
-    }
-  }
-
-  static styles = css`
-    :host {
-      display: block;
-      max-width: 500px;
-      font-family: monospace;
-      background-color: black;
-      color: greenyellow;
-      font-size: 14px;
-      line-height: 19px;
-      padding: 12px 16px;
-    }
-
-    button {
-      background: none;
-      color: inherit;
-      border: none;
-      padding: 0;
-      font: inherit;
-      text-align: left;
-      text-decoration: underline;
-      cursor: pointer;
-    }
-
-    .action,
-    .error {
-      margin-top: 1em;
-    }
-
-    .error {
-      color: red;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "esp-web-flash-log": FlashLog;
-  }
-}

src/flash.ts

@@ -0,0 +1,228 @@
+import { Transport, ESPLoader } from "esptool-js";
+import {
+  Build,
+  FlashError,
+  FlashState,
+  Manifest,
+  FlashStateType,
+} from "./const";
+import { hardReset } from "./util/reset";
+
+export const flash = async (
+  onEvent: (state: FlashState) => void,
+  port: SerialPort,
+  manifestPath: string,
+  manifest: Manifest,
+  eraseFirst: boolean,
+) => {
+  let build: Build | undefined;
+  let chipFamily: Build["chipFamily"];
+
+  const fireStateEvent = (stateUpdate: FlashState) =>
+    onEvent({
+      ...stateUpdate,
+      manifest,
+      build,
+      chipFamily,
+    });
+
+  const transport = new Transport(port);
+  const esploader = new ESPLoader({
+    transport,
+    baudrate: 115200,
+    romBaudrate: 115200,
+    enableTracing: false,
+  });
+
+  // For debugging
+  (window as any).esploader = esploader;
+
+  fireStateEvent({
+    state: FlashStateType.INITIALIZING,
+    message: "Initializing...",
+    details: { done: false },
+  });
+
+  try {
+    await esploader.main();
+    await esploader.flashId();
+  } catch (err: any) {
+    console.error(err);
+    fireStateEvent({
+      state: FlashStateType.ERROR,
+      message:
+        "Failed to initialize. Try resetting your device or holding the BOOT button while clicking INSTALL.",
+      details: { error: FlashError.FAILED_INITIALIZING, details: err },
+    });
+
+    await hardReset(transport);
+    await transport.disconnect();
+    return;
+  }
+
+  chipFamily = esploader.chip.CHIP_NAME as any;
+
+  fireStateEvent({
+    state: FlashStateType.INITIALIZING,
+    message: `Initialized. Found ${chipFamily}`,
+    details: { done: true },
+  });
+
+  build = manifest.builds.find((b) => b.chipFamily === chipFamily);
+
+  if (!build) {
+    fireStateEvent({
+      state: FlashStateType.ERROR,
+      message: `Your ${chipFamily} board is not supported.`,
+      details: { error: FlashError.NOT_SUPPORTED, details: chipFamily },
+    });
+    await hardReset(transport);
+    await transport.disconnect();
+    return;
+  }
+
+  fireStateEvent({
+    state: FlashStateType.PREPARING,
+    message: "Preparing installation...",
+    details: { done: false },
+  });
+
+  const manifestURL = new URL(manifestPath, location.toString()).toString();
+  const filePromises = build.parts.map(async (part) => {
+    const url = new URL(part.path, manifestURL).toString();
+    const resp = await fetch(url);
+    if (!resp.ok) {
+      throw new Error(
+        `Downlading firmware ${part.path} failed: ${resp.status}`,
+      );
+    }
+
+    const reader = new FileReader();
+    const blob = await resp.blob();
+
+    return new Promise<string>((resolve) => {
+      reader.addEventListener("load", () => resolve(reader.result as string));
+      reader.readAsBinaryString(blob);
+    });
+  });
+
+  const fileArray: Array<{ data: string; address: number }> = [];
+  let totalSize = 0;
+
+  for (let part = 0; part < filePromises.length; part++) {
+    try {
+      const data = await filePromises[part];
+      fileArray.push({ data, address: build.parts[part].offset });
+      totalSize += data.length;
+    } catch (err: any) {
+      fireStateEvent({
+        state: FlashStateType.ERROR,
+        message: err.message,
+        details: {
+          error: FlashError.FAILED_FIRMWARE_DOWNLOAD,
+          details: err.message,
+        },
+      });
+      await hardReset(transport);
+      await transport.disconnect();
+      return;
+    }
+  }
+
+  fireStateEvent({
+    state: FlashStateType.PREPARING,
+    message: "Installation prepared",
+    details: { done: true },
+  });
+
+  if (eraseFirst) {
+    fireStateEvent({
+      state: FlashStateType.ERASING,
+      message: "Erasing device...",
+      details: { done: false },
+    });
+    await esploader.eraseFlash();
+    fireStateEvent({
+      state: FlashStateType.ERASING,
+      message: "Device erased",
+      details: { done: true },
+    });
+  }
+
+  fireStateEvent({
+    state: FlashStateType.WRITING,
+    message: `Writing progress: 0%`,
+    details: {
+      bytesTotal: totalSize,
+      bytesWritten: 0,
+      percentage: 0,
+    },
+  });
+
+  let totalWritten = 0;
+
+  try {
+    await esploader.writeFlash({
+      fileArray,
+      flashSize: "keep",
+      flashMode: "keep",
+      flashFreq: "keep",
+      eraseAll: false,
+      compress: true,
+      // report progress
+      reportProgress: (fileIndex: number, written: number, total: number) => {
+        const uncompressedWritten =
+          (written / total) * fileArray[fileIndex].data.length;
+
+        const newPct = Math.floor(
+          ((totalWritten + uncompressedWritten) / totalSize) * 100,
+        );
+
+        // we're done with this file
+        if (written === total) {
+          totalWritten += uncompressedWritten;
+          return;
+        }
+
+        fireStateEvent({
+          state: FlashStateType.WRITING,
+          message: `Writing progress: ${newPct}%`,
+          details: {
+            bytesTotal: totalSize,
+            bytesWritten: totalWritten + written,
+            percentage: newPct,
+          },
+        });
+      },
+    });
+  } catch (err: any) {
+    fireStateEvent({
+      state: FlashStateType.ERROR,
+      message: err.message,
+      details: { error: FlashError.WRITE_FAILED, details: err },
+    });
+    await hardReset(transport);
+    await transport.disconnect();
+    return;
+  }
+
+  fireStateEvent({
+    state: FlashStateType.WRITING,
+    message: "Writing complete",
+    details: {
+      bytesTotal: totalSize,
+      bytesWritten: totalWritten,
+      percentage: 100,
+    },
+  });
+
+  await hardReset(transport);
+
+  console.log("DISCONNECT");
+  await transport.disconnect();
+
+  fireStateEvent({
+    state: FlashStateType.FINISHED,
+    message: "All done!",
+  });
+};

src/install-button.ts

@@ -1,9 +1,72 @@
-class InstallButton extends HTMLElement {
+import type { FlashState } from "./const";
+import type { EwtInstallDialog } from "./install-dialog";
+import { connect } from "./connect";
+
+export class InstallButton extends HTMLElement {
   public static isSupported = "serial" in navigator;
 
+  public static isAllowed = window.isSecureContext;
+
+  private static style = `
+  button {
+    position: relative;
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 500;
+    padding: 10px 24px;
+    color: var(--esp-tools-button-text-color, #fff);
+    background-color: var(--esp-tools-button-color, #03a9f4);
+    border: none;
+    border-radius: var(--esp-tools-button-border-radius, 9999px);
+  }
+  button::before {
+    content: " ";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    opacity: 0.2;
+    border-radius: var(--esp-tools-button-border-radius, 9999px);
+  }
+  button:hover::before {
+    background-color: rgba(255,255,255,.8);
+  }
+  button:focus {
+    outline: none;
+  }
+  button:focus::before {
+    background-color: white;
+  }
+  button:active::before {
+    background-color: grey;
+  }
+  :host([active]) button {
+    color: rgba(0, 0, 0, 0.38);
+    background-color: rgba(0, 0, 0, 0.12);
+    box-shadow: none;
+    cursor: unset;
+    pointer-events: none;
+  }
+  .hidden {
+    display: none;
+  }`;
+
+  public manifest?: string;
+
   public eraseFirst?: boolean;
 
-  private renderRoot?: ShadowRoot;
+  public hideProgress?: boolean;
+
+  public showLog?: boolean;
+
+  public logConsole?: boolean;
+
+  public state?: FlashState;
+
+  public renderRoot?: ShadowRoot;
+
+  public overrides: EwtInstallDialog["overrides"];
 
   public connectedCallback() {
     if (this.renderRoot) {
@@ -12,36 +75,40 @@ class InstallButton extends HTMLElement {
 
     this.renderRoot = this.attachShadow({ mode: "open" });
 
-    if (!InstallButton.isSupported) {
-      this.renderRoot.innerHTML =
-        "<slot name='unsupported'>Your browser does not support installing things on ESP devices. Use Google Chrome or Microsoft Edge.</slot>";
+    if (!InstallButton.isSupported || !InstallButton.isAllowed) {
+      this.toggleAttribute("install-unsupported", true);
+      this.renderRoot.innerHTML = !InstallButton.isAllowed
+        ? "<slot name='not-allowed'>You can only install ESP devices on HTTPS websites or on the localhost.</slot>"
+        : "<slot name='unsupported'>Your browser does not support installing things on ESP devices. Use Google Chrome or Microsoft Edge.</slot>";
       return;
     }
 
-    this.addEventListener("mouseover", () => {
-      // Preload
-      import("./start-flash");
-    });
-    this.addEventListener("click", async (ev) => {
+    this.toggleAttribute("install-supported", true);
+
+    const slot = document.createElement("slot");
+
+    slot.addEventListener("click", async (ev) => {
       ev.preventDefault();
-      const manifest = this.getAttribute("manifest");
-      if (!manifest) {
-        alert("No manifest defined!");
-        return;
-      }
-
-      const mod = await import("./start-flash");
-      await mod.startFlash(
-        console,
-        manifest,
-        (logEl) => this.parentElement!.insertBefore(logEl, this.nextSibling),
-        this.eraseFirst !== undefined
-          ? this.eraseFirst
-          : this.hasAttribute("erase-first")
-      );
+      connect(this);
     });
 
-    this.renderRoot.innerHTML = `<slot name='activate'><button>Install</button></slot>`;
+    slot.name = "activate";
+    const button = document.createElement("button");
+    button.innerText = "Connect";
+    slot.append(button);
+    if (
+      "adoptedStyleSheets" in Document.prototype &&
+      "replaceSync" in CSSStyleSheet.prototype
+    ) {
+      const sheet = new CSSStyleSheet();
+      sheet.replaceSync(InstallButton.style);
+      this.renderRoot.adoptedStyleSheets = [sheet];
+    } else {
+      const styleSheet = document.createElement("style");
+      styleSheet.innerText = InstallButton.style;
+      this.renderRoot.append(styleSheet);
+    }
+    this.renderRoot.append(slot);
   }
 }
 

src/no-port-picked/index.ts

@@ -0,0 +1,10 @@
+import "./no-port-picked-dialog";
+
+export const openNoPortPickedDialog = async (
+  doTryAgain?: () => void,
+): Promise<boolean> => {
+  const dialog = document.createElement("ewt-no-port-picked-dialog");
+  dialog.doTryAgain = doTryAgain;
+  document.body.append(dialog);
+  return true;
+};

src/no-port-picked/no-port-picked-dialog.ts

@@ -0,0 +1,176 @@
+import { LitElement, html, css, svg } from "lit";
+import { customElement } from "lit/decorators.js";
+import "../components/ew-dialog";
+import "../components/ew-text-button";
+
+import { dialogStyles } from "../styles";
+import { getOperatingSystem } from "../util/get-operating-system";
+
+const cloudDownload = svg`
+  <svg
+    version="1.1"
+    id="Capa_1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    x="0px"
+    y="0px"
+    viewBox="0 0 510.322 510.322"
+    xml:space="preserve"
+    style="width: 28px; vertical-align: middle;"
+  >
+    <g>
+      <path
+        style="fill:currentColor;"
+        d="M429.064,159.505c0-0.151,0.086-1.057,0.086-1.057c0-75.282-61.261-136.521-136.543-136.521    c-52.244,0-97.867,30.587-120.753,76.339c-11.67-9.081-25.108-15.682-40.273-15.682c-37.166,0-67.387,30.199-67.387,67.387    c0,0,0.453,3.279,0.798,5.824C27.05,168.716,0,203.423,0,244.516c0,25.389,9.901,49.268,27.848,67.171    c17.968,17.99,41.804,27.869,67.193,27.869h130.244v46.83h-54.66l97.694,102.008l95.602-102.008h-54.66v-46.83H419.25    c50.174,0,91.072-40.855,91.072-90.986C510.3,201.827,474.428,164.639,429.064,159.505z M419.207,312.744H309.26v-55.545h-83.975    v55.545H95.019c-18.184,0-35.333-7.075-48.211-19.996c-12.878-12.878-19.953-30.005-19.953-48.189    c0-32.68,23.21-60.808,55.264-66.956l12.511-2.394l-2.092-14.431l-1.488-10.785c0-22.347,18.184-40.51,40.531-40.51    c13.266,0,25.691,6.514,33.305,17.408l15.229,21.873l8.52-25.303c15.013-44.652,56.796-74.656,103.906-74.656    c60.506,0,109.709,49.203,109.709,109.644l-1.337,25.712l15.121,0.302l3.149-0.086c35.419,0,64.216,28.797,64.216,64.216    C483.401,283.969,454.604,312.744,419.207,312.744z"
+      />
+    </g>
+  </svg>
+`;
+
+@customElement("ewt-no-port-picked-dialog")
+class EwtNoPortPickedDialog extends LitElement {
+  public doTryAgain?: () => void;
+
+  public render() {
+    const OS = getOperatingSystem();
+
+    return html`
+      <ew-dialog open @closed=${this._handleClose}>
+        <div slot="headline">No port selected</div>
+        <div slot="content">
+          <div>
+            If you didn't select a port because you didn't see your device
+            listed, try the following steps:
+          </div>
+          <ol>
+            <li>
+              Make sure that the device is connected to this computer (the one
+              that runs the browser that shows this website)
+            </li>
+            <li>
+              Most devices have a tiny light when it is powered on. If yours has
+              one, make sure it is on.
+            </li>
+            <li>
+              Make sure that the USB cable you use can be used for data and is
+              not a power-only cable.
+            </li>
+            ${OS === "Linux"
+              ? html`
+                  <li>
+                    If you are using a Linux flavor, make sure that your user is
+                    part of the <code>dialout</code> group so it has permission
+                    to access the device.
+                    <code class="block"
+                      >sudo usermod -a -G dialout YourUserName</code
+                    >
+                    You may need to log out & back in or reboot to activate the
+                    new group access.
+                  </li>
+                `
+              : ""}
+            <li>
+              Make sure you have the right drivers installed. Below are the
+              drivers for common chips used in ESP devices:
+              <ul>
+                <li>
+                  CP2102 drivers:
+                  <a
+                    href="https://www.silabs.com/developers/usb-to-uart-bridge-vcp-drivers"
+                    target="_blank"
+                    rel="noopener"
+                    >Windows & Mac</a
+                  >
+                </li>
+                <li>
+                  CH342, CH343, CH9102 drivers:
+                  <a
+                    href="https://www.wch.cn/downloads/CH343SER_ZIP.html"
+                    target="_blank"
+                    rel="noopener"
+                    >Windows</a
+                  >,
+                  <a
+                    href="https://www.wch.cn/downloads/CH34XSER_MAC_ZIP.html"
+                    target="_blank"
+                    rel="noopener"
+                    >Mac</a
+                  >
+                  <br />
+                  (download via blue button with ${cloudDownload} icon)
+                </li>
+                <li>
+                  CH340, CH341 drivers:
+                  <a
+                    href="https://www.wch.cn/downloads/CH341SER_ZIP.html"
+                    target="_blank"
+                    rel="noopener"
+                    >Windows</a
+                  >,
+                  <a
+                    href="https://www.wch.cn/downloads/CH341SER_MAC_ZIP.html"
+                    target="_blank"
+                    rel="noopener"
+                    >Mac</a
+                  >
+                  <br />
+                  (download via blue button with ${cloudDownload} icon)
+                </li>
+              </ul>
+            </li>
+          </ol>
+        </div>
+        <div slot="actions">
+          ${this.doTryAgain
+            ? html`
+                <ew-text-button @click=${this.close}>Cancel</ew-text-button>
+                <ew-text-button @click=${this.tryAgain}>
+                  Try Again
+                </ew-text-button>
+              `
+            : html`
+                <ew-text-button @click=${this.close}>Close</ew-text-button>
+              `}
+        </div>
+      </ew-dialog>
+    `;
+  }
+
+  private tryAgain() {
+    this.close();
+    this.doTryAgain?.();
+  }
+
+  private close() {
+    this.shadowRoot!.querySelector("ew-dialog")!.close();
+  }
+
+  private async _handleClose() {
+    this.parentNode!.removeChild(this);
+  }
+
+  static styles = [
+    dialogStyles,
+    css`
+      li + li,
+      li > ul {
+        margin-top: 8px;
+      }
+      ul,
+      ol {
+        margin-bottom: 0;
+        padding-left: 1.5em;
+      }
+      li code.block {
+        display: block;
+        margin: 0.5em 0;
+      }
+    `,
+  ];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ewt-no-port-picked-dialog": EwtNoPortPickedDialog;
+  }
+}

src/pages/ewt-page-message.ts

@@ -0,0 +1,35 @@
+import { LitElement, html, css, TemplateResult } from "lit";
+import { property } from "lit/decorators.js";
+
+class EwtPageMessage extends LitElement {
+  @property() icon!: string;
+
+  @property() label!: string | TemplateResult;
+
+  render() {
+    return html`
+      <div class="icon">${this.icon}</div>
+      ${this.label}
+    `;
+  }
+
+  static styles = css`
+    :host {
+      display: flex;
+      flex-direction: column;
+      text-align: center;
+    }
+    .icon {
+      font-size: 50px;
+      line-height: 80px;
+      color: black;
+    }
+  `;
+}
+customElements.define("ewt-page-message", EwtPageMessage);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ewt-page-message": EwtPageMessage;
+  }
+}

src/pages/ewt-page-progress.ts

@@ -0,0 +1,43 @@
+import { LitElement, html, css, TemplateResult } from "lit";
+import { property } from "lit/decorators.js";
+import "../components/ew-circular-progress";
+
+class EwtPageProgress extends LitElement {
+  @property() label!: string | TemplateResult;
+
+  @property() progress: number | undefined;
+
+  render() {
+    return html`
+      <div>
+        <ew-circular-progress
+          active
+          ?indeterminate=${this.progress === undefined}
+          .value=${this.progress !== undefined
+            ? this.progress / 100
+            : undefined}
+        ></ew-circular-progress>
+        ${this.progress !== undefined ? html`<div>${this.progress}%</div>` : ""}
+      </div>
+      ${this.label}
+    `;
+  }
+
+  static styles = css`
+    :host {
+      display: flex;
+      flex-direction: column;
+      text-align: center;
+    }
+    ew-circular-progress {
+      margin-bottom: 16px;
+    }
+  `;
+}
+customElements.define("ewt-page-progress", EwtPageProgress);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ewt-page-progress": EwtPageProgress;
+  }
+}

src/start-flash.ts

@@ -1,198 +0,0 @@
-import { html } from "lit";
-import { connect, ESPLoader, Logger } from "esp-web-flasher";
-import { Build, Manifest } from "./const";
-import "./flash-log";
-import { getChipFamilyName, sleep } from "./util";
-
-export const startFlash = async (
-  logger: Logger,
-  manifestPath: string,
-  addLogElement: (el: HTMLElement) => void,
-  eraseFirst: boolean
-) => {
-  const manifestURL = new URL(manifestPath, location.toString()).toString();
-  const manifestProm = fetch(manifestURL).then(
-    (resp): Promise<Manifest> => resp.json()
-  );
-
-  let esploader: ESPLoader | undefined;
-
-  try {
-    esploader = await connect(logger);
-  } catch (err) {
-    // User pressed cancel on web serial
-    return;
-  }
-
-  // For debugging
-  (window as any).esploader = esploader;
-
-  const logEl = document.createElement("esp-web-flash-log");
-  // logEl.esploader = esploader;
-  logEl.addRow({ id: "initializing", content: "Initializing..." });
-  addLogElement(logEl);
-
-  try {
-    await esploader.initialize();
-  } catch (err) {
-    console.error(err);
-    if (esploader.connected) {
-      logEl.addError(
-        "Failed to initialize. Try resetting your device or holding the BOOT button before clicking connect."
-      );
-      await esploader.disconnect();
-    }
-    return;
-  }
-
-  const chipFamily = getChipFamilyName(esploader);
-
-  logEl.addRow({
-    id: "initializing",
-    content: html`Initialized. Found ${chipFamily}`,
-  });
-  logEl.addRow({ id: "manifest", content: "Fetching manifest..." });
-
-  let manifest: Manifest | undefined;
-  try {
-    manifest = await manifestProm;
-  } catch (err) {
-    logEl.addError(`Unable to fetch manifest: ${err}`);
-    await esploader.disconnect();
-    return;
-  }
-
-  logEl.addRow({
-    id: "manifest",
-    content: html`Found manifest for ${manifest.name}`,
-  });
-
-  let build: Build | undefined;
-  for (const b of manifest.builds) {
-    if (b.chipFamily === chipFamily) {
-      build = b;
-      break;
-    }
-  }
-
-  if (!build) {
-    logEl.addError(`Your ${chipFamily} board is not supported.`);
-    await esploader.disconnect();
-    return;
-  }
-
-  logEl.addRow({
-    id: "preparing",
-    content: "Preparing installation...",
-  });
-
-  const filePromises = build.parts.map(async (part) => {
-    const url = new URL(part.path, manifestURL).toString();
-    const resp = await fetch(url);
-    if (!resp.ok) {
-      throw new Error(
-        `Downlading firmware ${part.path} failed: ${resp.status}`
-      );
-    }
-    return resp.arrayBuffer();
-  });
-
-  // Pre-load improv for later
-  if (build.improv) {
-    // @ts-ignore
-    import("https://www.improv-wifi.com/sdk-js/launch-button.js");
-  }
-
-  // Run the stub while we wait for files to download
-  const espStub = await esploader.runStub();
-
-  const files: ArrayBuffer[] = [];
-  let totalSize = 0;
-
-  for (const prom of filePromises) {
-    try {
-      const data = await prom;
-      files.push(data);
-      totalSize += data.byteLength;
-    } catch (err) {
-      logEl.addError(err.message);
-      await esploader.disconnect();
-      return;
-    }
-  }
-
-  logEl.addRow({
-    id: "preparing",
-    content: `Ready to install`,
-  });
-
-  if (eraseFirst) {
-    logEl.addRow({
-      id: "erase",
-      content: html`Erasing device`,
-    });
-  }
-
-  let lastPct = 0;
-
-  logEl.addRow({
-    id: "write",
-    content: html`Writing progress: ${lastPct}%`,
-  });
-
-  for (const part of build.parts) {
-    await espStub.flashData(
-      files.shift()!,
-      (newBytesWritten) => {
-        const newPct = Math.floor((newBytesWritten / totalSize) * 100);
-        if (newPct === lastPct) {
-          return;
-        }
-        lastPct = newPct;
-        logEl.addRow({
-          id: "write",
-          content: html`Writing progress: ${newPct}%`,
-        });
-      },
-      part.offset
-    );
-  }
-
-  await sleep(100);
-  await esploader.softReset();
-
-  const doImprov =
-    build.improv &&
-    customElements.get("improv-wifi-launch-button")?.isSupported;
-
-  logEl.addRow({
-    id: "write",
-    content: html`Writing
-    complete${doImprov
-      ? ""
-      : html`, all done!<br /><br /><button
-            @click=${() => logEl.parentElement?.removeChild(logEl)}
-          >
-            Close this dialog
-          </button>`}`,
-  });
-
-  await esploader.disconnect();
-
-  if (!doImprov) {
-    return;
-  }
-
-  // Todo: listen for improv events to know when to close dialog
-  logEl.addRow({
-    id: "improv",
-    action: true,
-    content: html`
-      <improv-wifi-launch-button
-        ><button slot="activate">
-          Click here to finish setting up your device.
-        </button></improv-wifi-launch-button
-      >
-    `,
-  });
-};

src/styles.ts

@@ -0,0 +1,31 @@
+import { css } from "lit";
+
+// We set font-size to 16px and all the mdc typography styles
+// because it defaults to rem, which means that the font-size
+// of the host website would influence the ESP Web Tools dialog.
+
+export const dialogStyles = css`
+  :host {
+    --roboto-font: Roboto, system-ui;
+    --text-color: rgba(0, 0, 0, 0.6);
+    --danger-color: #db4437;
+
+    --md-sys-color-primary: #03a9f4;
+    --md-sys-color-on-primary: #fff;
+    --md-ref-typeface-brand: var(--roboto-font);
+    --md-ref-typeface-plain: var(--roboto-font);
+
+    --md-sys-color-surface: #fff;
+    --md-sys-color-surface-container: #fff;
+    --md-sys-color-surface-container-high: #fff;
+    --md-sys-color-surface-container-highest: #f5f5f5;
+    --md-sys-color-secondary-container: #e0e0e0;
+
+    --md-sys-typescale-headline-font: var(--roboto-font);
+    --md-sys-typescale-title-font: var(--roboto-font);
+  }
+
+  a {
+    color: var(--md-sys-color-primary);
+  }
+`;

src/util.ts

@@ -1,22 +0,0 @@
-import {
-  CHIP_FAMILY_ESP32,
-  CHIP_FAMILY_ESP32S2,
-  CHIP_FAMILY_ESP8266,
-  ESPLoader,
-} from "esp-web-flasher";
-
-export const getChipFamilyName = (esploader: ESPLoader) => {
-  switch (esploader.chipFamily) {
-    case CHIP_FAMILY_ESP32:
-      return "ESP32";
-    case CHIP_FAMILY_ESP8266:
-      return "ESP8266";
-    case CHIP_FAMILY_ESP32S2:
-      return "ESP32-S2";
-    default:
-      return "Unknown Chip";
-  }
-};
-
-export const sleep = (time: number) =>
-  new Promise((resolve) => setTimeout(resolve, time));

src/util/console-color.ts

@@ -0,0 +1,285 @@
+interface ConsoleState {
+  bold: boolean;
+  italic: boolean;
+  underline: boolean;
+  strikethrough: boolean;
+  foregroundColor: string | null;
+  backgroundColor: string | null;
+  carriageReturn: boolean;
+  secret: boolean;
+}
+
+export class ColoredConsole {
+  public state: ConsoleState = {
+    bold: false,
+    italic: false,
+    underline: false,
+    strikethrough: false,
+    foregroundColor: null,
+    backgroundColor: null,
+    carriageReturn: false,
+    secret: false,
+  };
+
+  constructor(public targetElement: HTMLElement) {}
+
+  logs(): string {
+    return this.targetElement.innerText;
+  }
+
+  addLine(line: string) {
+    // @ts-expect-error
+    const re = /(?:\033|\\033)(?:\[(.*?)[@-~]|\].*?(?:\007|\033\\))/g;
+    let i = 0;
+
+    if (this.state.carriageReturn) {
+      if (line !== "\n") {
+        // don't remove if \r\n
+        this.targetElement.removeChild(this.targetElement.lastChild!);
+      }
+      this.state.carriageReturn = false;
+    }
+
+    if (line.includes("\r")) {
+      this.state.carriageReturn = true;
+    }
+
+    const lineSpan = document.createElement("span");
+    lineSpan.classList.add("line");
+    this.targetElement.appendChild(lineSpan);
+
+    const addSpan = (content: string) => {
+      if (content === "") return;
+
+      const span = document.createElement("span");
+      if (this.state.bold) span.classList.add("log-bold");
+      if (this.state.italic) span.classList.add("log-italic");
+      if (this.state.underline) span.classList.add("log-underline");
+      if (this.state.strikethrough) span.classList.add("log-strikethrough");
+      if (this.state.secret) span.classList.add("log-secret");
+      if (this.state.foregroundColor !== null)
+        span.classList.add(`log-fg-${this.state.foregroundColor}`);
+      if (this.state.backgroundColor !== null)
+        span.classList.add(`log-bg-${this.state.backgroundColor}`);
+      span.appendChild(document.createTextNode(content));
+      lineSpan.appendChild(span);
+
+      if (this.state.secret) {
+        const redacted = document.createElement("span");
+        redacted.classList.add("log-secret-redacted");
+        redacted.appendChild(document.createTextNode("[redacted]"));
+        lineSpan.appendChild(redacted);
+      }
+    };
+
+    while (true) {
+      const match = re.exec(line);
+      if (match === null) break;
+
+      const j = match.index;
+      addSpan(line.substring(i, j));
+      i = j + match[0].length;
+
+      if (match[1] === undefined) continue;
+
+      for (const colorCode of match[1].split(";")) {
+        switch (parseInt(colorCode)) {
+          case 0:
+            // reset
+            this.state.bold = false;
+            this.state.italic = false;
+            this.state.underline = false;
+            this.state.strikethrough = false;
+            this.state.foregroundColor = null;
+            this.state.backgroundColor = null;
+            this.state.secret = false;
+            break;
+          case 1:
+            this.state.bold = true;
+            break;
+          case 3:
+            this.state.italic = true;
+            break;
+          case 4:
+            this.state.underline = true;
+            break;
+          case 5:
+            this.state.secret = true;
+            break;
+          case 6:
+            this.state.secret = false;
+            break;
+          case 9:
+            this.state.strikethrough = true;
+            break;
+          case 22:
+            this.state.bold = false;
+            break;
+          case 23:
+            this.state.italic = false;
+            break;
+          case 24:
+            this.state.underline = false;
+            break;
+          case 29:
+            this.state.strikethrough = false;
+            break;
+          case 30:
+            this.state.foregroundColor = "black";
+            break;
+          case 31:
+            this.state.foregroundColor = "red";
+            break;
+          case 32:
+            this.state.foregroundColor = "green";
+            break;
+          case 33:
+            this.state.foregroundColor = "yellow";
+            break;
+          case 34:
+            this.state.foregroundColor = "blue";
+            break;
+          case 35:
+            this.state.foregroundColor = "magenta";
+            break;
+          case 36:
+            this.state.foregroundColor = "cyan";
+            break;
+          case 37:
+            this.state.foregroundColor = "white";
+            break;
+          case 39:
+            this.state.foregroundColor = null;
+            break;
+          case 41:
+            this.state.backgroundColor = "red";
+            break;
+          case 42:
+            this.state.backgroundColor = "green";
+            break;
+          case 43:
+            this.state.backgroundColor = "yellow";
+            break;
+          case 44:
+            this.state.backgroundColor = "blue";
+            break;
+          case 45:
+            this.state.backgroundColor = "magenta";
+            break;
+          case 46:
+            this.state.backgroundColor = "cyan";
+            break;
+          case 47:
+            this.state.backgroundColor = "white";
+            break;
+          case 40:
+          case 49:
+            this.state.backgroundColor = null;
+            break;
+        }
+      }
+    }
+    const atBottom =
+      this.targetElement.scrollTop >
+      this.targetElement.scrollHeight - this.targetElement.offsetHeight - 50;
+
+    addSpan(line.substring(i));
+
+    // Keep scroll at bottom
+    if (atBottom) {
+      this.targetElement.scrollTop = this.targetElement.scrollHeight;
+    }
+  }
+}
+
+export const coloredConsoleStyles = `
+  .log {
+    flex: 1;
+    background-color: #1c1c1c;
+    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier,
+      monospace;
+    font-size: 12px;
+    padding: 16px;
+    overflow: auto;
+    line-height: 1.45;
+    border-radius: 3px;
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+    color: #ddd;
+  }
+
+  .log-bold {
+    font-weight: bold;
+  }
+  .log-italic {
+    font-style: italic;
+  }
+  .log-underline {
+    text-decoration: underline;
+  }
+  .log-strikethrough {
+    text-decoration: line-through;
+  }
+  .log-underline.log-strikethrough {
+    text-decoration: underline line-through;
+  }
+  .log-secret {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+  }
+  .log-secret-redacted {
+    opacity: 0;
+    width: 1px;
+    font-size: 1px;
+  }
+  .log-fg-black {
+    color: rgb(128, 128, 128);
+  }
+  .log-fg-red {
+    color: rgb(255, 0, 0);
+  }
+  .log-fg-green {
+    color: rgb(0, 255, 0);
+  }
+  .log-fg-yellow {
+    color: rgb(255, 255, 0);
+  }
+  .log-fg-blue {
+    color: rgb(0, 0, 255);
+  }
+  .log-fg-magenta {
+    color: rgb(255, 0, 255);
+  }
+  .log-fg-cyan {
+    color: rgb(0, 255, 255);
+  }
+  .log-fg-white {
+    color: rgb(187, 187, 187);
+  }
+  .log-bg-black {
+    background-color: rgb(0, 0, 0);
+  }
+  .log-bg-red {
+    background-color: rgb(255, 0, 0);
+  }
+  .log-bg-green {
+    background-color: rgb(0, 255, 0);
+  }
+  .log-bg-yellow {
+    background-color: rgb(255, 255, 0);
+  }
+  .log-bg-blue {
+    background-color: rgb(0, 0, 255);
+  }
+  .log-bg-magenta {
+    background-color: rgb(255, 0, 255);
+  }
+  .log-bg-cyan {
+    background-color: rgb(0, 255, 255);
+  }
+  .log-bg-white {
+    background-color: rgb(255, 255, 255);
+  }
+`;

src/util/file-download.ts

@@ -0,0 +1,17 @@
+export const fileDownload = (href: string, filename = ""): void => {
+  const a = document.createElement("a");
+  a.target = "_blank";
+  a.href = href;
+  a.download = filename;
+
+  document.body.appendChild(a);
+  a.dispatchEvent(new MouseEvent("click"));
+  document.body.removeChild(a);
+};
+
+export const textDownload = (text: string, filename = ""): void => {
+  const blob = new Blob([text], { type: "text/plain" });
+  const url = URL.createObjectURL(blob);
+  fileDownload(url, filename);
+  setTimeout(() => URL.revokeObjectURL(url), 0);
+};

src/util/fire-event.ts

@@ -0,0 +1,20 @@
+export const fireEvent = <Event extends keyof HTMLElementEventMap>(
+  eventTarget: EventTarget,
+  type: Event,
+  // @ts-ignore
+  detail?: HTMLElementEventMap[Event]["detail"],
+  options?: {
+    bubbles?: boolean;
+    cancelable?: boolean;
+    composed?: boolean;
+  },
+): void => {
+  options = options || {};
+  const event = new CustomEvent(type, {
+    bubbles: options.bubbles === undefined ? true : options.bubbles,
+    cancelable: Boolean(options.cancelable),
+    composed: options.composed === undefined ? true : options.composed,
+    detail,
+  });
+  eventTarget.dispatchEvent(event);
+};

src/util/get-operating-system.ts

@@ -0,0 +1,24 @@
+// From https://stackoverflow.com/a/38241481
+export const getOperatingSystem = () => {
+  const userAgent = window.navigator.userAgent;
+  const platform =
+    // @ts-expect-error
+    window.navigator?.userAgentData?.platform || window.navigator.platform;
+  const macosPlatforms = ["macOS", "Macintosh", "MacIntel", "MacPPC", "Mac68K"];
+  const windowsPlatforms = ["Win32", "Win64", "Windows", "WinCE"];
+  const iosPlatforms = ["iPhone", "iPad", "iPod"];
+
+  if (macosPlatforms.indexOf(platform) !== -1) {
+    return "Mac OS";
+  } else if (iosPlatforms.indexOf(platform) !== -1) {
+    return "iOS";
+  } else if (windowsPlatforms.indexOf(platform) !== -1) {
+    return "Windows";
+  } else if (/Android/.test(userAgent)) {
+    return "Android";
+  } else if (/Linux/.test(platform)) {
+    return "Linux";
+  }
+
+  return null;
+};

src/util/line-break-transformer.ts

@@ -0,0 +1,20 @@
+export class LineBreakTransformer implements Transformer<string, string> {
+  private chunks = "";
+
+  transform(
+    chunk: string,
+    controller: TransformStreamDefaultController<string>,
+  ) {
+    // Append new chunks to existing chunks.
+    this.chunks += chunk;
+    // For each line breaks in chunks, send the parsed lines out.
+    const lines = this.chunks.split("\r\n");
+    this.chunks = lines.pop()!;
+    lines.forEach((line) => controller.enqueue(line + "\r\n"));
+  }
+
+  flush(controller: TransformStreamDefaultController<string>) {
+    // When the stream is closed, flush any remaining chunks out.
+    controller.enqueue(this.chunks);
+  }
+}

src/util/manifest.ts

@@ -0,0 +1,18 @@
+import { Manifest } from "../const";
+
+export const downloadManifest = async (manifestPath: string) => {
+  const manifestURL = new URL(manifestPath, location.toString()).toString();
+  const resp = await fetch(manifestURL);
+  const manifest: Manifest = await resp.json();
+
+  if ("new_install_skip_erase" in manifest) {
+    console.warn(
+      'Manifest option "new_install_skip_erase" is deprecated. Use "new_install_prompt_erase" instead.',
+    );
+    if (manifest.new_install_skip_erase) {
+      manifest.new_install_prompt_erase = true;
+    }
+  }
+
+  return manifest;
+};

src/util/reset.ts

@@ -0,0 +1,17 @@
+import { Transport } from "esptool-js";
+import { sleep } from "./sleep";
+
+export const hardReset = async (transport: Transport) => {
+  console.log("Triggering reset");
+  await transport.device.setSignals({
+    dataTerminalReady: false,
+    requestToSend: true,
+  });
+  await sleep(250);
+  await transport.device.setSignals({
+    dataTerminalReady: false,
+    requestToSend: false,
+  });
+  await sleep(250);
+  await new Promise((resolve) => setTimeout(resolve, 1000));
+};

src/util/sleep.ts

@@ -0,0 +1,2 @@
+export const sleep = (time: number) =>
+  new Promise((resolve) => setTimeout(resolve, time));

src/util/timestamp-transformer.ts

@@ -0,0 +1,12 @@
+export class TimestampTransformer implements Transformer<string, string> {
+  transform(
+    chunk: string,
+    controller: TransformStreamDefaultController<string>,
+  ) {
+    const date = new Date();
+    const h = date.getHours().toString().padStart(2, "0");
+    const m = date.getMinutes().toString().padStart(2, "0");
+    const s = date.getSeconds().toString().padStart(2, "0");
+    controller.enqueue(`[${h}:${m}:${s}]${chunk}`);
+  }
+}

src/version.ts

@@ -0,0 +1 @@
+export const version = "dev";

static/logos/esphome.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 73"><g fill="none" fill-rule="evenodd"><path d="M72.63 16.18V12c0-1.47 1.19-2.66 2.66-2.66 1.47 0 2.66 1.19 2.66 2.66v4.18m-14.27 0V12c0-1.47 1.19-2.66 2.66-2.66A2.65 2.65 0 0 1 69 11.99v4.18m-14.28.01V12c0-1.47 1.19-2.66 2.66-2.66 1.47 0 2.66 1.19 2.66 2.66v4.18m-14.28 0V12c0-1.47 1.19-2.66 2.66-2.66 1.47 0 2.66 1.19 2.66 2.66v4.18m-14.28 0V12c0-1.47 1.19-2.66 2.66-2.66 1.47 0 2.66 1.19 2.66 2.66v4.18m-14.27 0V12c0-1.47 1.19-2.66 2.66-2.66 1.47 0 2.66 1.19 2.66 2.66v4.18M77.95 56.07v4.68c0 1.47-1.19 2.66-2.66 2.66-1.47 0-2.66-1.19-2.66-2.66v-4.68m-3.63 0v4.68c0 1.47-1.19 2.66-2.66 2.66-1.47 0-2.66-1.19-2.66-2.66v-4.68m-3.64 0v4.68c0 1.47-1.19 2.66-2.66 2.66-1.47 0-2.66-1.19-2.66-2.66v-4.68m-3.64 0v4.68c0 1.47-1.19 2.66-2.66 2.66-1.47 0-2.66-1.19-2.66-2.66v-4.68m-3.64 0v4.68c0 1.47-1.19 2.66-2.66 2.66-1.47 0-2.66-1.19-2.66-2.66v-4.68m-3.63.26v4.43c0 1.47-1.19 2.66-2.66 2.66-1.47 0-2.66-1.19-2.66-2.66v-4.43" fill="#fff" stroke="#000" stroke-width="2.178"/><path fill="#fff" stroke="#000" stroke-width="2.42" d="M79.29 16.18H26.51a.97.97 0 0 0-.97.97v37.96c0 .53.43.97.97.97h52.77c.53 0 .97-.43.97-.97V17.15c0-.54-.43-.97-.96-.97z"/><path fill="#000" fill-rule="nonzero" d="M61.6 35.42v-5.07h-1.8v3.28l-6.81-6.81-11.49 11.5h2.87v7.75h17.25v-7.75h2.87z"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.961" d="M61.6 35.42v-5.07h-1.8v3.28l-6.81-6.81-11.49 11.5h2.87v7.75h17.25v-7.75h2.87z"/><path d="M25.34 53.77H9.52v-3.89h11.86v-3.89H9.52v-3.88h11.86v-3.89H9.52v-3.89h11.86v-3.88H9.52V18.47" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.159"/></g></svg>

static/logos/nspanelmanager.svg

@@ -0,0 +1,156 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="95.541344mm"
+   height="29.999447mm"
+   viewBox="0 0 95.54134 29.999447"
+   version="1.1"
+   id="svg5"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
+   sodipodi:docname="logo.svg"
+   inkscape:export-filename="/home/erik/Documents/Projekt/NSPanel Manager/Logos/logo250.png"
+   inkscape:export-xdpi="76.010269"
+   inkscape:export-ydpi="76.010269"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#000000"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="1"
+     inkscape:pagecheckerboard="false"
+     inkscape:document-units="mm"
+     showgrid="false"
+     inkscape:zoom="1.3404872"
+     inkscape:cx="174.5634"
+     inkscape:cy="71.988753"
+     inkscape:window-width="1366"
+     inkscape:window-height="704"
+     inkscape:window-x="0"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer2"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     fit-margin-top="5"
+     fit-margin-left="7"
+     fit-margin-right="7"
+     fit-margin-bottom="5" />
+  <defs
+     id="defs2" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="display:inline"
+     transform="translate(-23.806324,-37.155967)">
+    <rect
+       style="fill:#000000;stroke:#000000;stroke-width:0.264583"
+       id="rect91625"
+       width="16.863066"
+       height="1.0996726"
+       x="30.938616"
+       y="59.758064" />
+    <rect
+       style="fill:#000000;stroke:#000000;stroke-width:0.473039"
+       id="rect91761"
+       width="66.510048"
+       height="0.89121634"
+       x="31.042845"
+       y="42.392487" />
+    <rect
+       style="fill:#000000;stroke:#000000;stroke-width:0.34752"
+       id="rect91763"
+       width="31.46484"
+       height="1.0167363"
+       x="80.709068"
+       y="59.79953" />
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer2"
+     inkscape:label="Layer 2"
+     style="display:inline"
+     transform="translate(-23.806324,-37.155967)">
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:10.5833px;line-height:0;font-family:sans-serif;letter-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583"
+       x="64.189873"
+       y="56.76144"
+       id="text39249"><tspan
+         sodipodi:role="line"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:13.4056px;line-height:0.55;font-family:Hamlin;-inkscape-font-specification:'Hamlin, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;fill:#000000;stroke-width:0.264583"
+         x="64.189873"
+         y="56.76144"
+         id="tspan62001">NSPANEL</tspan><tspan
+         sodipodi:role="line"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:4.93889px;line-height:1.55;font-family:Hamlin;-inkscape-font-specification:'Hamlin Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;fill:#000000;stroke-width:0.264583"
+         x="64.189873"
+         y="62.091209"
+         id="tspan73527">MANAGER</tspan></text>
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer3"
+     inkscape:label="Layer 3"
+     transform="translate(-23.806324,-37.155967)">
+    <g
+       id="g91894"
+       transform="matrix(0.15910033,0,0,0.15910033,102.25849,44.830316)">
+      <g
+         inkscape:label="Layer 1"
+         id="layer1-1"
+         transform="translate(-30.269979,-9.7200098)"
+         style="display:inline;fill:#ffc101;fill-opacity:1">
+        <path
+           style="fill:#ffc101;fill-opacity:1;stroke-width:0.103892"
+           d="m 55.789326,41.355207 -7.50621,-0.0036 c -8.143469,-0.0039 -15.508914,-0.135689 -16.902471,-0.302478 -0.482408,-0.05774 -0.940146,-0.168019 -1.017198,-0.245069 -0.115522,-0.115523 -0.121188,-0.512246 -0.03231,-2.261925 0.23677,-4.661121 1.011239,-7.815267 2.954845,-12.034057 2.163281,-4.695621 5.19604,-8.340625 9.101253,-10.938592 2.710535,-1.8032 6.982591,-3.536303 9.582241,-3.887359 0.270422,-0.03652 0.543941,-0.129371 0.60782,-0.20634 0.06388,-0.07697 0.286764,-0.168201 0.495299,-0.202735 0.208537,-0.03453 0.449284,-0.09017 0.534995,-0.123628 0.168484,-0.06577 0.381034,-0.08553 1.215776,-0.112981 l 0.540477,-0.01778 0.03093,-0.649326 0.03093,-0.6493272 h 1.610329 1.610329 l 0.03093,0.6493272 0.03093,0.649326 0.540477,0.01778 c 0.834742,0.02745 1.047292,0.04721 1.215776,0.112981 0.08571,0.03346 0.326458,0.08909 0.534995,0.123628 0.208535,0.03453 0.43142,0.125765 0.495299,0.202735 0.06388,0.07697 0.337398,0.169823 0.60782,0.20634 1.199505,0.161981 3.423686,0.820696 4.997483,1.480058 3.507719,1.469604 6.221358,3.303143 8.667596,5.856479 2.140092,2.233788 3.602852,4.416791 5.018415,7.489412 1.943606,4.21879 2.718075,7.372936 2.954845,12.034057 0.08888,1.749679 0.08321,2.146402 -0.03231,2.261925 -0.07705,0.07705 -0.53479,0.187332 -1.017198,0.245069 -1.393557,0.166789 -8.759002,0.298597 -16.902471,0.302478 l -7.50621,0.0036 z"
+           id="path1465"
+           inkscape:connector-curvature="0"
+           inkscape:export-xdpi="15.183412"
+           inkscape:export-ydpi="15.183412"
+           sodipodi:nodetypes="csssssssssscccccccccscssssssssccc" />
+      </g>
+      <g
+         inkscape:label="Layer 1 copy"
+         id="g2878"
+         transform="translate(-30.269979,-9.7200098)"
+         style="display:inline">
+        <path
+           style="fill:#000000;fill-opacity:1;stroke-width:0.103892"
+           d="m 54.334834,101.13608 c -3.956539,-0.21732 -5.98252,-0.58093 -6.463066,-1.159955 -0.09761,-0.11762 -0.123549,-0.57148 -0.09916,-1.73541 0.02799,-1.33577 0.008,-1.59689 -0.130816,-1.71212 -0.09011,-0.0748 -0.16384,-0.29294 -0.16384,-0.48477 0,-0.30436 0.05486,-0.37678 0.430667,-0.5685 0.694102,-0.3541 2.301256,-0.71174 4.060659,-0.9036 l 1.638312,-0.17866 V 70.783119 c 0,-15.670705 -0.03494,-23.609951 -0.103892,-23.609951 -0.05714,0 -0.103892,-0.0935 -0.103892,-0.207784 0,-0.194592 0.06926,-0.207784 1.090868,-0.207784 0.900399,0 1.090868,-0.02721 1.090868,-0.155839 0,-0.08571 0.04675,-0.155838 0.103892,-0.155838 0.06644,0 0.103892,-3.463072 0.103892,-5.090716 l 2.493412,-2e-6 c 0,1.627644 0.03746,5.090716 0.103892,5.090716 0.05714,0 0.103892,0.07013 0.103892,0.155838 0,0.128629 0.190469,0.155839 1.090868,0.155839 1.021606,0 1.090868,0.01319 1.090868,0.207784 0,0.114281 -0.04675,0.207784 -0.103892,0.207784 -0.06896,0 -0.103892,7.939246 -0.103892,23.609951 v 23.609948 l 1.638312,0.17866 c 1.759403,0.19186 3.366557,0.54949 4.060659,0.9036 0.375812,0.19172 0.430667,0.26413 0.430667,0.5685 0,0.19183 -0.07373,0.40998 -0.16384,0.48476 -0.138668,0.11509 -0.158971,0.37643 -0.132144,1.70097 0.01743,0.86075 -0.0055,1.62411 -0.05099,1.69635 -0.27864,0.442605 -1.632284,0.804945 -3.803075,1.017985 -1.460176,0.14331 -6.726732,0.26812 -8.109225,0.19219 z"
+           id="path2876"
+           inkscape:connector-curvature="0"
+           inkscape:export-xdpi="15.183412"
+           inkscape:export-ydpi="15.183412"
+           sodipodi:nodetypes="ssssssscssssssccsssssscssssscsss" />
+      </g>
+      <g
+         id="layer3-5"
+         inkscape:label="Layer 3">
+        <circle
+           style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:17.1351;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:0;stroke-dasharray:none;stroke-opacity:1;paint-order:markers fill stroke"
+           id="path1510"
+           cx="34.837666"
+           cy="55.072739"
+           r="1.2872558" />
+      </g>
+      <g
+         id="layer2-9"
+         inkscape:label="Layer 2">
+        <rect
+           style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:12.8043;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:0;stroke-dasharray:none;stroke-opacity:1;paint-order:markers fill stroke"
+           id="rect1508"
+           width="1.3904994"
+           height="22.681686"
+           x="34.147842"
+           y="31.601988" />
+      </g>
+    </g>
+  </g>
+</svg>

static/logos/tasmota.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 170.38 170.38"><defs><style>.cls-1{fill:#010101;}</style></defs><title>Element 1</title><g id="Ebene_2" data-name="Ebene 2"><g id="Ebene_1-2" data-name="Ebene 1"><polygon class="cls-1" points="85.19 0 0 85.19 9.73 94.93 85.19 19.47 160.65 94.93 170.38 85.19 85.19 0"/><path class="cls-1" d="M85.19,60.08A52.6,52.6,0,0,0,66.45,161.84V146.7A38.79,38.79,0,0,1,78.31,74.5v95.88H92.08V74.5a38.79,38.79,0,0,1,11.85,72.2v15.14A52.6,52.6,0,0,0,85.19,60.08Z"/></g></g></svg>

tsconfig.json

@@ -13,7 +13,8 @@
     "noUnusedLocals": true,
     "forceConsistentCasingInFileNames": true,
     "strict": true,
-    "suppressImplicitAnyIndexErrors": true
+    "skipLibCheck": true,
+    "importHelpers": true
   },
   "include": ["src/*"]
 }