esp32tool 1.6.4 → 1.6.5

package/js/util/console-color.js

@@ -1,210 +1,235 @@
 export class ColoredConsole {
-  constructor(targetElement) {
-    this.targetElement = targetElement;
-    this.state = {
-      bold: false,
-      italic: false,
-      underline: false,
-      strikethrough: false,
-      foregroundColor: null,
-      backgroundColor: null,
-      carriageReturn: false,
-      secret: false,
-      blink: false,
-      rapidBlink: false,
-    };
-  }
-
-  logs() {
-    return this.targetElement.innerText;
-  }
-
-  addLine(line) {
-    // biome-ignore lint/suspicious/noControlCharactersInRegex: ANSI escape sequences
-    const re = /(?:\x1B|\\x1B)(?:\[(.*?)[@-~]|\].*?(?:\x07|\x1B\\))/g;
-    let i = 0;
-
-    if (this.state.carriageReturn) {
-      if (line !== "\n") {
-        // don't remove if \r\n
-        if (this.targetElement.lastChild) {
-          this.targetElement.removeChild(this.targetElement.lastChild);
+    constructor(targetElement) {
+        this.targetElement = targetElement;
+        this.state = {
+            bold: false,
+            italic: false,
+            underline: false,
+            strikethrough: false,
+            foregroundColor: null,
+            backgroundColor: null,
+            carriageReturn: false,
+            lines: [],
+            secret: false,
+            blink: false,
+            rapidBlink: false,
+        };
+    }
+    logs() {
+        if (this.state.lines.length > 0) {
+            this.processLines();
         }
-      }
-      this.state.carriageReturn = false;
+        return this.targetElement.innerText;
     }
-
-    if (line.includes("\r")) {
-      this.state.carriageReturn = true;
+    processLine(line) {
+        // biome-ignore lint/suspicious/noControlCharactersInRegex: ANSI escape sequences
+        // eslint-disable-next-line no-control-regex
+        const re = /(?:\x1B|\\x1B)(?:\[(.*?)[@-~]|\].*?(?:\x07|\x1B\\))/g;
+        let i = 0;
+        const lineSpan = document.createElement("span");
+        lineSpan.classList.add("line");
+        const addSpan = (content) => {
+            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.blink)
+                span.classList.add("log-blink");
+            if (this.state.rapidBlink)
+                span.classList.add("log-rapid-blink");
+            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;
+                        this.state.blink = false;
+                        this.state.rapidBlink = 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.blink = true;
+                        this.state.rapidBlink = false;
+                        break;
+                    case 6:
+                        this.state.rapidBlink = true;
+                        this.state.blink = false;
+                        break;
+                    case 8:
+                        this.state.secret = true;
+                        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 25:
+                        this.state.blink = false;
+                        this.state.rapidBlink = false;
+                        break;
+                    case 28:
+                        this.state.secret = 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 40:
+                        this.state.backgroundColor = "black";
+                        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 49:
+                        this.state.backgroundColor = null;
+                        break;
+                }
+            }
+        }
+        addSpan(line.substring(i));
+        return lineSpan;
     }
-
-    const lineSpan = document.createElement("span");
-    lineSpan.classList.add("line");
-    this.targetElement.appendChild(lineSpan);
-
-    const addSpan = (content) => {
-      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.blink) span.classList.add("log-blink");
-      if (this.state.rapidBlink) span.classList.add("log-rapid-blink");
-      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;
-            this.state.blink = false;
-            this.state.rapidBlink = 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.blink = true;
-            break;
-          case 6:
-            this.state.rapidBlink = true;
-            break;
-          case 8:
-            this.state.secret = true;
-            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 25:
-            this.state.blink = false;
-            this.state.rapidBlink = false;
-            break;
-          case 28:
-            this.state.secret = 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:
-            this.state.backgroundColor = "black";
-            break;
-          case 49:
-            this.state.backgroundColor = null;
-            break;
+    processLines() {
+        const atBottom = this.targetElement.scrollTop >
+            this.targetElement.scrollHeight - this.targetElement.offsetHeight - 50;
+        const prevCarriageReturn = this.state.carriageReturn;
+        const fragment = document.createDocumentFragment();
+        if (this.state.lines.length === 0) {
+            return;
+        }
+        for (const line of this.state.lines) {
+            // A lone \r is a pure carriage-return signal — update state but don't
+            // create a DOM node for it (it has no renderable content).
+            if (line === "\r") {
+                this.state.carriageReturn = true;
+                continue;
+            }
+            if (this.state.carriageReturn && line !== "\n") {
+                if (fragment.childElementCount) {
+                    fragment.removeChild(fragment.lastChild);
+                }
+            }
+            const hadCarriageReturn = line.endsWith("\r");
+            fragment.appendChild(this.processLine(line.replace(/\r/g, "")));
+            this.state.carriageReturn = hadCarriageReturn;
+        }
+        if (prevCarriageReturn &&
+            fragment.childElementCount > 0 &&
+            this.targetElement.lastChild) {
+            this.targetElement.replaceChild(fragment, this.targetElement.lastChild);
+        }
+        else {
+            this.targetElement.appendChild(fragment);
+        }
+        this.state.lines = [];
+        // Keep scroll at bottom
+        if (atBottom) {
+            this.targetElement.scrollTop = this.targetElement.scrollHeight;
         }
-      }
     }
-    
-    // Use percentage-based threshold (5% of viewport height) for better UX across screen sizes
-    const scrollThreshold = this.targetElement.offsetHeight * 0.05;
-    const atBottom =
-      this.targetElement.scrollTop >
-      this.targetElement.scrollHeight - this.targetElement.offsetHeight - scrollThreshold;
-
-    addSpan(line.substring(i));
-
-    // Keep scroll at bottom
-    if (atBottom) {
-      this.targetElement.scrollTop = this.targetElement.scrollHeight;
+    addLine(line) {
+        // Processing of lines is deferred for performance reasons
+        if (this.state.lines.length === 0) {
+            setTimeout(() => this.processLines(), 0);
+        }
+        this.state.lines.push(line);
     }
-  }
 }
