esp32tool 1.6.5 → 1.6.7

package/package.cli.json

@@ -1,6 +1,6 @@
 {
   "name": "esp32tool",
-  "version": "1.6.5",
+  "version": "1.6.7",
   "private": true,
   "type": "module",
   "description": "ESP32Tool - Standalone command-line tool (build-time config only)",
@@ -23,7 +23,7 @@
     "usb": "^2.17.0"
   },
   "devDependencies": {
-    "electron": "^39.2.5"
+    "electron": "^42.0.1"
   },
   "_comment": "This file is ONLY used during CLI builds. It is temporarily swapped with package.json by build-electron-cli.cjs, then restored. Never publish this file to npm. Keep version in sync with main package.json when releasing."
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "esp32tool",
-  "version": "1.6.5",
+  "version": "1.6.7",
   "type": "module",
   "description": "Flash & Read ESP devices using WebSerial, Electron, and also Android mobile via WebUSB",
   "main": "electron/main.cjs",
@@ -24,7 +24,7 @@
     "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",
+    "format": "npm exec -- prettier --write src \"js/*.js\" electron css",
     "dev:clean": "node -e \"const fs=require('fs'); fs.rmSync('dist',{recursive:true,force:true});\"",
     "dev:tsc-once": "tsc",
     "dev:tsc": "tsc --watch",
@@ -50,27 +50,26 @@
     "@electron-forge/maker-zip": "^7.11.1",
     "@electron-forge/plugin-auto-unpack-natives": "^7.11.1",
     "@electron/fuses": "^2.1.1",
-    "@eslint/js": "^9.39.3",
+    "@eslint/js": "^9.39.4",
     "@rollup/plugin-json": "^6.1.0",
-    "@rollup/plugin-node-resolve": "^16.0.0",
+    "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-terser": "^1.0.0",
     "@rollup/plugin-typescript": "^12.3.0",
-    "@types/node": "^25.5.2",
+    "@types/node": "^25.7.0",
     "@types/pako": "^2.0.4",
-    "@types/serialport": "^10.2.0",
-    "@types/w3c-web-serial": "^1.0.7",
+    "@types/w3c-web-serial": "^1.0.8",
     "archiver": "^7.0.1",
-    "electron": "^41.1.0",
+    "electron": "^42.0.1",
     "electron-squirrel-startup": "^1.0.1",
-    "eslint": "^10.2.0",
+    "eslint": "^10.3.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.5",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.8.1",
-    "rollup": "^4.60.1",
+    "prettier": "^3.8.3",
+    "rollup": "^4.60.3",
     "serve": "^14.2.6",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.58.0"
