esp32tool 1.6.5 → 1.6.7

package/js/util/console-color.js

@@ -1,3 +1,56 @@
+const ANSI_256 = (() => {
+    const t = [];
+    // 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 = [
+    "black",
+    "red",
+    "green",
+    "yellow",
+    "blue",
+    "magenta",
+    "cyan",
+    "white",
+];
 export class ColoredConsole {
     constructor(targetElement) {
         this.targetElement = targetElement;
@@ -8,6 +61,10 @@ export class ColoredConsole {
             strikethrough: false,
             foregroundColor: null,
             backgroundColor: null,
+            fgRgb: null,
+            bgRgb: null,
+            dim: false,
+            reverse: false,
             carriageReturn: false,
             lines: [],
             secret: false,
@@ -24,16 +81,16 @@ export class ColoredConsole {
     processLine(line) {
         // 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) => {
-            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)
@@ -46,10 +103,41 @@ export class ColoredConsole {
                 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);
             if (this.state.secret) {
@@ -66,18 +154,40 @@ export class ColoredConsole {
             const j = match.index;
             addSpan(line.substring(i, j));
             i = j + match[0].length;
-            if (match[1] === undefined)
+            // Only process SGR sequences (final byte 'm'); skip cursor, erase, etc.
+            if (match[1] === undefined || match[2] !== "m")
+                continue;
+            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;
-            for (const colorCode of match[1].split(";")) {
-                switch (parseInt(colorCode)) {
+            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;
@@ -85,6 +195,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;
@@ -99,6 +212,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;
@@ -107,6 +223,7 @@ export class ColoredConsole {
                         break;
                     case 22:
                         this.state.bold = false;
+                        this.state.dim = false;
                         break;
                     case 23:
                         this.state.italic = false;
@@ -118,6 +235,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;
@@ -126,59 +246,214 @@ 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));
@@ -193,8 +468,6 @@ export class ColoredConsole {
             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;
@@ -217,13 +490,11 @@ export class ColoredConsole {
             this.targetElement.appendChild(fragment);
         }
         this.state.lines = [];
-        // 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);
         }
@@ -249,6 +520,9 @@ export const coloredConsoleStyles = `
   .log-bold {
     font-weight: bold;
   }
+  .log-dim {
+    opacity: 0.5;
+  }
   .log-italic {
     font-style: italic;
   }
@@ -283,6 +557,10 @@ export const coloredConsoleStyles = `
     width: 1px;
     font-size: 1px;
   }
+  .log-reverse {
+    background: #ddd;
+    color: #1c1c1c;
+  }
   .log-fg-black {
     color: rgb(128, 128, 128);
   }

package/js/util/timestamp-transformer.js

@@ -1,14 +1,16 @@
-// 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)/;
+const DEVICE_TIMESTAMP_RE = /^\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 {
     constructor() {
         this.deviceHasTimestamps = false;
@@ -27,11 +29,30 @@ export class TimestampTransformer {
             controller.enqueue(chunk);
             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() {
         this.deviceHasTimestamps = false;