tasmota-esp-web-tools 11.1.10 → 11.2.0

package/dist/components/ewt-console.d.ts

@@ -6,11 +6,16 @@ export declare class EwtConsole extends HTMLElement {
     onReset?: () => Promise<void>;
     private _console?;
     private _cancelConnection?;
+    private _commandHistory;
+    private _historyIndex;
+    private _currentInput;
     logs(): string;
     connectedCallback(): void;
     private _connect;
+    private _navigateHistory;
     private _sendCommand;
     disconnect(): Promise<void>;
+    disconnectedCallback(): void;
     reset(): Promise<void>;
 }
 declare global {

package/dist/components/ewt-console.js

@@ -1,20 +1,26 @@
 import { ColoredConsole, coloredConsoleStyles } from "../util/console-color";
 import { sleep } from "../util/sleep";
 import { LineBreakTransformer } from "../util/line-break-transformer";
+import { TimestampTransformer } from "../util/timestamp-transformer";
 export class EwtConsole extends HTMLElement {
     constructor() {
         super(...arguments);
         this.allowInput = true;
+        this._commandHistory = [];
+        this._historyIndex = -1;
+        this._currentInput = "";
     }
     logs() {
         var _a;
         return ((_a = this._console) === null || _a === void 0 ? void 0 : _a.logs()) || "";
     }
     connectedCallback() {
+        var _a;
         if (this._console) {
             return;
         }
-        const shadowRoot = this.attachShadow({ mode: "open" });
+        // attachShadow throws if a shadow root already exists; reuse it on reattach
+        const shadowRoot = (_a = this.shadowRoot) !== null && _a !== void 0 ? _a : this.attachShadow({ mode: "open" });
         shadowRoot.innerHTML = `
       <style>
         :host, input {
@@ -65,6 +71,18 @@ export class EwtConsole extends HTMLElement {
                     ev.stopPropagation();
                     this._sendCommand();
                 }
+                else if (ev.key === "ArrowUp") {
+                    ev.preventDefault();
+                    this._navigateHistory(input, 1);
+                }
+                else if (ev.key === "ArrowDown") {
+                    ev.preventDefault();
+                    this._navigateHistory(input, -1);
+                }
+                else {
+                    // User is editing — reset history navigation
+                    this._historyIndex = -1;
+                }
             });
         }
         const abortController = new AbortController();
@@ -74,64 +92,116 @@ export class EwtConsole extends HTMLElement {
             return connection;
         };
     }
-    async _connect(abortSignal) {
+    async _connect(signal) {
         this.logger.debug("Starting console read loop");
-        // Check if port.readable is available
+        // Capture a stable reference; addLine() becomes a no-op after destroy()
+        const consoleView = this._console;
         if (!this.port.readable) {
-            this._console.addLine("");
-            this._console.addLine("");
-            this._console.addLine(`Terminal disconnected: Port readable stream not available`);
+            consoleView === null || consoleView === void 0 ? void 0 : consoleView.addLine("");
+            consoleView === null || consoleView === void 0 ? void 0 : consoleView.addLine("");
+            consoleView === null || consoleView === void 0 ? void 0 : consoleView.addLine("Terminal disconnected: Port readable stream not available");
             this.logger.error("Port readable stream not available - port may need to be reopened at correct baudrate");
             return;
         }
         try {
-            await this.port
-                .readable.pipeThrough(new TextDecoderStream(), {
-                signal: abortSignal,
-            })
+            await this.port.readable
+                .pipeThrough(new TextDecoderStream(), { signal })
                 .pipeThrough(new TransformStream(new LineBreakTransformer()))
+                .pipeThrough(new TransformStream(new TimestampTransformer()))
                 .pipeTo(new WritableStream({
-                write: (chunk) => {
-                    this._console.addLine(chunk.replace("\r", ""));
+                write: (line) => {
+                    consoleView === null || consoleView === void 0 ? void 0 : consoleView.addLine(line);
                 },
             }));
-            if (!abortSignal.aborted) {
-                this._console.addLine("");
-                this._console.addLine("");
-                this._console.addLine("Terminal disconnected");
+            if (!signal.aborted) {
+                consoleView === null || consoleView === void 0 ? void 0 : consoleView.addLine("");
+                consoleView === null || consoleView === void 0 ? void 0 : consoleView.addLine("");
+                consoleView === null || consoleView === void 0 ? void 0 : consoleView.addLine("Terminal disconnected");
             }
         }
-        catch (e) {
-            this._console.addLine("");
-            this._console.addLine("");
-            this._console.addLine(`Terminal disconnected: ${e}`);
+        catch (err) {
+            if (!signal.aborted) {
+                consoleView === null || consoleView === void 0 ? void 0 : consoleView.addLine("");
+                consoleView === null || consoleView === void 0 ? void 0 : consoleView.addLine("");
+                consoleView === null || consoleView === void 0 ? void 0 : consoleView.addLine(`Terminal disconnected: ${err}`);
+            }
         }
         finally {
             await sleep(100);
             this.logger.debug("Finished console read loop");
         }
     }
+    _navigateHistory(input, direction) {
+        if (this._commandHistory.length === 0)
+            return;
+        // Save current input before navigating away
+        if (this._historyIndex === -1) {
+            this._currentInput = input.value;
+        }
+        const newIndex = this._historyIndex + direction;
+        if (newIndex < 0) {
+            // Back to current (unsent) input
+            this._historyIndex = -1;
+            input.value = this._currentInput;
+        }
+        else if (newIndex < this._commandHistory.length) {
+            this._historyIndex = newIndex;
+            input.value = this._commandHistory[this._historyIndex];
+        }
+        // Move cursor to end
+        const len = input.value.length;
+        input.setSelectionRange(len, len);
+    }
     async _sendCommand() {
-        const input = this.shadowRoot.querySelector("input");
-        const command = input.value;
-        const encoder = new TextEncoder();
+        var _a, _b;
+        const input = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("input");
+        if (!input || !this.port.writable)
+            return;
+        const value = input.value;
         const writer = this.port.writable.getWriter();
-        await writer.write(encoder.encode(command + "\r\n"));
-        this._console.addLine(`> ${command}\r\n`);
-        input.value = "";
-        input.focus();
         try {
-            writer.releaseLock();
+            await writer.write(new TextEncoder().encode(`${value}\r\n`));
+            (_b = this._console) === null || _b === void 0 ? void 0 : _b.addLine(`> ${value}\r\n`);
+            if (input.isConnected) {
+                // Add to history (skip empty, skip consecutive duplicates, cap at 100)
+                if (value && value !== this._commandHistory[0]) {
+                    this._commandHistory.unshift(value);
+                    if (this._commandHistory.length > 100) {
+                        this._commandHistory.pop();
+                    }
+                }
+                this._historyIndex = -1;
+                this._currentInput = "";
+                input.value = "";
+                input.focus();
+            }
         }
-        catch (err) {
-            console.error("Ignoring release lock error", err);
+        finally {
+            try {
+                writer.releaseLock();
+            }
+            catch (err) {
+                console.error("Ignoring release lock error", err);
+            }
         }
     }
     async disconnect() {
+        var _a;
         if (this._cancelConnection) {
             await this._cancelConnection();
             this._cancelConnection = undefined;
         }
+        (_a = this._console) === null || _a === void 0 ? void 0 : _a.destroy();
+        this._console = undefined;
+    }
+    disconnectedCallback() {
+        var _a;
+        if (this._cancelConnection) {
+            this._cancelConnection();
+            this._cancelConnection = undefined;
+        }
+        (_a = this._console) === null || _a === void 0 ? void 0 : _a.destroy();
+        this._console = undefined;
     }
     async reset() {
         this.logger.debug("Triggering reset.");

package/dist/util/console-color.d.ts

@@ -6,6 +6,7 @@ interface ConsoleState {
     foregroundColor: string | null;
     backgroundColor: string | null;
     carriageReturn: boolean;
+    lines: string[];
     secret: boolean;
     blink: boolean;
     rapidBlink: boolean;
@@ -13,8 +14,19 @@ interface ConsoleState {
 export declare class ColoredConsole {
     targetElement: HTMLElement;
     state: ConsoleState;
+    private _destroyed;
+    private _rafId;
+    private _timeoutId;
+    private _atBottom;
+    private _intersectionObserver?;
+    private _sentinel;
+    private _exportLines;
+    private _visibilityHandler;
     constructor(targetElement: HTMLElement);
     logs(): string;
+    destroy(): void;
+    processLine(line: string): Element;
+    processLines(): void;
     addLine(line: string): void;
 }
 export declare const coloredConsoleStyles = "\n  .log {\n    flex: 1;\n    background-color: #1c1c1c;\n    font-family: \"SFMono-Regular\", Consolas, \"Liberation Mono\", Menlo, Courier,\n      monospace;\n    font-size: 12px;\n    padding: 16px;\n    overflow: auto;\n    line-height: 1.45;\n    border-radius: 3px;\n    white-space: pre-wrap;\n    overflow-wrap: break-word;\n    color: #ddd;\n  }\n\n  .log-bold {\n    font-weight: bold;\n  }\n  .log-italic {\n    font-style: italic;\n  }\n  .log-underline {\n    text-decoration: underline;\n  }\n  .log-strikethrough {\n    text-decoration: line-through;\n  }\n  .log-underline.log-strikethrough {\n    text-decoration: underline line-through;\n  }\n  .log-blink {\n    animation: blink 1s step-end infinite;\n  }\n  .log-rapid-blink {\n    animation: blink 0.4s step-end infinite;\n  }\n  @keyframes blink {\n    50% {\n      opacity: 0;\n    }\n  }\n  .log-secret {\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n  }\n  .log-secret-redacted {\n    opacity: 0;\n    width: 1px;\n    font-size: 1px;\n  }\n  .log-fg-black {\n    color: rgb(128, 128, 128);\n  }\n  .log-fg-red {\n    color: rgb(255, 0, 0);\n  }\n  .log-fg-green {\n    color: rgb(0, 255, 0);\n  }\n  .log-fg-yellow {\n    color: rgb(255, 255, 0);\n  }\n  .log-fg-blue {\n    color: rgb(0, 0, 255);\n  }\n  .log-fg-magenta {\n    color: rgb(255, 0, 255);\n  }\n  .log-fg-cyan {\n    color: rgb(0, 255, 255);\n  }\n  .log-fg-white {\n    color: rgb(187, 187, 187);\n  }\n  .log-bg-black {\n    background-color: rgb(0, 0, 0);\n  }\n  .log-bg-red {\n    background-color: rgb(255, 0, 0);\n  }\n  .log-bg-green {\n    background-color: rgb(0, 255, 0);\n  }\n  .log-bg-yellow {\n    background-color: rgb(255, 255, 0);\n  }\n  .log-bg-blue {\n    background-color: rgb(0, 0, 255);\n  }\n  .log-bg-magenta {\n    background-color: rgb(255, 0, 255);\n  }\n  .log-bg-cyan {\n    background-color: rgb(0, 255, 255);\n  }\n  .log-bg-white {\n    background-color: rgb(255, 255, 255);\n  }\n";

package/dist/util/console-color.js

@@ -1,3 +1,4 @@
+const MAX_LINES = 2000;
 export class ColoredConsole {
     constructor(targetElement) {
         this.targetElement = targetElement;
@@ -9,30 +10,74 @@ export class ColoredConsole {
             foregroundColor: null,
             backgroundColor: null,
             carriageReturn: false,
+            lines: [],
             secret: false,
             blink: false,
             rapidBlink: false,
         };
+        this._destroyed = false;
+        this._rafId = 0;
+        this._timeoutId = 0;
+        this._atBottom = true;
+        this._sentinel = null;
+        // Full history for log export — never trimmed, unlike the DOM cap
+        this._exportLines = [];
+        this._visibilityHandler = null;
+        // Track whether the user is scrolled to the bottom via IntersectionObserver
+        // on a sentinel element, avoiding forced reflows on every processLines call.
+        const sentinel = document.createElement("div");
+        sentinel.style.height = "1px";
+        this._sentinel = sentinel;
+        targetElement.appendChild(sentinel);
+        this._intersectionObserver = new IntersectionObserver((entries) => {
+            this._atBottom = entries[0].isIntersecting;
+        }, { root: targetElement, threshold: 0 });
+        this._intersectionObserver.observe(sentinel);
+        // When the page becomes hidden, rAF is paused. Switch any pending rAF to
+        // a timeout so state.lines doesn't accumulate unbounded while backgrounded.
+        this._visibilityHandler = () => {
+            if (document.hidden && this._rafId) {
+                cancelAnimationFrame(this._rafId);
+                this._rafId = 0;
+                if (!this._timeoutId) {
+                    this._timeoutId = window.setTimeout(() => this.processLines(), 50);
+                }
+            }
+        };
+        document.addEventListener("visibilitychange", this._visibilityHandler);
     }
     logs() {
-        return this.targetElement.innerText;
+        return this._exportLines.join("");
     }
-    addLine(line) {
-        const re = /(?:\x1B|\\x1B)(?:\[(.*?)[@-~]|\].*?(?:\x07|\x1B\\))/g;
-        let i = 0;
-        if (this.state.carriageReturn) {
-            if (line !== "\n") {
-                // don't remove if \r\n
-                this.targetElement.removeChild(this.targetElement.lastChild);
-            }
-            this.state.carriageReturn = false;
+    destroy() {
+        var _a;
+        this._destroyed = true;
+        this.state.carriageReturn = false;
+        this.state.lines = [];
+        (_a = this._intersectionObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        if (this._visibilityHandler) {
+            document.removeEventListener("visibilitychange", this._visibilityHandler);
+            this._visibilityHandler = null;
+        }
+        // Remove the sentinel from the DOM to avoid leaking it on teardown
+        if (this._sentinel) {
+            this._sentinel.remove();
+            this._sentinel = null;
         }
-        if (line.includes("\r")) {
-            this.state.carriageReturn = true;
+        if (this._rafId) {
+            cancelAnimationFrame(this._rafId);
+            this._rafId = 0;
         }
+        if (this._timeoutId) {
+            clearTimeout(this._timeoutId);
+            this._timeoutId = 0;
+        }
+    }
+    processLine(line) {
+        const re = /(?:\x1B|\\x1B)(?:\[(.*?)[@-~]|\].*?(?:\x07|\x1B\\))/g;
+        let i = 0;
         const lineSpan = document.createElement("span");
         lineSpan.classList.add("line");
-        this.targetElement.appendChild(lineSpan);
         const addSpan = (content) => {
             if (content === "")
                 return;
@@ -182,14 +227,88 @@ export class ColoredConsole {
                 }
             }
         }
-        const atBottom = this.targetElement.scrollTop >
-            this.targetElement.scrollHeight - this.targetElement.offsetHeight - 50;
         addSpan(line.substring(i));
-        // Keep scroll at bottom
-        if (atBottom) {
+        return lineSpan;
+    }
+    processLines() {
+        this._rafId = 0;
+        this._timeoutId = 0;
+        if (this._destroyed || this.state.lines.length === 0) {
+            return;
+        }
+        const prevCarriageReturn = this.state.carriageReturn;
+        const fragment = document.createDocumentFragment();
+        for (const line of this.state.lines) {
+            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;
+        }
+        // Use the tracked sentinel reference instead of lastChild! so this is
+        // safe even if the container is empty or the sentinel was removed.
+        const sentinel = this._sentinel;
+        if (!sentinel) {
+            this.state.lines = [];
+            return;
+        }
+        if (prevCarriageReturn &&
+            this.state.lines[0] !== "\n" &&
+            sentinel.previousSibling) {
+            this.targetElement.replaceChild(fragment, sentinel.previousSibling);
+        }
+        else {
+            this.targetElement.insertBefore(fragment, sentinel);
+        }
+        this.state.lines = [];
+        // Trim oldest line-spans when DOM grows too large
+        const children = this.targetElement.children;
+        // -1 to exclude the sentinel div
+        const excess = children.length - 1 - MAX_LINES;
+        if (excess > 0) {
+            if (!this._atBottom) {
+                // Anchor the viewport: subtract the height of removed nodes so the
+                // visible content doesn't jump when we're not scrolled to the bottom.
+                let removedHeight = 0;
+                for (let i = 0; i < excess; i++) {
+                    removedHeight += children[i].getBoundingClientRect()
+                        .height;
+                }
+                for (let i = 0; i < excess; i++) {
+                    this.targetElement.removeChild(children[0]);
+                }
+                this.targetElement.scrollTop -= removedHeight;
+            }
+            else {
+                for (let i = 0; i < excess; i++) {
+                    this.targetElement.removeChild(children[0]);
+                }
+            }
+        }
+        if (this._atBottom) {
             this.targetElement.scrollTop = this.targetElement.scrollHeight;
         }
     }
+    addLine(line) {
+        if (this._destroyed)
+            return;
+        this._exportLines.push(line);
+        this.state.lines.push(line);
+        // Schedule a flush if none is pending yet
+        if (!this._rafId && !this._timeoutId) {
+            if (document.hidden) {
+                // rAF is paused when the page is hidden — use a timeout fallback
+                // so state.lines doesn't accumulate unbounded while backgrounded
+                this._timeoutId = window.setTimeout(() => this.processLines(), 50);
+            }
+            else {
+                this._rafId = requestAnimationFrame(() => this.processLines());
+            }
+        }
+    }
 }
 export const coloredConsoleStyles = `
   .log {

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

@@ -5,10 +5,19 @@ export class LineBreakTransformer {
     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"));
+        // 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;
+        while ((match = re.exec(this.chunks)) !== null) {
+            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) {
         // When the stream is closed, flush any remaining chunks out.

package/dist/util/timestamp-transformer.d.ts

@@ -0,0 +1,3 @@
+export declare class TimestampTransformer implements Transformer<string, string> {
+    transform(chunk: string, controller: TransformStreamDefaultController<string>): void;
+}

package/dist/util/timestamp-transformer.js

@@ -0,0 +1,32 @@
+// Matches lines that already carry a wall-clock or tick timestamp so we don't
+// add a redundant one. 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 {
+    transform(chunk, controller) {
+        // Pass through pure newline (blank-line sentinel) and empty chunks unchanged
+        // so that carriage-return overwrite logic in console-color.ts can still
+        // detect them via line !== "\n".
+        if (chunk === "" || chunk === "\n") {
+            controller.enqueue(chunk);
+            return;
+        }
+        // Skip prefixing if the line already starts with a timestamp
+        if (DEVICE_TIMESTAMP_RE.test(chunk)) {
+            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}`);
+    }
+}