esp32tool 1.2.0 → 1.3.0

package/js/util/console-color.js

@@ -0,0 +1,282 @@
+export class ColoredConsole {
+  constructor(targetElement) {
+    this.targetElement = targetElement;
+    this.state = {
+      bold: false,
+      italic: false,
+      underline: false,
+      strikethrough: false,
+      foregroundColor: null,
+      backgroundColor: null,
+      carriageReturn: false,
+      secret: false,
+    };
+  }
+
+  logs() {
+    return this.targetElement.innerText;
+  }
+
+  addLine(line) {
+    // biome-ignore lint/suspicious/noControlCharactersInRegex: ANSI escape sequences
+    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;
+    }
+
+    if (line.includes("\r")) {
+      this.state.carriageReturn = true;
+    }
+
+    const lineSpan = document.createElement("span");
+    lineSpan.classList.add("line");
+    this.targetElement.appendChild(lineSpan);
+
+    const addSpan = (content) => {
+      if (content === "") return;
+
+      const span = document.createElement("span");
+      if (this.state.bold) span.classList.add("log-bold");
+      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}`);
+      span.appendChild(document.createTextNode(content));
+      lineSpan.appendChild(span);
+
+      if (this.state.secret) {
+        const redacted = document.createElement("span");
+        redacted.classList.add("log-secret-redacted");
+        redacted.appendChild(document.createTextNode("[redacted]"));
+        lineSpan.appendChild(redacted);
+      }
+    };
+
+    while (true) {
+      const match = re.exec(line);
+      if (match === null) break;
+
+      const j = match.index;
+      addSpan(line.substring(i, j));
+      i = j + match[0].length;
+
+      if (match[1] === undefined) continue;
+
+      for (const colorCode of match[1].split(";")) {
+        switch (parseInt(colorCode)) {
+          case 0:
+            // reset
+            this.state.bold = false;
+            this.state.italic = false;
+            this.state.underline = false;
+            this.state.strikethrough = false;
+            this.state.foregroundColor = null;
+            this.state.backgroundColor = null;
+            this.state.secret = false;
+            break;
+          case 1:
+            this.state.bold = true;
+            break;
+          case 3:
+            this.state.italic = true;
+            break;
+          case 4:
+            this.state.underline = true;
+            break;
+          case 5:
+            this.state.secret = true;
+            break;
+          case 6:
+            this.state.secret = false;
+            break;
+          case 9:
+            this.state.strikethrough = true;
+            break;
+          case 22:
+            this.state.bold = false;
+            break;
+          case 23:
+            this.state.italic = false;
+            break;
+          case 24:
+            this.state.underline = false;
+            break;
+          case 29:
+            this.state.strikethrough = false;
+            break;
+          case 30:
+            this.state.foregroundColor = "black";
+            break;
+          case 31:
+            this.state.foregroundColor = "red";
+            break;
+          case 32:
+            this.state.foregroundColor = "green";
+            break;
+          case 33:
+            this.state.foregroundColor = "yellow";
+            break;
+          case 34:
+            this.state.foregroundColor = "blue";
+            break;
+          case 35:
+            this.state.foregroundColor = "magenta";
+            break;
+          case 36:
+            this.state.foregroundColor = "cyan";
+            break;
+          case 37:
+            this.state.foregroundColor = "white";
+            break;
+          case 39:
+            this.state.foregroundColor = null;
+            break;
+          case 41:
+            this.state.backgroundColor = "red";
+            break;
+          case 42:
+            this.state.backgroundColor = "green";
+            break;
+          case 43:
+            this.state.backgroundColor = "yellow";
+            break;
+          case 44:
+            this.state.backgroundColor = "blue";
+            break;
+          case 45:
+            this.state.backgroundColor = "magenta";
+            break;
+          case 46:
+            this.state.backgroundColor = "cyan";
+            break;
+          case 47:
+            this.state.backgroundColor = "white";
+            break;
+          case 40:
+            this.state.backgroundColor = "black";
+            break;
+          case 49:
+            this.state.backgroundColor = null;
+            break;
+        }
+      }
+    }
+    
+    // Use percentage-based threshold (5% of viewport height) for better UX across screen sizes
+    const scrollThreshold = this.targetElement.offsetHeight * 0.05;
+    const atBottom =
+      this.targetElement.scrollTop >
+      this.targetElement.scrollHeight - this.targetElement.offsetHeight - scrollThreshold;
+
+    addSpan(line.substring(i));
+
+    // Keep scroll at bottom
+    if (atBottom) {
+      this.targetElement.scrollTop = this.targetElement.scrollHeight;
+    }
+  }
+}
+
+export const coloredConsoleStyles = `
+  .log {
+    flex: 1;
+    background-color: #1c1c1c;
+    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier,
+      monospace;
+    font-size: 12px;
+    padding: 16px;
+    overflow: auto;
+    line-height: 1.45;
+    border-radius: 3px;
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+    color: #ddd;
+  }
+
+  .log-bold {
+    font-weight: bold;
+  }
+  .log-italic {
+    font-style: italic;
+  }
+  .log-underline {
+    text-decoration: underline;
+  }
+  .log-strikethrough {
+    text-decoration: line-through;
+  }
+  .log-underline.log-strikethrough {
+    text-decoration: underline line-through;
+  }
+  .log-secret {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+  }
+  .log-secret-redacted {
+    opacity: 0;
+    width: 1px;
+    font-size: 1px;
+  }
+  .log-fg-black {
+    color: rgb(128, 128, 128);
+  }
+  .log-fg-red {
+    color: rgb(255, 0, 0);
+  }
+  .log-fg-green {
+    color: rgb(0, 255, 0);
+  }
+  .log-fg-yellow {
+    color: rgb(255, 255, 0);
+  }
+  .log-fg-blue {
+    color: rgb(0, 0, 255);
+  }
+  .log-fg-magenta {
+    color: rgb(255, 0, 255);
+  }
+  .log-fg-cyan {
+    color: rgb(0, 255, 255);
+  }
+  .log-fg-white {
+    color: rgb(187, 187, 187);
+  }
+  .log-bg-black {
+    background-color: rgb(0, 0, 0);
+  }
+  .log-bg-red {
+    background-color: rgb(255, 0, 0);
+  }
+  .log-bg-green {
+    background-color: rgb(0, 255, 0);
+  }
+  .log-bg-yellow {
+    background-color: rgb(255, 255, 0);
+  }
+  .log-bg-blue {
+    background-color: rgb(0, 0, 255);
+  }
+  .log-bg-magenta {
+    background-color: rgb(255, 0, 255);
+  }
+  .log-bg-cyan {
+    background-color: rgb(0, 255, 255);
+  }
+  .log-bg-white {
+    background-color: rgb(255, 255, 255);
+  }
+`;

package/js/util/line-break-transformer.js

@@ -0,0 +1,19 @@
+export class LineBreakTransformer {
+  constructor() {
+    this.chunks = "";
+  }
+
+  transform(chunk, controller) {
+    // 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"));
+  }
+
+  flush(controller) {
+    // When the stream is closed, flush any remaining chunks out.
+    controller.enqueue(this.chunks);
+  }
+}

package/package.cli.json

@@ -1,6 +1,6 @@
 {
   "name": "esp32tool",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "private": true,
   "type": "module",
   "description": "ESP32Tool - Standalone command-line tool (build-time config only)",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "esp32tool",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "type": "module",
   "description": "Flash & Read ESP devices using WebSerial, Electron, and also Android mobile via WebUSB",
   "main": "electron/main.cjs",
@@ -49,9 +49,9 @@
     "@rollup/plugin-node-resolve": "^16.0.0",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^12.3.0",
-    "@types/node": "^25.0.6",
+    "@types/node": "^25.0.10",
     "@types/pako": "^2.0.4",
-    "@types/serialport": "^8.0.5",
+    "@types/serialport": "^10.2.0",
     "@types/w3c-web-serial": "^1.0.7",
     "archiver": "^7.0.1",
     "electron": "^39.2.5",
@@ -59,18 +59,19 @@
     "eslint": "^9.39.2",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.4",
-    "prettier": "^3.7.3",
-    "rollup": "^4.53.5",
+    "prettier": "^3.8.1",
+    "rollup": "^4.56.0",
     "serve": "^14.2.4",
     "typescript": "^5.7.3",
-    "typescript-eslint": "^8.53.0"
+    "typescript-eslint": "^8.53.1"
   },
   "dependencies": {
     "pako": "^2.1.0",
     "tslib": "^2.8.1",
-    "usb": "^2.16.0"
+    "usb": "^2.17.0"
   },
   "overrides": {
-    "tmp": "^0.2.4"
+    "tmp": "^0.2.4",
+    "tar": "^7.5.6"
   }
 }

package/src/console.ts

@@ -0,0 +1,278 @@
+import { ColoredConsole, coloredConsoleStyles } from "./util/console-color.js";
+import { LineBreakTransformer } from "./util/line-break-transformer.js";
+
+export class ESP32ToolConsole {
+  private port: SerialPort;
+  private console?: ColoredConsole;
+  private cancelConnection?: () => Promise<void>;
+  private containerElement: HTMLElement;
+  private allowInput: boolean;
+
+  constructor(
+    port: SerialPort,
+    containerElement: HTMLElement,
+    allowInput: boolean = true,
+  ) {
+    this.port = port;
+    this.containerElement = containerElement;
+    this.allowInput = allowInput;
+  }
+
+  public logs(): string {
+    return this.console?.logs() || "";
+  }
+
+  public async init() {
+    // Create console HTML
+    this.containerElement.innerHTML = `
+      <style>
+        .esp32tool-console-wrapper {
+          background-color: #1c1c1c;
+          color: #ddd;
+          font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier,
+            monospace;
+          line-height: 1.45;
+          display: flex;
+          flex-direction: column;
+          height: 100%;
+          border: 1px solid #333;
+          border-radius: 4px;
+        }
+        .esp32tool-console-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding: 8px 12px;
+          background-color: #2a2a2a;
+          border-bottom: 1px solid #333;
+        }
+        .esp32tool-console-header h3 {
+          margin: 0;
+          font-size: 14px;
+          font-weight: 600;
+        }
+        .esp32tool-console-controls {
+          display: flex;
+          gap: 8px;
+        }
+        .esp32tool-console-controls button {
+          padding: 4px 12px;
+          font-size: 12px;
+          background-color: #444;
+          color: #ddd;
+          border: 1px solid #555;
+          border-radius: 3px;
+          cursor: pointer;
+        }
+        .esp32tool-console-controls button:hover {
+          background-color: #555;
+        }
+        .esp32tool-console-form {
+          display: flex;
+          align-items: center;
+          padding: 0 8px 0 16px;
+          background-color: #1c1c1c;
+          border-top: 1px solid #333;
+        }
+        .esp32tool-console-input {
+          flex: 1;
+          padding: 8px;
+          margin: 4px 8px;
+          border: 0;
+          outline: none;
+          background-color: #1c1c1c;
+          color: #ddd;
+          font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier,
+            monospace;
+          font-size: 12px;
+        }
+        ${coloredConsoleStyles}
+        .esp32tool-console-wrapper .log {
+          flex: 1;
+          margin: 0;
+          border-radius: 0;
+        }
+      </style>
+      <div class="esp32tool-console-wrapper">
+        <div class="esp32tool-console-header">
+          <h3>ESP Console</h3>
+          <div class="esp32tool-console-controls">
+            <button id="console-clear-btn">Clear</button>
+            <button id="console-reset-btn">Reset Device</button>
+            <button id="console-close-btn">Close Console</button>
+          </div>
+        </div>
+        <div class="log"></div>
+        ${
+          this.allowInput
+            ? `<form class="esp32tool-console-form">
+                  <input class="esp32tool-console-input" autofocus placeholder="Type command and press Enter...">
+                </form>`
+            : ""
+        }
+      </div>
+    `;
+
+    this.console = new ColoredConsole(
+      this.containerElement.querySelector(".log")!,
+    );
+
+    // Setup event listeners
+    const clearBtn = this.containerElement.querySelector("#console-clear-btn");
+    if (clearBtn) {
+      clearBtn.addEventListener("click", () => this.clear());
+    }
+
+    const resetBtn = this.containerElement.querySelector("#console-reset-btn");
+    if (resetBtn) {
+      resetBtn.addEventListener("click", () => this.reset());
+    }
+
+    const closeBtn = this.containerElement.querySelector("#console-close-btn");
+    if (closeBtn) {
+      closeBtn.addEventListener("click", () => {
+        this.containerElement.dispatchEvent(
+          new CustomEvent("console-close", { bubbles: true }),
+        );
+      });
+    }
+
+    if (this.allowInput) {
+      const input = this.containerElement.querySelector<HTMLInputElement>(
+        ".esp32tool-console-input",
+      )!;
+
+      this.containerElement.addEventListener("click", () => {
+        // Only focus input if user didn't select some text
+        if (getSelection()?.toString() === "") {
+          input.focus();
+        }
+      });
+
+      const form = this.containerElement.querySelector("form");
+      if (form) {
+        form.addEventListener("submit", (ev) => {
+          ev.preventDefault();
+          ev.stopPropagation();
+          this._sendCommand();
+        });
+      }
+
+      input.addEventListener("keydown", (ev) => {
+        if (ev.key === "Enter") {
+          ev.preventDefault();
+          ev.stopPropagation();
+          this._sendCommand();
+        }
+      });
+    }
+
+    // Start connection
+    const abortController = new AbortController();
+    const connection = this._connect(abortController.signal);
+    this.cancelConnection = () => {
+      abortController.abort();
+      return connection;
+    };
+  }
+
+  private async _connect(abortSignal: AbortSignal) {
+    console.log("Starting console read loop");
+
+    // Check if port.readable is available
+    if (!this.port.readable) {
+      this.console!.addLine("");
+      this.console!.addLine("");
+      this.console!.addLine(
+        `Terminal disconnected: Port readable stream not available`,
+      );
+      console.error(
+        "Port readable stream not available - port may need to be reopened at correct baudrate",
+      );
+      return;
+    }
+
+    try {
+      await this.port
+        .readable!.pipeThrough(
+          new TextDecoderStream() as ReadableWritablePair<string, Uint8Array>,
+          {
+            signal: abortSignal,
+          },
+        )
+        .pipeThrough(new TransformStream(new LineBreakTransformer()))
+        .pipeTo(
+          new WritableStream({
+            write: (chunk) => {
+              const cleaned = chunk.replace(/\r\n$/, "\n");
+              this.console!.addLine(cleaned);
+            },
+          }),
+        );
+      if (!abortSignal.aborted) {
+        this.console!.addLine("");
+        this.console!.addLine("");
+        this.console!.addLine("Terminal disconnected");
+      }
+    } catch (e) {
+      this.console!.addLine("");
+      this.console!.addLine("");
+      this.console!.addLine(`Terminal disconnected: ${e}`);
+    } finally {
+      await new Promise((resolve) => setTimeout(resolve, 100));
+      console.log("Finished console read loop");
+    }
+  }
+
+  private async _sendCommand() {
+    const input = this.containerElement.querySelector<HTMLInputElement>(
+      ".esp32tool-console-input",
+    )!;
+    const command = input.value;
+    if (!this.port.writable) {
+      this.console!.addLine("Terminal disconnected: port not writable");
+      return;
+    }
+    const encoder = new TextEncoder();
+    let writer: WritableStreamDefaultWriter<Uint8Array> | undefined;
+    try {
+      writer = this.port.writable!.getWriter();
+      await writer.write(encoder.encode(command + "\r\n"));
+      this.console!.addLine(`> ${command}`);
+    } catch (err) {
+      this.console!.addLine(`Write failed: ${err}`);
+    } finally {
+      if (writer) {
+        try {
+          writer.releaseLock();
+        } catch (err) {
+          console.error("Ignoring release lock error", err);
+        }
+      }
+    }
+    input.value = "";
+    input.focus();
+  }
+
+  public clear() {
+    const logElement = this.containerElement.querySelector(".log");
+    if (logElement) {
+      logElement.innerHTML = "";
+    }
+  }
+
+  public async reset() {
+    console.log("Reset device requested from console");
+    // Don't use addLine here as stream might already be closed
+    // This will be called from script.js with proper reset logic
+    const event = new CustomEvent("console-reset");
+    this.containerElement.dispatchEvent(event);
+  }
+
+  public async disconnect() {
+    if (this.cancelConnection) {
+      await this.cancelConnection();
+      this.cancelConnection = undefined;
+    }
+  }
+}