@n42/cli 0.3.8 → 0.3.9

package/src/assets/terminal.js

@@ -0,0 +1,775 @@
+class Terminal {
+  constructor(opts = {}) {
+    this.opts = {
+      title: "Request",
+      brand: "curl",
+      ...opts,
+    };
+
+    this._active = false;
+    this._controller = null;
+    this._lastFocused = null;
+
+    this._history = [];
+    this._historyIndex = -1;
+  }
+
+  async openAndRun(req) {
+    this.open(req);
+    try { await this.run(req); } 
+    catch (e) {
+      // errors already printed by run(); rethrow if you want
+    }
+  }
+
+  open(req) {
+    if (!this.overlay) {
+      this._ensureDom();
+      this._printHelp();
+    }
+    
+    if (this._active) return;
+    this._active = true;
+
+    this._lastFocused = document.activeElement;
+
+    this.overlay.classList.remove("hidden");
+    this.dialog.classList.remove("hidden");
+
+    this.input.value = `curl -X ${req.method} ${req.url}`;
+    this.input.focus();
+
+    // prevent background scroll
+    this._prevOverflow = document.documentElement.style.overflow;
+    document.documentElement.style.overflow = "hidden";
+  }
+
+  close() {
+    if (!this._active) return;
+    this._active = false;
+
+    this.abort("Modal closed");
+
+    this.overlay.classList.add("hidden");
+    this.dialog.classList.add("hidden");
+
+    document.documentElement.style.overflow = this._prevOverflow || "";
+
+    // restore focus to trigger
+    if (this._lastFocused && typeof this._lastFocused.focus === "function") {
+      this._lastFocused.focus();
+    }
+  }
+
+  abort(reason = "Aborted") {
+    if (this._controller) {
+      try { this._controller.abort(reason); } catch {}
+    }
+    this._controller = null;
+    this._setBusy(false);
+  }
+
+  async run(req) {
+    const normalized = this._normalizeReq(req);
+    this._resetTerminal();
+
+    const cmd = `$ ${this.opts.brand} ${this._toCurlArgs(normalized)}`;
+    this._addHistory(cmd)
+
+    this._printLine(cmd);
+    this._printLine("");
+
+    this._setBusy(true);
+
+    const t0 = performance.now();
+    const controller = new AbortController();
+    this._controller = controller;
+
+    // Timeout: use AbortSignal.timeout() if available; else manual.
+    let timeoutId = null;
+    const timeoutMs = normalized.timeoutMs;
+
+    let signal = controller.signal;
+    if (typeof AbortSignal !== "undefined" && typeof AbortSignal.timeout === "function" && timeoutMs > 0) {
+      // combine signals: abort either manual or timeout
+      signal = this._anySignal([controller.signal, AbortSignal.timeout(timeoutMs)]);
+    } else if (timeoutMs > 0) {
+      timeoutId = setTimeout(() => controller.abort("Timeout"), timeoutMs);
+    }
+
+    try {
+      const fetchInit = {
+        method: normalized.method,
+        headers: normalized.headers,
+        body: normalized.body,
+        signal,
+        credentials: normalized.credentials,
+        redirect: normalized.redirect,
+        cache: "no-store",
+        mode: normalized.mode,
+      };
+
+      this._printLine(`> ${normalized.method} ${normalized.url}`);
+      for (const [k, v] of Object.entries(normalized.headers || {})) {
+        this._printLine(`> ${k}: ${v}`);
+      }
+      if (normalized.body) this._printLine(`> (body ${this._byteLen(normalized.body)} bytes)`);
+      this._printLine("");
+
+      const res = await fetch(normalized.url, fetchInit);
+
+      const dt = (performance.now() - t0);
+      this._printLine(`< HTTP ${res.status} ${res.statusText} (${dt.toFixed(0)} ms)`);
+
+      res.headers.forEach((v, k) => this._printLine(`< ${k}: ${v}`));
+      this._printLine("");
+
+      const { text, truncated, bytesRead } = await this._readTextWithLimit(res, normalized.maxBytes);
+      if (truncated) {
+        this._printLine(`... [truncated after ${bytesRead} bytes (maxBytes=${normalized.maxBytes})] ...`);
+        this._printLine("");
+      }
+      this._printRaw(text);
+
+      this._printLine("");
+      this._printLine(`[done]`);
+      this._setBusy(false);
+      return { status: res.status, headers: res.headers, body: text, truncated };
+    } 
+    catch (err) {
+      const name = err?.name || "Error";
+      const msg = err?.message || String(err);
+
+      this._printLine(`[${name}] ${msg}`);
+      this._setBusy(false);
+       
+      return { status: 0, headers: new Headers(), body: "", error: msg };
+    } 
+    finally {
+      if (timeoutId) clearTimeout(timeoutId);
+      this._controller = null;
+    }
+  }
+
+  // ---------------- private ----------------
+
+  _normalizeReq(req) {
+    if (!req || typeof req.url !== "string") throw new Error("Missing url");
+
+    const method = (req.method || "GET").toUpperCase();
+    const headers = { ...(req.headers || {}) };
+
+    // If body is object, default JSON
+    let body = req.body ?? null;
+    if (body && typeof body === "object" && !(body instanceof FormData) && !(body instanceof Blob)) {
+      if (!headers["Content-Type"] && !headers["content-type"]) {
+        headers["Content-Type"] = "application/json";
+      }
+      body = JSON.stringify(body);
+    }
+
+    return {
+      url: req.url,
+      method,
+      headers,
+      body,
+      timeoutMs: Number.isFinite(req.timeoutMs) ? req.timeoutMs : 15000,
+      maxBytes: Number.isFinite(req.maxBytes) ? req.maxBytes : 500_000,
+      credentials: req.credentials || "same-origin", // set "include" if cookies are needed
+      redirect: req.redirect || "follow",
+      mode: req.mode || "cors",
+    };
+  }
+
+  _addHistory(cmd) {
+    cmd = cmd.replace("$", "");
+    cmd = cmd.replace(/'/g, "");
+  
+    // push to history
+    this._history.push(cmd.trim());
+    this._historyIndex = this._history.length;
+  }
+
+  _handleCommand(cmd) {
+    this._printLine(`$ ${cmd}`);
+
+    if (cmd === "clear") {
+      this._addHistory(cmd);
+      this._resetTerminal();
+      return;
+    }
+
+    if (cmd === "help") {
+      this._addHistory(cmd);
+      this._printHelp();
+      return;
+    }
+    
+    if (cmd.startsWith("curl ")) {
+      // Parse: curl [-X METHOD] <url>
+      const m = cmd.match(/^curl\s+(?:-X\s+(GET|POST|PUT|PATCH|DELETE|HEAD|OPTIONS)\s+)?(https?:\/\/\S+)$/i);
+
+      if (m) {
+        const method = m[1] ? m[1].toUpperCase() : "GET";
+        const url = m[2];
+
+        this.openAndRun({ url, method });
+        return;
+      }
+    }
+
+    if (cmd === "trace") {
+      this._addHistory(cmd);
+      
+      if (discoveryTrace) {
+        this._resetTerminal();
+        this._printLine(JSON.stringify(discoveryTrace, null, 2));
+      } else {
+        this._printLine("[error]: Discovery trace missing");
+      }
+      return;
+    }
+    
+    this._printLine("[error]: Unknown command");  
+  }
+
+  _createImgEl(src, size, alt) {
+    const img = document.createElement("img");
+    img.src = src;
+    img.width = size;
+    img.height = size;
+    img.alt = alt;
+    return img;
+  }
+
+  _ensureDom() {
+    if (this.overlay) return;
+
+    const textColor = this.opts.textColor;
+    const terminalTextColor = this.opts.terminalTextColor;
+
+    // Styles (namespaced)
+    const style = document.createElement("style");
+    style.id = "terminal-style";
+    style.textContent = `
+      .cm-overlay {
+        position: fixed; inset: 0;
+        background: rgba(0,0,0,.55);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 24px;
+        z-index: 2147483647;
+      }
+      .cm-overlay.hidden {
+        display: none;
+      }
+      .cm-dialog {
+        width: min(980px, 100%);
+        height: min(720px, 100%);
+        background: #0b0f14;
+        color: ${textColor};
+        border: 1px solid rgba(255,255,255,.12);
+        border-radius: 12px;
+        box-shadow: 0 18px 60px rgba(0,0,0,.55);
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+      }
+      .cm-display.hidden {
+        display: none;
+      }
+      .cm-head {
+        display: flex; align-items: center; gap: 12px;
+        padding: 10px 11px 10px 14px;
+        border-bottom: 1px solid rgba(255,255,255,.10);
+        background: rgba(255,255,255,.03);
+      }
+      .cm-title { 
+        font-weight: 600;
+        font-size: 14px;
+        opacity: .95;
+      }
+      .cm-spacer { flex: 1; }
+      .cm-btn {
+        appearance: none;
+        border: 1px solid rgba(255,255,255,.18);
+        background: transparent;
+        color: inherit;
+        padding: 2px 6px 0 6px;
+        border-radius: 6px;
+        font-size: 12px;
+        cursor: pointer;
+      }
+      .cm-btn img {
+        width: 17px;
+      }
+      .cm-btn:hover {
+        border: 1px solid rgba(255,255,255,.38);
+      }
+      .cm-btn:disabled { opacity: .55; cursor: not-allowed; }
+      .cm-body { 
+        flex: 1; 
+        overflow: auto; 
+        padding: 12px; 
+        
+        scrollbar-color: #323232 #0b0f14;
+        scrollbar-width: thin;
+      }
+      .cm-body::-webkit-scrollbar {
+        width: 10px;
+      }
+      .cm-body::-webkit-scrollbar-track {
+        background: #0b0f14;
+      }
+      .cm-body::-webkit-scrollbar-thumb {
+        background: #323232;
+        border-radius: 6px;
+      }
+      .cm-body::-webkit-scrollbar-thumb:hover {
+        background: #656565;
+      }
+      .cm-term {
+        white-space: pre-wrap;
+        word-break: break-word;
+        color: ${terminalTextColor};
+        line-height: 1.35;
+        font-size: 12px;
+      }
+      .cm-foot {
+        padding: 10px 12px;
+        border-top: 1px solid rgba(255,255,255,.10);
+        display: flex; align-items: center; gap: 10px;
+        background: rgba(255,255,255,.02);
+      }
+      .cm-status { font-size: 12px; opacity: .85; }
+      .cm-kbd {
+        font-size: 11px; opacity: .7;
+        border: 1px solid rgba(255,255,255,.16);
+        padding: 3px 6px 2px 6px;
+        border-radius: 6px;
+      }
+      .cm-input-row {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 8px 12px;
+        border-top: 1px solid rgba(255,255,255,.10);
+        background: rgba(255,255,255,.02);
+      }
+      .cm-prompt {
+        opacity: .8;
+        font-size: 12px;
+      }
+      .cm-input {
+        flex: 1;
+        background: transparent;
+        color: ${terminalTextColor};
+        border: none;
+        outline: none;
+        font-family: inherit;
+        font-size: 12px;
+      }
+    `;
+
+    if (!document.getElementById("terminal-style")) {  
+      //document.head.appendChild(style);
+    }
+
+    // Overlay
+    const overlay = document.createElement("div");
+    overlay.className = "cm-overlay";
+    overlay.hidden = true;
+
+    // Dialog
+    const dialog = document.createElement("div");
+    dialog.className = "cm-dialog";
+    dialog.hidden = true;
+    dialog.setAttribute("role", "dialog");
+    dialog.setAttribute("aria-modal", "true"); // per aria-modal guidance
+    dialog.setAttribute("aria-label", this.opts.title);
+
+    // Input row (terminal prompt)
+    const inputRow = document.createElement("div");
+    inputRow.className = "cm-input-row";
+
+    const prompt = document.createElement("span");
+    prompt.className = "cm-prompt";
+    prompt.textContent = ">";
+
+    const input = document.createElement("input");
+    input.className = "cm-input";
+    input.placeholder = "type command...";
+    input.addEventListener("keydown", (e) => {
+      if (e.key === "Enter") {
+        const cmd = input.value.trim();
+        input.value = "";
+
+        if (!cmd) return;
+
+        this._handleCommand(cmd);
+      }
+
+      // ---- HISTORY NAVIGATION ----
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+
+        if (this._history.length === 0) return;
+
+        this._historyIndex = Math.max(0, this._historyIndex - 1);
+        input.value = this._history[this._historyIndex];
+        return;
+      }
+
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+
+        if (this._history.length === 0) return;
+
+        this._historyIndex = Math.min(
+          this._history.length,
+          this._historyIndex + 1
+        );
+
+        input.value =
+          this._historyIndex < this._history.length
+            ? this._history[this._historyIndex]
+            : "";
+        return;
+      }
+    });
+
+    inputRow.append(prompt, input);
+
+    // Header
+    const head = document.createElement("div");
+    head.className = "cm-head";
+
+    const title = document.createElement("div");
+    title.className = "cm-title";
+    title.textContent = this.opts.title;
+
+    const spacer = document.createElement("div");
+    spacer.className = "cm-spacer";
+
+    const copyImg = this._createImgEl("../../assets/copy-light.svg", 24, "Copy");
+    const btnCopy = document.createElement("button");
+    btnCopy.className = "cm-btn copy";
+    btnCopy.type = "button";
+    btnCopy.title = "Copy";
+    //btnCopy.textContent = "Copy";
+    btnCopy.prepend(copyImg); 
+    btnCopy.addEventListener("click", () => this._copy());
+
+    const downloadImg = this._createImgEl("../../assets/download-light.svg", 24, "Download");
+    const btnDownload = document.createElement("button");
+    btnDownload.className = "cm-btn";
+    btnDownload.type = "button";
+    btnDownload.title = "Download";
+    //btnDownload.textContent = "Download";
+    btnDownload.prepend(downloadImg); 
+    btnDownload.addEventListener("click", () => this._download());
+
+    const openExtImg = this._createImgEl("../../assets/open-external-light.svg", 24, "Open");
+    const btnOpenExt = document.createElement("button");
+    btnOpenExt.className = "cm-btn";
+    btnOpenExt.type = "button";
+    btnOpenExt.title = "Open";
+    //btnOpenExt.textContent = "Open";
+    btnOpenExt.prepend(openExtImg);
+    btnOpenExt.addEventListener("click", () => this._openExt());
+
+    /*
+    const btnClose = document.createElement("button");
+    btnClose.className = "cm-btn";
+    btnClose.type = "button";
+    btnClose.textContent = "Close";
+    btnClose.addEventListener("click", () => this.close());
+    */
+
+    head.append(title, spacer, btnCopy, btnDownload, btnOpenExt);
+
+    // Body
+    const body = document.createElement("div");
+    body.className = "cm-body";
+
+    const term = document.createElement("div");
+    term.className = "cm-term";
+    term.setAttribute("role", "log");
+    term.setAttribute("aria-live", "polite");
+
+    body.appendChild(term);
+
+    // Footer
+    const foot = document.createElement("div");
+    foot.className = "cm-foot";
+
+    const status = document.createElement("div");
+    status.className = "cm-status";
+    status.textContent = "Ready";
+
+    const hint = document.createElement("div");
+    hint.className = "cm-spacer";
+    hint.textContent = "";
+
+    const kbdEsc = document.createElement("span");
+    kbdEsc.className = "cm-kbd";
+    kbdEsc.textContent = "ESC";
+
+    const hint2 = document.createElement("div");
+    hint2.style.opacity = ".75";
+    hint2.style.fontSize = "12px";
+    hint2.textContent = "to close";
+
+    foot.append(status, hint, kbdEsc, hint2);
+
+    dialog.append(head, body, inputRow, foot);
+    overlay.appendChild(dialog);
+    document.body.appendChild(overlay);
+
+    // Store refs
+    this.overlay = overlay;
+    this.dialog = dialog;
+    this.input = input;
+    this.term = term;
+    this.statusEl = status;
+
+    this.btnCopy = btnCopy;
+    this.btnDownload = btnDownload;
+    this.btnOpenExt = btnOpenExt;
+    //this.btnClose = btnClose;
+
+    // Close when clicking outside (optional)
+    overlay.addEventListener("click", (e) => {
+      if (e.target === overlay) this.close();
+    });
+
+    // Key handling + focus trap
+    document.addEventListener("keydown", (e) => {
+      if (!this._active) return;
+
+      if (e.key === "Escape") {
+        e.preventDefault();
+        this.close();
+        return;
+      }
+
+      if (e.key === "Tab") {
+        this._trapTab(e);
+      }
+    });
+  }
+
+  _trapTab(e) {
+    // Basic focus trap: keep tabbing inside dialog controls.
+    const focusables = this.dialog.querySelectorAll(
+      'button,[href],input,select,textarea,[tabindex]:not([tabindex="-1"])'
+    );
+    const list = Array.from(focusables).filter(el => !el.disabled && el.offsetParent !== null);
+    if (list.length === 0) return;
+
+    const first = list[0];
+    const last = list[list.length - 1];
+    const active = document.activeElement;
+
+    if (e.shiftKey && active === first) {
+      e.preventDefault();
+      last.focus();
+    } else if (!e.shiftKey && active === last) {
+      e.preventDefault();
+      first.focus();
+    }
+  }
+
+  _setBusy(isBusy) {
+    this.statusEl.textContent = isBusy ? "Running…" : "Ready";
+  }
+
+  _openExt() {
+    const url = this.input.value.replace(/^.*?(?=https?:\/\/)/, "")
+    window.open(url, '_blank');
+  }
+
+  _resetTerminal() {
+    this.term.textContent = "";
+  }
+
+  _printHelp() {
+    this._resetTerminal();
+
+    this._printLine("Node42 Interactive Terminal (basic emulator)");
+    this._printLine("--------------------------------------------------");
+    this._printLine("This is a minimal command runner used inside the");
+    this._printLine("interactive SVG to test and follow discovery links.");
+    this._printLine("Only a small subset of commands is supported.");
+    this._printLine("");
+
+    this._printLine("Available commands:");
+    this._printLine("  curl [-X METHOD] <url>  – send HTTP request to a URL");
+    this._printLine("  trace                   – output discovery trace");
+    this._printLine("  clear                   – clear terminal output");
+    this._printLine("  help                    – show this help text");
+    this._printLine("");
+
+    this._printLine("Keyboard support:");
+    this._printLine("  • ENTER       – execute current command");
+    this._printLine("  • ARROW UP    – previous command in history");
+    this._printLine("  • ARROW DOWN  – next command in history");
+    this._printLine("");
+
+    this._printLine("Notes:");
+    this._printLine("  • Output is read-only");
+    this._printLine("  • No shell features (pipes, variables, etc.)");
+    this._printLine("  • Designed only for quick API testing from diagrams");
+    this._printLine("");
+
+    this._printLine("Examples:");
+    this._printLine("  curl https://api.node42.dev/health");
+    this._printLine("  curl -X POST https://api.node42.dev/health");
+    this._printLine("");
+  }
+
+  _printLine(s) {
+    this.term.textContent += `${s}\n`;
+    this._scrollToBottom();
+  }
+
+  _printRaw(s) {
+    this.term.textContent += s;
+    if (!s.endsWith("\n")) this.term.textContent += "\n";
+    this._scrollToBottom();
+  }
+
+  _scrollToBottom() {
+    const body = this.term.parentElement;
+    body.scrollTop = body.scrollHeight;
+  }
+
+  async _copy() {
+    const text = this.term.textContent || "";
+    try {
+      await navigator.clipboard.writeText(text);
+      this.statusEl.textContent = "Copied";
+    } catch {
+      // fallback
+      const ta = document.createElement("textarea");
+      ta.value = text;
+      ta.style.position = "fixed";
+      ta.style.left = "-9999px";
+      document.body.appendChild(ta);
+      ta.select();
+      try { document.execCommand("copy"); this.statusEl.textContent = "Copied"; }
+      catch { this.statusEl.textContent = "Copy failed"; }
+      ta.remove();
+    }
+    setTimeout(() => (this.statusEl.textContent = "Ready"), 900);
+  }
+
+  _download() {
+    const text = this.term.textContent || "";
+    const blob = new Blob([text], { type: "text/plain;charset=utf-8" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `curl-output-${new Date().toISOString().slice(0,19).replace(/[:T]/g,"-")}.txt`;
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+    URL.revokeObjectURL(url);
+  }
+
+  _toCurlArgs(req) {
+    // Presentational: escapes minimally for display (not execution-safe for all shells).
+    const parts = [];
+    parts.push(`-X ${req.method}`);
+    for (const [k, v] of Object.entries(req.headers || {})) {
+      parts.push(`-H ${this._shQuote(`${k}: ${v}`)}`);
+    }
+    if (req.body) parts.push(`--data ${this._shQuote(typeof req.body === "string" ? req.body : String(req.body))}`);
+    parts.push(this._shQuote(req.url));
+    return parts.join(" ");
+  }
+
+  _shQuote(s) {
+    // single-quote shell style: ' -> '"'"'
+    const str = String(s);
+    return `'${str.replace(/'/g, `'"'"'`)}'`;
+  }
+
+  _byteLen(s) {
+    if (typeof s !== "string") s = String(s);
+    return new TextEncoder().encode(s).length;
+  }
+
+  async _readTextWithLimit(res, maxBytes) {
+    // Reads response body safely with byte limit.
+    // If no stream support, fall back to res.text() then truncate.
+    const bytesLimit = Math.max(0, maxBytes | 0);
+
+    if (!res.body || !res.body.getReader) {
+      const full = await res.text();
+      const enc = new TextEncoder().encode(full);
+      if (enc.length <= bytesLimit) return { text: full, truncated: false, bytesRead: enc.length };
+      // truncate bytes -> decode
+      const cut = enc.slice(0, bytesLimit);
+      return { text: new TextDecoder().decode(cut), truncated: true, bytesRead: bytesLimit };
+    }
+
+    const reader = res.body.getReader();
+    const chunks = [];
+    let bytesRead = 0;
+    let truncated = false;
+
+    while (true) {
+      const { value, done } = await reader.read();
+      if (done) break;
+      if (!value) continue;
+
+      if (bytesRead + value.byteLength > bytesLimit) {
+        const allowed = bytesLimit - bytesRead;
+        if (allowed > 0) chunks.push(value.slice(0, allowed));
+        truncated = true;
+        bytesRead = bytesLimit;
+        try { reader.cancel("maxBytes reached"); } catch {}
+        break;
+      }
+
+      chunks.push(value);
+      bytesRead += value.byteLength;
+    }
+
+    const merged = this._concatU8(chunks, bytesRead);
+    const text = new TextDecoder().decode(merged);
+    return { text, truncated, bytesRead };
+  }
+
+  _concatU8(chunks, total) {
+    const out = new Uint8Array(total);
+    let offset = 0;
+    for (const c of chunks) {
+      out.set(c, offset);
+      offset += c.byteLength;
+      if (offset >= total) break;
+    }
+    return out;
+  }
+
+  _anySignal(signals) {
+    // Combine multiple AbortSignals into one.
+    const controller = new AbortController();
+    const onAbort = (sig) => {
+      if (controller.signal.aborted) return;
+      controller.abort(sig.reason || "Aborted");
+    };
+    for (const sig of signals) {
+      if (!sig) continue;
+      if (sig.aborted) {
+        onAbort(sig);
+        break;
+      }
+      sig.addEventListener("abort", () => onAbort(sig), { once: true });
+    }
+    return controller.signal;
+  }
+}