-
 export const coloredConsoleStyles = `
   .log {
     flex: 1;
@@ -215,11 +240,10 @@ export const coloredConsoleStyles = `
     padding: 16px;
     overflow: auto;
     line-height: 1.45;
-    border-radius: 0;
+    border-radius: 3px;
     white-space: pre-wrap;
     overflow-wrap: break-word;
     color: #ddd;
-    min-height: 0;
   }
 
   .log-bold {
@@ -237,6 +261,17 @@ export const coloredConsoleStyles = `
   .log-underline.log-strikethrough {
     text-decoration: underline line-through;
   }
+  .log-blink {
+    animation: blink 1s step-end infinite;
+  }
+  .log-rapid-blink {
+    animation: blink 0.4s step-end infinite;
+  }
+  @keyframes blink {
+    50% {
+      opacity: 0;
+    }
+  }
   .log-secret {
     -webkit-user-select: none;
     -moz-user-select: none;
@@ -248,17 +283,6 @@ export const coloredConsoleStyles = `
     width: 1px;
     font-size: 1px;
   }
-  .log-blink {
-    animation: blink 1s step-start infinite;
-  }
-  .log-rapid-blink {
-    animation: blink 0.3s step-start infinite;
-  }
-  @keyframes blink {
-    50% {
-      opacity: 0;
-    }
-  }
   .log-fg-black {
     color: rgb(128, 128, 128);
   }

package/js/util/line-break-transformer.js

@@ -1,19 +1,31 @@
 export class LineBreakTransformer {
-  constructor() {
-    this.chunks = "";
-  }
-
-  transform(chunk, controller) {
-    // 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) {
-    // When the stream is closed, flush any remaining chunks out.
-    controller.enqueue(this.chunks);
-  }
+    constructor() {
+        this.chunks = "";
+    }
+    transform(chunk, controller) {
+        // Append new chunks to existing chunks.
+        this.chunks += chunk;
+        // Split on \r\n, lone \r, or lone \n — capturing the separator so we can
+        // distinguish a lone \r (overwrite intent) from a normal newline.
+        const re = /\r\n|\r|\n/g;
+        let lastIndex = 0;
+        let match;
+        while ((match = re.exec(this.chunks)) !== null) {
+            // If this is a lone \r at the very end of the buffer, leave it so it can
+            // be combined with a possible following \n in the next chunk.
+            if (match[0] === "\r" && match.index === this.chunks.length - 1) {
+                break;
+            }
+            const line = this.chunks.substring(lastIndex, match.index);
+            // Emit with \r suffix only for lone \r (overwrite), \n for everything else.
+            const suffix = match[0] === "\r" ? "\r" : "\n";
+            controller.enqueue(line + suffix);
+            lastIndex = re.lastIndex;
+        }
+        this.chunks = this.chunks.substring(lastIndex);
+    }
+    flush(controller) {
+        // When the stream is closed, flush any remaining chunks out.
+        controller.enqueue(this.chunks);
+    }
 }

package/js/util/timestamp-transformer.js

