esp32tool 1.6.4 → 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,8 +60,15 @@ 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;
+  blink: boolean;
+  rapidBlink: boolean;
 }
 
 export class ColoredConsole {
@@ -17,54 +79,82 @@ export class ColoredConsole {
     strikethrough: false,
     foregroundColor: null,
     backgroundColor: null,
+    fgRgb: null,
+    bgRgb: null,
+    dim: false,
+    reverse: false,
     carriageReturn: false,
+    lines: [],
     secret: false,
+    blink: false,
+    rapidBlink: false,
   };
 
   constructor(public targetElement: HTMLElement) {}
 
   logs(): string {
+    if (this.state.lines.length > 0) {
+      this.processLines();
+    }
     return this.targetElement.innerText;
   }
 
-  addLine(line: string) {
+  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;
 
-    if (this.state.carriageReturn) {
-      if (line !== "\n") {
-        // don't remove if \r\n
-        if (this.targetElement.lastChild) {
-          this.targetElement.removeChild(this.targetElement.lastChild);
-        }
-      }
-      this.state.carriageReturn = false;
-    }
-
-    const hasBareCR = line.endsWith("\r") && !line.endsWith("\r\n");
-    if (hasBareCR) {
-      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.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.foregroundColor !== null)
-        span.classList.add(`log-fg-${this.state.foregroundColor}`);
-      if (this.state.backgroundColor !== null)
-        span.classList.add(`log-bg-${this.state.backgroundColor}`);
+      if (this.state.blink) span.classList.add("log-blink");
+      if (this.state.rapidBlink) span.classList.add("log-rapid-blink");
+
+      // 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);
 
@@ -84,23 +174,49 @@ 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;
+
+      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)) {
+      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;
             break;
           case 1:
             this.state.bold = true;
             break;
+          case 2:
+            this.state.dim = true;
+            break;
           case 3:
             this.state.italic = true;
             break;
@@ -108,16 +224,25 @@ export class ColoredConsole {
             this.state.underline = true;
             break;
           case 5:
-            this.state.secret = true;
+            this.state.blink = true;
+            this.state.rapidBlink = false;
             break;
           case 6:
-            this.state.secret = false;
+            this.state.rapidBlink = true;
+            this.state.blink = false;
+            break;
+          case 7:
+            this.state.reverse = true;
+            break;
+          case 8:
+            this.state.secret = true;
             break;
           case 9:
             this.state.strikethrough = true;
             break;
           case 22:
             this.state.bold = false;
+            this.state.dim = false;
             break;
           case 23:
             this.state.italic = false;
@@ -125,77 +250,275 @@ export class ColoredConsole {
           case 24:
             this.state.underline = false;
             break;
+          case 25:
+            this.state.blink = false;
+            this.state.rapidBlink = false;
+            break;
+          case 27:
+            this.state.reverse = false;
+            break;
+          case 28:
+            this.state.secret = false;
+            break;
           case 29:
             this.state.strikethrough = false;
             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 40:
-            this.state.backgroundColor = "black";
+          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;
         }
       }
     }
+    addSpan(line.substring(i));
+    return lineSpan;
+  }
+
+  processLines() {
     const atBottom =
       this.targetElement.scrollTop >
       this.targetElement.scrollHeight - this.targetElement.offsetHeight - 50;
+    const prevCarriageReturn = this.state.carriageReturn;
+    const fragment = document.createDocumentFragment();
 
-    addSpan(line.substring(i));
+    if (this.state.lines.length === 0) {
+      return;
+    }
+
+    for (const line of this.state.lines) {
+      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;
     }
   }
+
+  addLine(line: string) {
+    if (this.state.lines.length === 0) {
+      setTimeout(() => this.processLines(), 0);
+    }
+    this.state.lines.push(line);
+  }
 }
 
 export const coloredConsoleStyles = `
@@ -217,6 +540,9 @@ export const coloredConsoleStyles = `
   .log-bold {
     font-weight: bold;
   }
+  .log-dim {
+    opacity: 0.5;
+  }
   .log-italic {
     font-style: italic;
   }
@@ -229,6 +555,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;
@@ -240,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/line-break-transformer.ts

@@ -7,10 +7,24 @@ export class LineBreakTransformer implements Transformer<string, 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"));
+    // 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: RegExpExecArray | null;
+    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: TransformStreamDefaultController<string>) {

package/src/util/timestamp-transformer.ts

@@ -0,0 +1,45 @@
+// 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:
+//   [HH:MM:SS]        wall-clock bracket
+//   [HH:MM:SS.mmm]    wall-clock bracket with millis
+//   HH:MM:SS.mmm      plain wall-clock
+const DEVICE_TIMESTAMP_RE =
+  /^\s*(?:\[\d{2}:\d{2}:\d{2}(?:\.\d+)?\]|(?:\d{2}:){2}\d{2}\.\d)/;
+
+export class TimestampTransformer implements Transformer<string, string> {
+  private deviceHasTimestamps = false;
+
+  transform(
+    chunk: string,
+    controller: TransformStreamDefaultController<string>,
+  ) {
+    // 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/sw.js

@@ -1,5 +1,5 @@
 // Service Worker for ESP32Tool PWA
-const CACHE_NAME = 'esp32tool-v1.6.4';
+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)

package/tsconfig.util.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "js/util",
+    "declaration": false,
+    "removeComments": false
+  },
+  "include": ["src/util/**/*.ts"]
+}