esp32tool 1.6.3 → 1.6.5

package/src/cli.ts

@@ -399,8 +399,19 @@ async function cmdEraseFlash(esploader: ESPLoader) {
   // Use stub for erasing
   const stub = await esploader.runStub();
 
-  // Erase flash
-  await stub.eraseFlash();
+  // Show animated progress while erasing
+  const frames = ["|", "/", "-", "\\"];
+  let frameIdx = 0;
+  const spinner = setInterval(() => {
+    process.stdout.write(`\rErasing... ${frames[frameIdx++ % frames.length]}`);
+  }, 200);
+
+  try {
+    await stub.eraseFlash();
+  } finally {
+    clearInterval(spinner);
+    process.stdout.write("\r                    \r");
+  }
 
   cliLogger.log("Erase complete!");
 }

package/src/console.ts

@@ -1,5 +1,6 @@
 import { ColoredConsole, coloredConsoleStyles } from "./util/console-color.js";
 import { LineBreakTransformer } from "./util/line-break-transformer.js";
+import { TimestampTransformer } from "./util/timestamp-transformer.js";
 
 export class ESP32ToolConsole {
   private port: SerialPort;
@@ -8,6 +9,11 @@ export class ESP32ToolConsole {
   private containerElement: HTMLElement;
   private allowInput: boolean;
 
+  // Command history buffer
+  private commandHistory: string[] = [];
+  private historyIndex: number = -1;
+  private currentInput: string = "";
+
   constructor(
     port: SerialPort,
     containerElement: HTMLElement,
@@ -163,6 +169,17 @@ export class ESP32ToolConsole {
           ev.preventDefault();
           ev.stopPropagation();
           this._sendCommand();
+        } else if (ev.key === "ArrowUp") {
+          ev.preventDefault();
+          this._navigateHistory(1, input);
+        } else if (ev.key === "ArrowDown") {
+          ev.preventDefault();
+          this._navigateHistory(-1, input);
+        } else {
+          // User is editing — reset history navigation to live input
+          if (this.historyIndex !== -1) {
+            this.historyIndex = -1;
+          }
         }
       });
     }
@@ -218,11 +235,11 @@ export class ESP32ToolConsole {
           },
         )
         .pipeThrough(new TransformStream(new LineBreakTransformer()))
+        .pipeThrough(new TransformStream(new TimestampTransformer()))
         .pipeTo(
           new WritableStream({
             write: (chunk) => {
-              const cleaned = chunk.replace(/\r\n$/, "\n");
-              this.console!.addLine(cleaned);
+              this.console!.addLine(chunk);
             },
           }),
         );
@@ -241,11 +258,49 @@ export class ESP32ToolConsole {
     }
   }
 