@@ -0,0 +1,39 @@
+// Matches lines that already carry a wall-clock or tick timestamp so we don't
+// add a redundant one.  Intentionally does NOT match bare log-level prefixes
+// like ESPHome's [I][tag:line]: — those have no time information.
+//
+// Covered formats:
+//   (123456)          FreeRTOS ms-tick  e.g. "(12345) "
+//   [HH:MM:SS]        wall-clock bracket
+//   [HH:MM:SS.mmm]    wall-clock bracket with millis
+//   I (1234) tag:     ESP-IDF log level + tick  e.g. "I (1234) wifi: ..."
+//   HH:MM:SS.mmm      plain wall-clock
+const DEVICE_TIMESTAMP_RE = /^\s*(?:\(\d+\)\s|\[\d{2}:\d{2}:\d{2}(?:\.\d+)?\]|[DIWEACV] \(\d+\) \w|(?:\d{2}:){2}\d{2}\.\d)/;
+export class TimestampTransformer {
+    constructor() {
+        this.deviceHasTimestamps = false;
+    }
+    transform(chunk, controller) {
+        // Pass through pure newline / empty sentinel unchanged so that
+        // carriage-return overwrite logic in console-color.ts still works.
+        if (chunk === "" || chunk === "\n" || chunk === "\r") {
+            controller.enqueue(chunk);
+            return;
+        }
+        if (!this.deviceHasTimestamps && DEVICE_TIMESTAMP_RE.test(chunk)) {
+            this.deviceHasTimestamps = true;
+        }
+        if (this.deviceHasTimestamps) {
+            controller.enqueue(chunk);
+            return;
+        }
+        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}`);
+    }
+    reset() {
+        this.deviceHasTimestamps = false;
+    }
+}

package/package.cli.json

@@ -1,6 +1,6 @@
 {
   "name": "esp32tool",
-  "version": "1.6.3",
+  "version": "1.6.5",
   "private": true,
   "type": "module",
   "description": "ESP32Tool - Standalone command-line tool (build-time config only)",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "esp32tool",
-  "version": "1.6.4",
+  "version": "1.6.5",
   "type": "module",
   "description": "Flash & Read ESP devices using WebSerial, Electron, and also Android mobile via WebUSB",
   "main": "electron/main.cjs",
@@ -20,14 +20,15 @@
     "node": ">=25.4.0"
   },
   "scripts": {
-    "prebuild": "node -e \"const fs=require('fs'); fs.rmSync('dist',{recursive:true,force:true}); fs.rmSync('js/modules',{recursive:true,force:true}); fs.mkdirSync('js/modules',{recursive:true});\"",
-    "build": "npm run prebuild && node update-sw-version.cjs && tsc --skipLibCheck && rollup -c && node -e \"const fs=require('fs'); fs.readdirSync('dist/web').filter(f=>f.endsWith('.js')).forEach(f=>fs.copyFileSync('dist/web/'+f,'js/modules/'+f)); fs.renameSync('js/modules/index.js','js/modules/esptool.js');\" && node fix-cli-imports.cjs",
+    "prebuild": "node -e \"const fs=require('fs'); fs.rmSync('dist',{recursive:true,force:true}); fs.rmSync('js/modules',{recursive:true,force:true}); fs.rmSync('js/util',{recursive:true,force:true}); fs.mkdirSync('js/modules',{recursive:true}); fs.mkdirSync('js/util',{recursive:true});\"",
+    "build": "npm run prebuild && node update-sw-version.cjs && tsc --skipLibCheck && tsc -p tsconfig.util.json && rollup -c && node -e \"const fs=require('fs'); fs.readdirSync('dist/web').filter(f=>f.endsWith('.js')).forEach(f=>fs.copyFileSync('dist/web/'+f,'js/modules/'+f)); fs.renameSync('js/modules/index.js','js/modules/esptool.js');\" && node fix-cli-imports.cjs",
     "build:binary": "node build-single-binary.cjs",
     "build:cli-electron": "node build-electron-cli.cjs",
     "format": "npm exec -- prettier --write src",
     "dev:clean": "node -e \"const fs=require('fs'); fs.rmSync('dist',{recursive:true,force:true});\"",
     "dev:tsc-once": "tsc",
     "dev:tsc": "tsc --watch",
+    "dev:tsc-util": "tsc -p tsconfig.util.json --watch",
     "dev:rollup": "rollup -c --watch",
     "dev:serve": "serve -p 5004",
     "develop": "npm run dev:clean && npm run dev:tsc-once && npm-run-all --parallel dev:serve dev:tsc dev:rollup",
@@ -54,14 +55,14 @@
     "@rollup/plugin-node-resolve": "^16.0.0",
     "@rollup/plugin-terser": "^1.0.0",
     "@rollup/plugin-typescript": "^12.3.0",
-    "@types/node": "^25.4.0",
+    "@types/node": "^25.5.2",
     "@types/pako": "^2.0.4",
     "@types/serialport": "^10.2.0",
     "@types/w3c-web-serial": "^1.0.7",
     "archiver": "^7.0.1",
     "electron": "^41.1.0",
     "electron-squirrel-startup": "^1.0.1",
-    "eslint": "^10.0.2",
+    "eslint": "^10.2.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.5",
     "npm-run-all": "^4.1.5",
@@ -69,7 +70,7 @@
     "rollup": "^4.60.1",
     "serve": "^14.2.6",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.57.2"
+    "typescript-eslint": "^8.58.0"
   },
   "dependencies": {
     "pako": "^2.1.0",