esp32tool 1.6.5 → 1.6.6

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,7 +102,7 @@ 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");
@@ -50,16 +113,48 @@ export class ColoredConsole {
 
       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 +174,39 @@ 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;
+
+      for (let ci = 0; ci < codes.length; ci++) {
+        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 +214,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 +231,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 +242,7 @@ export class ColoredConsole {
             break;
           case 22:
             this.state.bold = false;
+            this.state.dim = false;
             break;
           case 23:
             this.state.italic = false;
@@ -131,6 +254,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,57 +265,203 @@ 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;
         }
       }
@@ -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,13 @@
-// 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)/;
 
 export class TimestampTransformer implements Transformer<string, string> {
   private deviceHasTimestamps = false;

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.6';
 const RUNTIME_CACHE = 'esp32tool-runtime';
 
 // Core files to cache on install (relative paths work for any deployment path)