+  private _navigateHistory(direction: 1 | -1, input: HTMLInputElement) {
+    if (this.commandHistory.length === 0) return;
+
+    // Save current unsent input before navigating away
+    if (this.historyIndex === -1) {
+      this.currentInput = input.value;
+    }
+
+    const nextIndex = this.historyIndex + direction;
+
+    if (nextIndex < 0) {
+      // Back to unsent draft
+      this.historyIndex = -1;
+      input.value = this.currentInput;
+    } else if (nextIndex < this.commandHistory.length) {
+      this.historyIndex = nextIndex;
+      input.value = this.commandHistory[this.historyIndex];
+    }
+
+    // Move cursor to end
+    const len = input.value.length;
+    input.setSelectionRange(len, len);
+  }
+
   private async _sendCommand() {
     const input = this.containerElement.querySelector<HTMLInputElement>(
       ".esp32tool-console-input",
     )!;
     const command = input.value;
+
+    if (command.trim() !== "") {
+      // Avoid consecutive duplicates, cap at 100
+      if (this.commandHistory[0] !== command) {
+        this.commandHistory.unshift(command);
+        if (this.commandHistory.length > 100) {
+          this.commandHistory.pop();
+        }
+      }
+    }
+    // Reset history navigation state
+    this.historyIndex = -1;
+    this.currentInput = "";
+
     if (!this.port.writable) {
       this.console!.addLine("Terminal disconnected: port not writable");
       return;

package/src/esp_loader.ts

@@ -4335,6 +4335,8 @@ export class ESPLoader extends EventTarget {
     // Flush serial buffers before flash read operation
     await this.flushSerialBuffers();
 
+    const readStartTime = Date.now();
+
     this.logger.log(
       `Reading ${size} bytes from flash at address 0x${addr.toString(16)}...`,
     );
@@ -4442,6 +4444,8 @@ export class ESPLoader extends EventTarget {
             maxInFlight,
           );
 
+          const chunkStartTime = Date.now();
+
           const [res] = await this.checkCommand(ESP_READ_FLASH, pkt);
 
           if (res != 0) {
@@ -4520,6 +4524,16 @@ export class ESPLoader extends EventTarget {
 
           chunkSuccess = true;
 
+          const chunkDuration = Date.now() - chunkStartTime;
+          const speedKBs = (
+            resp.length /
+            1024 /
+            (chunkDuration / 1000)
+          ).toFixed(1);
+          this.logger.debug(
+            `Chunk read took ${chunkDuration} ms (${resp.length} bytes, ${speedKBs} KB/s)`,
+          );
+
           // ADAPTIVE SPEED ADJUSTMENT: Only for CDC devices
           // Non-CDC devices (CH340, CP2102) stay at fixed blockSize=31, maxInFlight=31
           if (this.isWebUSB() && this._isCDCDevice && retryCount === 0) {
@@ -4666,6 +4680,16 @@ export class ESPLoader extends EventTarget {
       );
     }
 
+    const totalDuration = Date.now() - readStartTime;
+    const totalSpeedKBs = (
+      allData.length /
+      1024 /
+      (totalDuration / 1000)
+    ).toFixed(1);
+    this.logger.log(
+      `Read complete: ${allData.length} bytes in ${(totalDuration / 1000).toFixed(1)} s (${totalSpeedKBs} KB/s)`,
+    );
+
     return allData;
   }
 }

package/src/util/console-color.ts

@@ -6,7 +6,10 @@ interface ConsoleState {
   foregroundColor: string | null;
   backgroundColor: string | null;
   carriageReturn: boolean;
+  lines: string[];
   secret: boolean;
+  blink: boolean;
+  rapidBlink: boolean;
 }
 
 export class ColoredConsole {
@@ -18,39 +21,29 @@ export class ColoredConsole {
     foregroundColor: null,
     backgroundColor: null,
     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;
     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;
@@ -61,6 +54,8 @@ export class ColoredConsole {
       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)
@@ -97,6 +92,8 @@ export class ColoredConsole {
             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;
@@ -108,10 +105,15 @@ 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 8:
+            this.state.secret = true;
             break;
           case 9:
             this.state.strikethrough = true;
@@ -125,6 +127,13 @@ export class ColoredConsole {
           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;
@@ -155,6 +164,9 @@ export class ColoredConsole {
           case 39:
             this.state.foregroundColor = null;
             break;
+          case 40:
+            this.state.backgroundColor = "black";
+            break;
           case 41:
             this.state.backgroundColor = "red";
             break;
@@ -176,26 +188,69 @@ export class ColoredConsole {
           case 47:
             this.state.backgroundColor = "white";
             break;
-          case 40:
-            this.state.backgroundColor = "black";
-            break;
           case 49:
             this.state.backgroundColor = null;
             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) {
+      // 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;
     }
   }
+
+  addLine(line: string) {
+    // 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 = `
@@ -229,6 +284,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;

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,47 @@
+// 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 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.3';
+const CACHE_NAME = 'esp32tool-v1.6.5';
 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"]
+}