+    "typescript-eslint": "^8.59.1"
   },
   "dependencies": {
     "pako": "^2.1.0",
@@ -78,11 +77,11 @@
     "usb": "^2.17.0"
   },
   "overrides": {
-    "tmp": "^0.2.4",
-    "tar": "^7.5.6",
-    "minimatch": "^10.2.1",
+    "tmp": "^0.2.5",
+    "tar": "^7.5.13",
+    "minimatch": "^10.2.5",
     "serve": {
-      "ajv": "^8.18.0"
+      "ajv": "^8.20.0"
     },
     "@electron/asar": "^4.0.1",
     "serialize-javascript": "^7.0.3",

package/src/util/console-color.ts

@@ -1,3 +1,58 @@
+const ANSI_256: string[] = (() => {
+  const t: string[] = [];
+  // Standard colors 0-7
+  t[0] = "rgb(0,0,0)";
+  t[1] = "rgb(128,0,0)";
+  t[2] = "rgb(0,128,0)";
+  t[3] = "rgb(128,128,0)";
+  t[4] = "rgb(0,0,128)";
+  t[5] = "rgb(128,0,128)";
+  t[6] = "rgb(0,128,128)";
+  t[7] = "rgb(192,192,192)";
+  // Bright colors 8-15
+  t[8] = "rgb(128,128,128)";
+  t[9] = "rgb(255,0,0)";
+  t[10] = "rgb(0,255,0)";
+  t[11] = "rgb(255,255,0)";
+  t[12] = "rgb(99,153,255)";
+  t[13] = "rgb(255,0,255)";
+  t[14] = "rgb(0,255,255)";
+  t[15] = "rgb(255,255,255)";
+  // 6x6x6 color cube 16-231
+  for (let i = 0; i < 216; i++) {
+    const r = Math.floor(i / 36);
+    const g = Math.floor((i % 36) / 6);
+    const b = i % 6;
+    t[16 + i] =
+      "rgb(" +
+      (r ? r * 40 + 55 : 0) +
+      "," +
+      (g ? g * 40 + 55 : 0) +
+      "," +
+      (b ? b * 40 + 55 : 0) +
+      ")";
+  }
+  // Grayscale ramp 232-255
+  for (let i = 0; i < 24; i++) {
+    const v = i * 10 + 8;
+    t[232 + i] = "rgb(" + v + "," + v + "," + v + ")";
+  }
+  return t;
+})();
+
+// Maps 256-color indices 0–7 to the named CSS class tokens so that
+// \x1b[38;5;1m renders the same red as \x1b[31m.
+const ANSI_NAMED: (string | null)[] = [
+  "black",
+  "red",
+  "green",
+  "yellow",
+  "blue",
+  "magenta",
+  "cyan",
+  "white",
+];
+
 interface ConsoleState {
   bold: boolean;
   italic: boolean;
@@ -5,6 +60,10 @@ interface ConsoleState {
   strikethrough: boolean;
   foregroundColor: string | null;
   backgroundColor: string | null;
+  fgRgb: string | null;
+  bgRgb: string | null;
+  dim: boolean;
+  reverse: boolean;
   carriageReturn: boolean;
   lines: string[];
   secret: boolean;
@@ -20,6 +79,10 @@ export class ColoredConsole {
     strikethrough: false,
     foregroundColor: null,
     backgroundColor: null,
+    fgRgb: null,
+    bgRgb: null,
+    dim: false,
+    reverse: false,
     carriageReturn: false,
     lines: [],
     secret: false,
@@ -39,27 +102,57 @@ export class ColoredConsole {
   processLine(line: string): Element {
     // biome-ignore lint/suspicious/noControlCharactersInRegex: ANSI escape sequences
     // eslint-disable-next-line no-control-regex
-    const re = /(?:\x1B|\\x1B)(?:\[(.*?)[@-~]|\].*?(?:\x07|\x1B\\))/g;
+    const re = /(?:\x1B|\\x1B)(?:\[(.*?)([@-~])|\].*?(?:\x07|\x1B\\))/g;
     let i = 0;
 
     const lineSpan = document.createElement("span");
     lineSpan.classList.add("line");
 
     const addSpan = (content: string) => {
-      if (content === "") return;
-
       const span = document.createElement("span");
       if (this.state.bold) span.classList.add("log-bold");
+      if (this.state.dim) span.classList.add("log-dim");
       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}`);
+
+      // Resolve colors with reverse-video support
+      let fgRgb = this.state.fgRgb;
+      let bgRgb = this.state.bgRgb;
+      let fg = this.state.foregroundColor;
+      let bg = this.state.backgroundColor;
+
+      if (this.state.reverse) {
+        fgRgb = this.state.bgRgb;
+        bgRgb = this.state.fgRgb;
+        fg = this.state.backgroundColor;
+        bg = this.state.foregroundColor;
+        // When one side is unset, fill in the terminal defaults so the
+        // swap is always visible (fg default=#ddd, bg default=#1c1c1c).
+        if (!fgRgb && !fg && !bgRgb && !bg) {
+          span.classList.add("log-reverse");
+        } else {
+          if (!fgRgb && !fg) fgRgb = "rgb(28,28,28)";
+          if (!bgRgb && !bg) bgRgb = "rgb(221,221,221)";
+        }
+      }
+
+      // Inline rgb() style takes priority over CSS class
+      if (fgRgb) {
+        span.style.color = fgRgb;
+      } else if (fg !== null) {
+        span.classList.add(`log-fg-${fg}`);
+      }
+
+      if (bgRgb) {
+        span.style.backgroundColor = bgRgb;
+      } else if (bg !== null) {
+        span.classList.add(`log-bg-${bg}`);
+      }
+
       span.appendChild(document.createTextNode(content));
       lineSpan.appendChild(span);
 
@@ -79,18 +172,40 @@ export class ColoredConsole {
       addSpan(line.substring(i, j));
       i = j + match[0].length;
 
-      if (match[1] === undefined) continue;
+      // Only process SGR sequences (final byte 'm'); skip cursor, erase, etc.
+      if (match[1] === undefined || match[2] !== "m") continue;
 
-      for (const colorCode of match[1].split(";")) {
-        switch (parseInt(colorCode)) {
+      const rawCodes = match[1] === "" ? [""] : match[1].split(";");
+      const codes = [];
+      let invalidSgr = false;
+      for (const rawCode of rawCodes) {
+        if (rawCode === "") {
+          codes.push(0);
+          continue;
+        }
+        if (!/^\d+$/.test(rawCode)) {
+          invalidSgr = true;
+          break;
+        }
+        codes.push(Number(rawCode));
+      }
+      if (invalidSgr) continue;
+
+      let ci = 0;
+      while (ci < codes.length) {
+        const code = codes[ci];
+        switch (code) {
           case 0:
-            // reset
             this.state.bold = false;
+            this.state.dim = false;
             this.state.italic = false;
             this.state.underline = false;
             this.state.strikethrough = false;
             this.state.foregroundColor = null;
             this.state.backgroundColor = null;
+            this.state.fgRgb = null;
+            this.state.bgRgb = null;
+            this.state.reverse = false;
             this.state.secret = false;
             this.state.blink = false;
             this.state.rapidBlink = false;
@@ -98,6 +213,9 @@ export class ColoredConsole {
           case 1:
             this.state.bold = true;
             break;
+          case 2:
+            this.state.dim = true;
+            break;
           case 3:
             this.state.italic = true;
             break;
@@ -112,6 +230,9 @@ export class ColoredConsole {
             this.state.rapidBlink = true;
             this.state.blink = false;
             break;
+          case 7:
+            this.state.reverse = true;
+            break;
           case 8:
             this.state.secret = true;
             break;
@@ -120,6 +241,7 @@ export class ColoredConsole {
             break;
           case 22:
             this.state.bold = false;
+            this.state.dim = false;
             break;
           case 23:
             this.state.italic = false;
@@ -131,6 +253,9 @@ export class ColoredConsole {
             this.state.blink = false;
             this.state.rapidBlink = false;
             break;
+          case 27:
+            this.state.reverse = false;
+            break;
           case 28:
             this.state.secret = false;
             break;
@@ -139,59 +264,206 @@ export class ColoredConsole {
             break;
           case 30:
             this.state.foregroundColor = "black";
+            this.state.fgRgb = null;
             break;
           case 31:
             this.state.foregroundColor = "red";
+            this.state.fgRgb = null;
             break;
           case 32:
             this.state.foregroundColor = "green";
+            this.state.fgRgb = null;
             break;
           case 33:
             this.state.foregroundColor = "yellow";
+            this.state.fgRgb = null;
             break;
           case 34:
             this.state.foregroundColor = "blue";
+            this.state.fgRgb = null;
             break;
           case 35:
             this.state.foregroundColor = "magenta";
+            this.state.fgRgb = null;
             break;
           case 36:
             this.state.foregroundColor = "cyan";
+            this.state.fgRgb = null;
             break;
           case 37:
             this.state.foregroundColor = "white";
+            this.state.fgRgb = null;
+            break;
+          case 38:
+            // Extended foreground: 38;5;n (256-color) or 38;2;r;g;b (true-color)
+            if (ci + 1 < codes.length) {
+              if (codes[ci + 1] === 5) {
+                if (ci + 2 < codes.length) {
+                  const idx = codes[ci + 2];
+                  if (idx >= 0 && idx <= 7 && ANSI_NAMED[idx]) {
+                    this.state.foregroundColor = ANSI_NAMED[idx];
+                    this.state.fgRgb = null;
+                  } else if (idx >= 0 && idx <= 255 && ANSI_256[idx]) {
+                    this.state.foregroundColor = null;
+                    this.state.fgRgb = ANSI_256[idx];
+                  }
+                  ci += 2;
+                } else {
+                  ci += 1;
+                }
+              } else if (codes[ci + 1] === 2) {
+                if (ci + 4 < codes.length) {
+                  this.state.foregroundColor = null;
+                  const r = Math.max(0, Math.min(255, codes[ci + 2]));
+                  const g = Math.max(0, Math.min(255, codes[ci + 3]));
+                  const b = Math.max(0, Math.min(255, codes[ci + 4]));
+                  this.state.fgRgb = "rgb(" + r + "," + g + "," + b + ")";
+                  ci += 4;
+                } else {
+                  ci = codes.length - 1;
+                }
+              }
+            }
             break;
           case 39:
             this.state.foregroundColor = null;
+            this.state.fgRgb = null;
             break;
           case 40:
             this.state.backgroundColor = "black";
+            this.state.bgRgb = null;
             break;
           case 41:
             this.state.backgroundColor = "red";
+            this.state.bgRgb = null;
             break;
           case 42:
             this.state.backgroundColor = "green";
+            this.state.bgRgb = null;
             break;
           case 43:
             this.state.backgroundColor = "yellow";
+            this.state.bgRgb = null;
             break;
           case 44:
             this.state.backgroundColor = "blue";
+            this.state.bgRgb = null;
             break;
           case 45:
             this.state.backgroundColor = "magenta";
+            this.state.bgRgb = null;
             break;
           case 46:
             this.state.backgroundColor = "cyan";
+            this.state.bgRgb = null;
             break;
           case 47:
             this.state.backgroundColor = "white";
+            this.state.bgRgb = null;
+            break;
+          case 48:
+            // Extended background: 48;5;n (256-color) or 48;2;r;g;b (true-color)
+            if (ci + 1 < codes.length) {
+              if (codes[ci + 1] === 5) {
+                if (ci + 2 < codes.length) {
+                  const idx = codes[ci + 2];
+                  if (idx >= 0 && idx <= 7 && ANSI_NAMED[idx]) {
+                    this.state.backgroundColor = ANSI_NAMED[idx];
+                    this.state.bgRgb = null;
+                  } else if (idx >= 0 && idx <= 255 && ANSI_256[idx]) {
+                    this.state.backgroundColor = null;
+                    this.state.bgRgb = ANSI_256[idx];
+                  }
+                  ci += 2;
+                } else {
+                  ci += 1;
+                }
+              } else if (codes[ci + 1] === 2) {
+                if (ci + 4 < codes.length) {
+                  this.state.backgroundColor = null;
+                  const r = Math.max(0, Math.min(255, codes[ci + 2]));
+                  const g = Math.max(0, Math.min(255, codes[ci + 3]));
+                  const b = Math.max(0, Math.min(255, codes[ci + 4]));
+                  this.state.bgRgb = "rgb(" + r + "," + g + "," + b + ")";
+                  ci += 4;
+                } else {
+                  ci = codes.length - 1;
+                }
+              }
+            }
             break;
           case 49:
             this.state.backgroundColor = null;
+            this.state.bgRgb = null;
+            break;
+          // Bright foreground colors
+          case 90:
+            this.state.foregroundColor = null;
+            this.state.fgRgb = ANSI_256[8];
+            break;
+          case 91:
+            this.state.foregroundColor = null;
+            this.state.fgRgb = ANSI_256[9];
+            break;
+          case 92:
+            this.state.foregroundColor = null;
+            this.state.fgRgb = ANSI_256[10];
+            break;
+          case 93:
+            this.state.foregroundColor = null;
+            this.state.fgRgb = ANSI_256[11];
+            break;
+          case 94:
+            this.state.foregroundColor = null;
+            this.state.fgRgb = ANSI_256[12];
+            break;
+          case 95:
+            this.state.foregroundColor = null;
+            this.state.fgRgb = ANSI_256[13];
+            break;
+          case 96:
+            this.state.foregroundColor = null;
+            this.state.fgRgb = ANSI_256[14];
+            break;
+          case 97:
+            this.state.foregroundColor = null;
+            this.state.fgRgb = ANSI_256[15];
+            break;
+          // Bright background colors
+          case 100:
+            this.state.backgroundColor = null;
+            this.state.bgRgb = ANSI_256[8];
+            break;
+          case 101:
+            this.state.backgroundColor = null;
+            this.state.bgRgb = ANSI_256[9];
+            break;
+          case 102:
+            this.state.backgroundColor = null;
+            this.state.bgRgb = ANSI_256[10];
+            break;
+          case 103:
+            this.state.backgroundColor = null;
+            this.state.bgRgb = ANSI_256[11];
+            break;
+          case 104:
+            this.state.backgroundColor = null;
+            this.state.bgRgb = ANSI_256[12];
+            break;
+          case 105:
+            this.state.backgroundColor = null;
+            this.state.bgRgb = ANSI_256[13];
+            break;
+          case 106:
+            this.state.backgroundColor = null;
+            this.state.bgRgb = ANSI_256[14];
+            break;
+          case 107:
+            this.state.backgroundColor = null;
+            this.state.bgRgb = ANSI_256[15];
             break;
         }
+        ci++;
       }
     }
     addSpan(line.substring(i));
@@ -210,8 +482,6 @@ export class ColoredConsole {
     }
 
     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;
@@ -238,14 +508,12 @@ export class ColoredConsole {
 
     this.state.lines = [];
 
-    // Keep scroll at bottom
     if (atBottom) {
       this.targetElement.scrollTop = this.targetElement.scrollHeight;
     }
   }
 
   addLine(line: string) {
-    // Processing of lines is deferred for performance reasons
     if (this.state.lines.length === 0) {
       setTimeout(() => this.processLines(), 0);
     }
@@ -272,6 +540,9 @@ export const coloredConsoleStyles = `
   .log-bold {
     font-weight: bold;
   }
+  .log-dim {
+    opacity: 0.5;
+  }
   .log-italic {
     font-style: italic;
   }
@@ -306,6 +577,10 @@ export const coloredConsoleStyles = `
     width: 1px;
     font-size: 1px;
   }
+  .log-reverse {
+    background: #ddd;
+    color: #1c1c1c;
+  }
   .log-fg-black {
     color: rgb(128, 128, 128);
   }

package/src/util/timestamp-transformer.ts

@@ -1,15 +1,18 @@
-// 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.
-//
+// Matches lines that already carry a wall-clock timestamp so we don't add a
+// redundant one.  Only real wall-clock formats are matched — tick-based
+// formats like FreeRTOS "(12345)" or ESP-IDF "I (15) boot:" are NOT matched
+// because they don't carry time-of-day 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)/;
+  /^\s*(?:\[\d{2}:\d{2}:\d{2}(?:\.\d+)?\]|(?:\d{2}:){2}\d{2}\.\d)/;
+
+// Matches leading ANSI SGR (color/style) codes at the start of a string
+// biome-ignore lint/suspicious/noControlCharactersInRegex: ANSI escape sequences
+// eslint-disable-next-line no-control-regex
+const LEADING_ANSI_RE = /^(\x1b\[(?:\d+;)*\d*m)+/;
 
 export class TimestampTransformer implements Transformer<string, string> {
   private deviceHasTimestamps = false;
@@ -34,11 +37,32 @@ export class TimestampTransformer implements Transformer<string, string> {
       return;
     }
 
+    // Extract leading ANSI codes to preserve them across line splits
+    const ansiMatch = chunk.match(LEADING_ANSI_RE);
+    const leadingAnsi = ansiMatch ? ansiMatch[0] : "";
+    const contentWithoutAnsi = leadingAnsi
+      ? chunk.slice(leadingAnsi.length)
+      : chunk;
+
     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}`);
+    const timestamp = `[${h}:${m}:${s}]`;
+
+    // For multi-line chunks, we need to preserve ANSI codes on each line
+    // Split on newlines, but keep the newline characters
+    const lines = contentWithoutAnsi.split(/(\r?\n)/);
+    let result = "";
+    for (const part of lines) {
+      if (part === "\n" || part === "\r\n") {
+        result += part;
+      } else if (part !== "") {
+        result += leadingAnsi + timestamp + " " + part;
+      }
+    }
+
+    controller.enqueue(result);
   }
 
   reset() {

package/sw.js

@@ -1,5 +1,5 @@
 // Service Worker for ESP32Tool PWA
-const CACHE_NAME = 'esp32tool-v1.6.5';
+const CACHE_NAME = 'esp32tool-v1.6.7';
 const RUNTIME_CACHE = 'esp32tool-runtime';
 
 // Core files to cache on install (relative paths work for any deployment path)