lib-e2e-cypress-for-dummys-ts 0.2.0 → 0.3.0

package/dist/index.js

@@ -92,7 +92,9 @@ var I18N_ES = {
     NO_TAGS: "Sin etiquetas",
     SAVE_BTN: "\u{1F4BE} Guardar",
     SAVE_AND_EDIT: "\u{1F4DD} Guardar y editar",
-    REMOVE_TAG_TITLE: "Quitar"
+    REMOVE_TAG_TITLE: "Quitar",
+    NOTES_LABEL: "Descripci\xF3n / Notas (opcional):",
+    NOTES_PLACEHOLDER: "Qu\xE9 valida este test, condiciones previas, etc."
   },
   TEST_EDITOR: {
     NO_TAGS: "Sin etiquetas",
@@ -141,7 +143,10 @@ var I18N_ES = {
     JSON_BAD_FORMAT: "El archivo no tiene el formato esperado.",
     SMART_SELECTOR_SECTION: "\u{1F50D} Selector inteligente",
     SMART_SELECTOR_TITLE: "Selector inteligente",
-    SMART_SELECTOR_SUB: "Muestra un picker al hacer click en elementos sin selector v\xE1lido."
+    SMART_SELECTOR_SUB: "Muestra un picker al hacer click en elementos sin selector v\xE1lido.",
+    START_HIDDEN_SECTION: "\u{1F441} Visibilidad del widget",
+    START_HIDDEN_TITLE: "Iniciar oculto",
+    START_HIDDEN_SUB: "El widget arranca invisible. Usa Ctrl+Shift+E para mostrarlo u ocultarlo."
   },
   SELECTOR_PICKER: {
     TITLE: "Selecciona un elemento del DOM",
@@ -254,7 +259,9 @@ var I18N_EN = {
     NO_TAGS: "No tags",
     SAVE_BTN: "\u{1F4BE} Save",
     SAVE_AND_EDIT: "\u{1F4DD} Save and edit",
-    REMOVE_TAG_TITLE: "Remove"
+    REMOVE_TAG_TITLE: "Remove",
+    NOTES_LABEL: "Description / Notes (optional):",
+    NOTES_PLACEHOLDER: "What this test validates, preconditions, etc."
   },
   TEST_EDITOR: {
     NO_TAGS: "No tags",
@@ -303,7 +310,10 @@ var I18N_EN = {
     JSON_BAD_FORMAT: "The file does not have the expected format.",
     SMART_SELECTOR_SECTION: "\u{1F50D} Smart selector",
     SMART_SELECTOR_TITLE: "Smart selector",
-    SMART_SELECTOR_SUB: "Shows a picker when clicking elements with no valid selector."
+    SMART_SELECTOR_SUB: "Shows a picker when clicking elements with no valid selector.",
+    START_HIDDEN_SECTION: "\u{1F441} Widget visibility",
+    START_HIDDEN_TITLE: "Start hidden",
+    START_HIDDEN_SUB: "The widget starts invisible. Use Ctrl+Shift+E to show or hide it."
   },
   SELECTOR_PICKER: {
     TITLE: "Select a DOM element",
@@ -416,7 +426,9 @@ var I18N_FR = {
     NO_TAGS: "Sans \xE9tiquettes",
     SAVE_BTN: "\u{1F4BE} Enregistrer",
     SAVE_AND_EDIT: "\u{1F4DD} Enregistrer et \xE9diter",
-    REMOVE_TAG_TITLE: "Retirer"
+    REMOVE_TAG_TITLE: "Retirer",
+    NOTES_LABEL: "Description / Notes (optionnel) :",
+    NOTES_PLACEHOLDER: "Ce que ce test valide, conditions pr\xE9alables, etc."
   },
   TEST_EDITOR: {
     NO_TAGS: "Sans \xE9tiquettes",
@@ -465,7 +477,10 @@ var I18N_FR = {
     JSON_BAD_FORMAT: "Le fichier n'a pas le format attendu.",
     SMART_SELECTOR_SECTION: "\u{1F50D} S\xE9lecteur intelligent",
     SMART_SELECTOR_TITLE: "S\xE9lecteur intelligent",
-    SMART_SELECTOR_SUB: "Affiche un s\xE9lecteur lors du clic sur des \xE9l\xE9ments sans s\xE9lecteur valide."
+    SMART_SELECTOR_SUB: "Affiche un s\xE9lecteur lors du clic sur des \xE9l\xE9ments sans s\xE9lecteur valide.",
+    START_HIDDEN_SECTION: "\u{1F441} Visibilit\xE9 du widget",
+    START_HIDDEN_TITLE: "D\xE9marrer masqu\xE9",
+    START_HIDDEN_SUB: "Le widget d\xE9marre invisible. Utilisez Ctrl+Shift+E pour l'afficher ou le masquer."
   },
   SELECTOR_PICKER: {
     TITLE: "S\xE9lectionnez un \xE9l\xE9ment du DOM",
@@ -578,7 +593,9 @@ var I18N_IT = {
     NO_TAGS: "Nessuna etichetta",
     SAVE_BTN: "\u{1F4BE} Salva",
     SAVE_AND_EDIT: "\u{1F4DD} Salva e modifica",
-    REMOVE_TAG_TITLE: "Rimuovi"
+    REMOVE_TAG_TITLE: "Rimuovi",
+    NOTES_LABEL: "Descrizione / Note (opzionale):",
+    NOTES_PLACEHOLDER: "Cosa valida questo test, condizioni preliminari, ecc."
   },
   TEST_EDITOR: {
     NO_TAGS: "Nessuna etichetta",
@@ -627,7 +644,10 @@ var I18N_IT = {
     JSON_BAD_FORMAT: "Il file non ha il formato previsto.",
     SMART_SELECTOR_SECTION: "\u{1F50D} Selettore intelligente",
     SMART_SELECTOR_TITLE: "Selettore intelligente",
-    SMART_SELECTOR_SUB: "Mostra un selettore quando si fa clic su elementi senza selettore valido."
+    SMART_SELECTOR_SUB: "Mostra un selettore quando si fa clic su elementi senza selettore valido.",
+    START_HIDDEN_SECTION: "\u{1F441} Visibilit\xE0 del widget",
+    START_HIDDEN_TITLE: "Avvia nascosto",
+    START_HIDDEN_SUB: "Il widget si avvia invisibile. Usa Ctrl+Shift+E per mostrarlo o nasconderlo."
   },
   SELECTOR_PICKER: {
     TITLE: "Seleziona un elemento DOM",
@@ -740,7 +760,9 @@ var I18N_DE = {
     NO_TAGS: "Keine Tags",
     SAVE_BTN: "\u{1F4BE} Speichern",
     SAVE_AND_EDIT: "\u{1F4DD} Speichern und bearbeiten",
-    REMOVE_TAG_TITLE: "Entfernen"
+    REMOVE_TAG_TITLE: "Entfernen",
+    NOTES_LABEL: "Beschreibung / Notizen (optional):",
+    NOTES_PLACEHOLDER: "Was dieser Test validiert, Voraussetzungen usw."
   },
   TEST_EDITOR: {
     NO_TAGS: "Keine Tags",
@@ -789,7 +811,10 @@ var I18N_DE = {
     JSON_BAD_FORMAT: "Die Datei hat nicht das erwartete Format.",
     SMART_SELECTOR_SECTION: "\u{1F50D} Intelligenter Selektor",
     SMART_SELECTOR_TITLE: "Intelligenter Selektor",
-    SMART_SELECTOR_SUB: "Zeigt ein Auswahlfeld, wenn auf Elemente ohne g\xFCltigen Selektor geklickt wird."
+    SMART_SELECTOR_SUB: "Zeigt ein Auswahlfeld, wenn auf Elemente ohne g\xFCltigen Selektor geklickt wird.",
+    START_HIDDEN_SECTION: "\u{1F441} Widget-Sichtbarkeit",
+    START_HIDDEN_TITLE: "Versteckt starten",
+    START_HIDDEN_SUB: "Das Widget startet unsichtbar. Verwenden Sie Ctrl+Shift+E zum Ein-/Ausblenden."
   },
   SELECTOR_PICKER: {
     TITLE: "DOM-Element ausw\xE4hlen",
@@ -915,13 +940,37 @@ var TranslationService = class {
 };
 var translationService = new TranslationService();
 
+// src/utils/code-format.utils.ts
+function gcd(a, b) {
+  while (b) {
+    const t = b;
+    b = a % b;
+    a = t;
+  }
+  return a;
+}
+function normalizeBlock(code, baseIndent) {
+  const lines = code.split("\n").map((l) => l.trimEnd());
+  const nonEmpty = lines.filter((l) => l.trim().length > 0);
+  if (!nonEmpty.length) return "";
+  const indents = nonEmpty.map((l) => l.length - l.trimStart().length);
+  const minIndent = Math.min(...indents);
+  const relIndents = [...new Set(indents.map((n) => n - minIndent).filter((n) => n > 0))];
+  const step = relIndents.length > 0 ? relIndents.reduce(gcd) : 2;
+  return lines.map((l) => {
+    if (!l.trim()) return "";
+    const level = Math.round((l.length - l.trimStart().length - minIndent) / step);
+    return baseIndent + "  ".repeat(level) + l.trimStart();
+  }).join("\n");
+}
+
 // src/services/transformation.service.ts
 var TransformationService = class {
   toLang(lang) {
     return isLang(lang) ? lang : "en";
   }
   generateItDescription(description, commands) {
-    const commandsBlock = commands.map((cmd) => `  ${cmd}`).join("\n");
+    const commandsBlock = commands.map((cmd) => normalizeBlock(cmd, "  ")).join("\n");
     return `it('${description}', () => {
 ${commandsBlock}
 });`;
@@ -952,6 +1001,13 @@ ${interceptors}  })
     }
     return content.slice(0, idx) + "\n" + itBlock + "\n" + content.slice(idx);
   }
+  buildBlockComment(notes) {
+    if (!notes.trim()) return "";
+    const lines = notes.split("\n").map((l) => ` * ${l}`).join("\n");
+    return `/**
+${lines}
+ */`;
+  }
   isFile(file) {
     return !!file && file.kind === "file";
   }
@@ -1362,9 +1418,9 @@ var PersistenceService = class {
     return this._db;
   }
   // ── Tests ─────────────────────────────────────────────────────────────────
-  async insertTest(name, commands = [], interceptors = [], tags = []) {
+  async insertTest(name, commands = [], interceptors = [], tags = [], notes) {
     const db = await this.getDB();
-    const record = { name, createdAt: Date.now(), ...tags.length ? { tags } : {} };
+    const record = { name, createdAt: Date.now(), ...tags.length ? { tags } : {}, ...notes ? { notes } : {} };
     const id = await db.add("tests", record);
     if (commands.length) await this.insertCommands(commands, id);
     if (interceptors.length) await this.insertInterceptors(interceptors, id);
@@ -1388,9 +1444,9 @@ var PersistenceService = class {
     const commands = await this.getCommandStrings(testId);
     const interceptors = await this.getInterceptorStrings(testId);
     const itBlock = `it('${record.name}', () => {
-  ${commands.join("\n  ")}
+${commands.map((c) => normalizeBlock(c, "  ")).join("\n")}
 });`;
-    const interceptorsBlock = interceptors.length ? "  // Auto-generated Cypress interceptors\n" + interceptors.map((i) => "  " + i).join("\n") + "\n" : "";
+    const interceptorsBlock = interceptors.length ? "  // Auto-generated Cypress interceptors\n" + interceptors.map((i) => normalizeBlock(i, "  ")).join("\n") + "\n" : "";
     return { ...record, commands, interceptors, cypressCommands: commands, itBlock, interceptorsBlock };
   }
   async deleteTest(id) {
@@ -2129,7 +2185,8 @@ if (!customElements.get("test-previsualizer")) {
 var SAVE_TEST_STYLES = `
   :host { display: block; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #e6edf3; }
   * { box-sizing: border-box; }
-  .container { padding: 24px 28px; text-align: center; }
+  .container { padding: 24px 28px; text-align: left; }
+  .btn-row, p { text-align: center; }
   p { margin: 0 0 20px; font-size: 14px; color: #8b949e; line-height: 1.5; }
   .btn-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
   button {
@@ -2151,6 +2208,15 @@ var SAVE_TEST_STYLES = `
   }
   input[type="text"]:focus { border-color: #2f81f7; box-shadow: 0 0 0 3px rgba(47,129,247,0.15); }
   input[type="text"]::placeholder { color: #484f58; }
+  textarea {
+    width: 100%; padding: 10px 14px; border: 1px solid #30363d;
+    border-radius: 8px; background: #0d1117; color: #e6edf3;
+    font-size: 14px; outline: none; margin-bottom: 4px;
+    font-family: inherit; resize: vertical; line-height: 1.5;
+    transition: border-color 0.15s, box-shadow 0.15s;
+  }
+  textarea:focus { border-color: #2f81f7; box-shadow: 0 0 0 3px rgba(47,129,247,0.15); }
+  textarea::placeholder { color: #484f58; }
   .tag-label {
     font-size: 11px; color: #484f58; text-align: left; margin-bottom: 5px; display: block;
   }
@@ -2189,7 +2255,7 @@ function renderSaveTestAsk(t) {
       </div>
     </div>`;
 }
-function renderSaveTestDesc(description, tags, t) {
+function renderSaveTestDesc(description, notes, tags, t) {
   const chipsHtml = tags.map(
     (tag) => `<span class="chip">${escHtml(tag)}<button class="chip-del" data-tag="${escAttr(tag)}" title="${t("SAVE_TEST.REMOVE_TAG_TITLE")}">\u2715</button></span>`
   ).join("");
@@ -2198,6 +2264,8 @@ function renderSaveTestDesc(description, tags, t) {
       <p>${t("SAVE_TEST.DESC_LABEL")} (<code>it()</code>):</p>
       <input id="desc-input" type="text" placeholder="${t("SAVE_TEST.DESC_PLACEHOLDER")}"
              value="${escAttr(description)}" autocomplete="off" />
+      <span class="tag-label">${t("SAVE_TEST.NOTES_LABEL")}</span>
+      <textarea id="notes-input" rows="3" placeholder="${escAttr(t("SAVE_TEST.NOTES_PLACEHOLDER"))}">${escHtml(notes)}</textarea>
       <span class="tag-label">${t("SAVE_TEST.TAGS_LABEL")}</span>
       <div class="tag-input-row">
         <input id="tag-input" type="text" placeholder="${t("SAVE_TEST.TAGS_PLACEHOLDER")}" autocomplete="off" />
@@ -2217,6 +2285,7 @@ var SaveTestElement = class extends HTMLElement {
   shadow;
   _step = "ask";
   description = "";
+  notes = "";
   tags = [];
   translation = translationService;
   constructor() {
@@ -2234,17 +2303,18 @@ var SaveTestElement = class extends HTMLElement {
     this.render();
   }
   confirmSave() {
-    this.dispatch("savetest", { description: this.description.trim(), tags: [...this.tags] });
+    this.dispatch("savetest", { description: this.description.trim(), notes: this.notes, tags: [...this.tags] });
   }
   confirmSaveAndExport() {
-    this.dispatch("saveandexport", { description: this.description.trim(), tags: [...this.tags] });
+    this.dispatch("saveandexport", { description: this.description.trim(), notes: this.notes, tags: [...this.tags] });
   }
   cancel() {
-    this.dispatch("savetest", { description: null, tags: [] });
+    this.dispatch("savetest", { description: null, notes: "", tags: [] });
   }
   restartComponent() {
     this._step = "ask";
     this.description = "";
+    this.notes = "";
     this.tags = [];
     this.render();
   }
@@ -2271,12 +2341,16 @@ var SaveTestElement = class extends HTMLElement {
       this.shadow.getElementById("btn-yes")?.addEventListener("click", () => this.askSave());
       this.shadow.getElementById("btn-no")?.addEventListener("click", () => this.cancel());
     } else {
-      this.shadow.innerHTML = `<style>${SAVE_TEST_STYLES}</style>${renderSaveTestDesc(this.description, this.tags, this.t.bind(this))}`;
+      this.shadow.innerHTML = `<style>${SAVE_TEST_STYLES}</style>${renderSaveTestDesc(this.description, this.notes, this.tags, this.t.bind(this))}`;
       const descInput = this.shadow.getElementById("desc-input");
+      const notesInput = this.shadow.getElementById("notes-input");
       const tagInput = this.shadow.getElementById("tag-input");
       descInput.addEventListener("input", () => {
         this.description = descInput.value;
       });
+      notesInput.addEventListener("input", () => {
+        this.notes = notesInput.value;
+      });
       const tryAddTag = () => {
         this.addTag(tagInput.value);
         tagInput.value = "";
@@ -2382,15 +2456,124 @@ var TEST_EDITOR_STYLES = `
     background: #0d1117; padding: 10px 14px;
     border-top: 1px solid #21262d;
   }
-  .section-title { font-size: 10px; color: #484f58; text-transform: uppercase;
-                   letter-spacing: 0.8px; margin-bottom: 6px; font-weight: 600; }
-  .cmd-list { font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
-              font-size: 11px; color: #c9d1d9; line-height: 1.8; }
-  .icp-list { font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
-              font-size: 11px; color: #3fb950; line-height: 1.8; margin-top: 10px; }
-  .copy-row { display: flex; gap: 6px; margin-top: 10px; }
+  .test-notes {
+    margin: 0 0 10px; padding: 8px 12px;
+    background: rgba(47,129,247,0.06); border-left: 3px solid rgba(47,129,247,0.4);
+    border-radius: 0 6px 6px 0; font-size: 12px; color: #8b949e;
+    line-height: 1.6; white-space: pre-wrap; word-break: break-word;
+  }
+  .code-preview {
+    margin: 0; padding: 10px 12px; background: #161b22;
+    border-radius: 6px; border: 1px solid #21262d;
+    font-size: 11px; color: #c9d1d9; line-height: 1.7;
+    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
+    overflow-x: auto; white-space: pre;
+    scrollbar-width: thin; scrollbar-color: #30363d transparent;
+  }
+  .code-preview::-webkit-scrollbar { height: 4px; }
+  .code-preview::-webkit-scrollbar-thumb { background: #30363d; border-radius: 2px; }
+  .code-preview-icp { margin-top: 8px; }
+  .sh-kw  { color: #ff7b72; }
+  .sh-bi  { color: #d2a8ff; }
+  .sh-str { color: #a5d6ff; }
+  .sh-cmt { color: #8b949e; font-style: italic; }
+  .sh-num { color: #79c0ff; }
 `;
 
+// src/utils/syntax-highlight.utils.ts
+var KEYWORDS = /* @__PURE__ */ new Set([
+  "describe",
+  "it",
+  "xit",
+  "fit",
+  "xdescribe",
+  "fdescribe",
+  "beforeEach",
+  "afterEach",
+  "before",
+  "after",
+  "context",
+  "const",
+  "let",
+  "var",
+  "function",
+  "return",
+  "if",
+  "else",
+  "import",
+  "export",
+  "from",
+  "new",
+  "this",
+  "null",
+  "undefined",
+  "true",
+  "false",
+  "async",
+  "await",
+  "of",
+  "in",
+  "typeof",
+  "void"
+]);
+var BUILTINS = /* @__PURE__ */ new Set(["cy", "expect", "assert", "Cypress", "chai"]);
+function syntaxHighlight(code) {
+  return code.split("\n").map(highlightLine).join("\n");
+}
+function highlightLine(line) {
+  let result = "";
+  let i = 0;
+  const len = line.length;
+  while (i < len) {
+    if (line[i] === "/" && i + 1 < len && line[i + 1] === "/") {
+      result += `<span class="sh-cmt">${escHtml(line.slice(i))}</span>`;
+      return result;
+    }
+    const q = line[i];
+    if (q === "'" || q === '"' || q === "`") {
+      let j = i + 1;
+      while (j < len) {
+        if (line[j] === "\\") {
+          j += 2;
+          continue;
+        }
+        if (line[j] === q) {
+          j++;
+          break;
+        }
+        j++;
+      }
+      result += `<span class="sh-str">${escHtml(line.slice(i, j))}</span>`;
+      i = j;
+      continue;
+    }
+    if (/[0-9]/.test(line[i]) && (i === 0 || !/[a-zA-Z_$]/.test(line[i - 1]))) {
+      let j = i;
+      while (j < len && /[0-9.]/.test(line[j])) j++;
+      result += `<span class="sh-num">${escHtml(line.slice(i, j))}</span>`;
+      i = j;
+      continue;
+    }
+    if (/[a-zA-Z_$]/.test(line[i])) {
+      let j = i;
+      while (j < len && /[a-zA-Z0-9_$]/.test(line[j])) j++;
+      const word = line.slice(i, j);
+      if (KEYWORDS.has(word)) {
+        result += `<span class="sh-kw">${escHtml(word)}</span>`;
+      } else if (BUILTINS.has(word)) {
+        result += `<span class="sh-bi">${escHtml(word)}</span>`;
+      } else {
+        result += escHtml(word);
+      }
+      i = j;
+      continue;
+    }
+    result += escHtml(line[i]);
+    i++;
+  }
+  return result;
+}
+
 // src/components/test-editor/test-editor.template.ts
 function renderTestEditor(state, t) {
   const { tags, visible, selectedVisible, activeTag, selectMode, selectedIds, describeName, expandedIndex, interceptorsByTest } = state;
@@ -2408,18 +2591,20 @@ function renderTestEditor(state, t) {
     const icps = interceptorsByTest[test.id] ?? test.interceptors ?? [];
     const tagsHtml = (test.tags ?? []).length ? `<span class="test-tags">${(test.tags ?? []).map((tag) => `<span class="test-tag">${escHtml(tag)}</span>`).join("")}</span>` : "";
     const checkbox = selectMode ? `<input type="checkbox" ${selectedIds.has(test.id) ? "checked" : ""} data-select="${test.id}" />` : "";
+    const hasIcps = (test.interceptors ?? []).length > 0;
+    const itBlockCode = `it('${test.name}', () => {
+${(test.commands ?? []).map((c) => normalizeBlock(c, "  ")).join("\n")}
+});`;
+    const icpBlockCode = icps.length ? `beforeEach(() => {
+  // Auto-generated Cypress interceptors
+${icps.map((c) => normalizeBlock(c, "  ")).join("\n")}
+});` : "";
+    const notesHtml = expanded && test.notes ? `<p class="test-notes">${escHtml(test.notes)}</p>` : "";
     const body = expanded ? `
       <div class="row-body">
-        <div class="section-title">${t("TEST_EDITOR.SECTION_COMMANDS")} (${(test.commands ?? []).length})</div>
-        <div class="cmd-list">${(test.commands ?? []).map(escHtml).join("<br>")}</div>
-        ${icps.length ? `<div class="icp-list">
-          <div class="section-title" style="margin-top:8px">${t("TEST_EDITOR.SECTION_INTERCEPTORS")}</div>
-          ${icps.map(escHtml).join("<br>")}
-        </div>` : ""}
-        <div class="copy-row">
-          <button class="btn-icon" data-action="copy-cmds" data-idx="${i}">${t("TEST_EDITOR.COPY_CMDS_BTN")}</button>
-          ${icps.length ? `<button class="btn-icon" data-action="copy-icps" data-idx="${i}">${t("TEST_EDITOR.COPY_ICPS_BTN")}</button>` : ""}
-        </div>
+        ${notesHtml}
+        <pre class="code-preview">${syntaxHighlight(itBlockCode)}</pre>
+        ${icpBlockCode ? `<pre class="code-preview code-preview-icp">${syntaxHighlight(icpBlockCode)}</pre>` : ""}
       </div>` : "";
     return `
       <div class="row${selectedIds.has(test.id) ? " selected-row" : ""}">
@@ -2428,6 +2613,8 @@ function renderTestEditor(state, t) {
           <span class="test-name">${escHtml(test.name)}</span>
           ${tagsHtml}
           <span class="test-date">${date}</span>
+          <button class="btn-icon" data-action="copy-cmds" data-idx="${i}" title="${t("TEST_EDITOR.COPY_CMDS_BTN")}">${t("TEST_EDITOR.COPY_CMDS_BTN")}</button>
+          ${hasIcps ? `<button class="btn-icon" data-action="copy-icps" data-idx="${i}" title="${t("TEST_EDITOR.COPY_ICPS_BTN")}">${t("TEST_EDITOR.COPY_ICPS_BTN")}</button>` : ""}
           <button class="btn-icon btn-del" data-action="delete" data-id="${test.id}" title="${t("TEST_EDITOR.DELETE_TITLE")}">\u{1F5D1}</button>
         </div>
         ${body}
@@ -2606,7 +2793,7 @@ ${beforeEach}${itBlocks}
         ev.stopPropagation();
         const idx = Number(el.dataset["idx"]);
         const t = visible[idx];
-        this.copyToClipboard((this.interceptorsByTest[t?.id] ?? []).join("\n"));
+        this.copyToClipboard((this.interceptorsByTest[t?.id] ?? t?.interceptors ?? []).join("\n"));
       });
     });
   }
@@ -2719,7 +2906,7 @@ var LANGS = [
   { value: "de", label: "Deutsch" }
 ];
 function renderConfiguration(state, t) {
-  const { selectedLanguage, advancedHttpConfig, selectorStrategy, filesystemGranted, cypressFolderName, smartSelectorEnabled } = state;
+  const { selectedLanguage, advancedHttpConfig, selectorStrategy, filesystemGranted, cypressFolderName, smartSelectorEnabled, startHidden } = state;
   const langOptions = LANGS.map(
     (l) => `<option value="${l.value}" ${selectedLanguage === l.value ? "selected" : ""}>${l.label}</option>`
   ).join("");
@@ -2759,6 +2946,18 @@ function renderConfiguration(state, t) {
         </label>
       </div>
 
+      <!-- Start Hidden -->
+      <div class="card">
+        <div class="card-hd">${t("CONFIG.START_HIDDEN_SECTION")}</div>
+        <label class="check-row">
+          <input type="checkbox" id="start-hidden-toggle" ${startHidden ? "checked" : ""} />
+          <div>
+            <div class="check-title">${t("CONFIG.START_HIDDEN_TITLE")}</div>
+            <div class="check-sub">${t("CONFIG.START_HIDDEN_SUB")}</div>
+          </div>
+        </label>
+      </div>
+
       <!-- Selector Strategy -->
       <div class="card card-wide">
         <div class="card-hd">${t("CONFIG.SELECTOR_SECTION")}</div>
@@ -2821,6 +3020,7 @@ var ConfigurationElement = class extends HTMLElement {
   advancedHttpConfig = false;
   selectorStrategy = "data-cy";
   smartSelectorEnabled = true;
+  startHidden = false;
   filesystemGranted = false;
   cypressFolderName = null;
   constructor() {
@@ -2846,6 +3046,7 @@ var ConfigurationElement = class extends HTMLElement {
     this.advancedHttpConfig = localStorage.getItem("extendedHttpCommands") === "true";
     this.selectorStrategy = config?.["selectorStrategy"] ?? "data-cy";
     this.smartSelectorEnabled = config?.["smartSelectorEnabled"] !== "false";
+    this.startHidden = config?.["startHidden"] === "true";
     this.filesystemGranted = config?.["allowReadWriteFiles"] === "true";
     const handle = config?.["cypressDirectoryHandle"];
     this.cypressFolderName = handle?.name ?? null;
@@ -2863,6 +3064,12 @@ var ConfigurationElement = class extends HTMLElement {
     this.persistence.setConfig({ extendedHttpCommands: checked ? "true" : "false" });
     this.render();
   }
+  async onStartHiddenChange(checked) {
+    this.startHidden = checked;
+    await this.persistence.setConfig({ startHidden: checked ? "true" : "false" });
+    this.dispatchEvent(new CustomEvent("starthiddenchange", { detail: checked, bubbles: true, composed: true }));
+    this.render();
+  }
   async onSmartSelectorChange(enabled) {
     this.smartSelectorEnabled = enabled;
     await this.persistence.setConfig({ smartSelectorEnabled: enabled ? "true" : "false" });
@@ -2923,7 +3130,8 @@ var ConfigurationElement = class extends HTMLElement {
       selectorStrategy: this.selectorStrategy,
       filesystemGranted: this.filesystemGranted,
       cypressFolderName: this.cypressFolderName,
-      smartSelectorEnabled: this.smartSelectorEnabled
+      smartSelectorEnabled: this.smartSelectorEnabled,
+      startHidden: this.startHidden
     }, this.t.bind(this))}`;
     ;
     this.shadow.getElementById("lang-select").addEventListener(
@@ -2938,6 +3146,10 @@ var ConfigurationElement = class extends HTMLElement {
       "change",
       (e) => this.onSmartSelectorChange(e.target.checked)
     );
+    this.shadow.getElementById("start-hidden-toggle").addEventListener(
+      "change",
+      (e) => this.onStartHiddenChange(e.target.checked)
+    );
     this.shadow.getElementById("selector-strategy").addEventListener(
       "change",
       (e) => this.onSelectorStrategyChange(e.target.value)
@@ -3010,12 +3222,21 @@ var ADVANCED_TEST_EDITOR_STYLES = `
   .file-name { font-size: 11px; color: #484f58; margin-bottom: 8px; font-family: monospace; }
   pre {
     background: #0d1117; padding: 12px; border-radius: 8px;
-    font-size: 11px; color: #c9d1d9; overflow-x: auto;
-    white-space: pre-wrap; word-break: break-all; margin: 0;
+    font-size: 11px; color: #c9d1d9; margin: 0;
     font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
-    line-height: 1.7; overflow-y: auto;
-    border: 1px solid #21262d;
+    line-height: 1.7; border: 1px solid #21262d;
+    white-space: pre; overflow-x: auto; overflow-y: auto;
+    scrollbar-width: thin; scrollbar-color: #30363d transparent;
   }
+  pre::-webkit-scrollbar { width: 4px; height: 4px; }
+  pre::-webkit-scrollbar-thumb { background: #30363d; border-radius: 2px; }
+  .pre-block { font-size: 10.5px; }
+  .pre-icp .sh-str { color: #85e89d; }
+  .sh-kw  { color: #ff7b72; }
+  .sh-bi  { color: #d2a8ff; }
+  .sh-str { color: #a5d6ff; }
+  .sh-cmt { color: #8b949e; font-style: italic; }
+  .sh-num { color: #79c0ff; }
   .footer {
     padding: 10px 14px; border-top: 1px solid #21262d;
     display: flex; gap: 8px; justify-content: flex-end; background: #161b22;
@@ -3031,6 +3252,12 @@ var ADVANCED_TEST_EDITOR_STYLES = `
   .btn-save:hover { background: #1f6feb; border-color: #1f6feb; color: #fff; }
   .btn-save:disabled { background: #21262d; border-color: #30363d; color: #8b949e; }
   .placeholder { color: #484f58; font-size: 13px; padding: 28px; text-align: center; }
+  .test-notes {
+    margin: 0 0 10px; padding: 8px 12px;
+    background: rgba(47,129,247,0.06); border-left: 3px solid rgba(47,129,247,0.4);
+    border-radius: 0 6px 6px 0; font-size: 12px; color: #8b949e;
+    line-height: 1.6; white-space: pre-wrap; word-break: break-word;
+  }
   .block-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
   .btn-copy {
     padding: 3px 10px; border: 1px solid #30363d; border-radius: 5px; cursor: pointer;
@@ -3083,23 +3310,24 @@ function renderNoPermission(needsReauth, t) {
     </div>`;
 }
 function renderAdvancedEditor(state, t) {
-  const { e2eTree, selectedFile, selectedFileContent, testItBlock, interceptorsBlock, saveButtonEnabled, isCreatingFile, collapsedDirs, sidebarWidth } = state;
+  const { e2eTree, selectedFile, selectedFileContent, testItBlock, interceptorsBlock, testNotes, saveButtonEnabled, isCreatingFile, collapsedDirs, sidebarWidth } = state;
   const treeHtml = e2eTree.length ? renderTree(e2eTree, selectedFile, collapsedDirs) : `<div class="tree-item" style="color:#6c7a99">${t("ADVANCED_EDITOR.NO_FILES")}</div>`;
   const contentHtml = selectedFileContent ? `<div class="file-name">\u{1F4C4} ${escHtml(selectedFile?.name ?? "")}</div>
-       <pre>${escHtml(selectedFileContent.slice(0, 4e3))}${selectedFileContent.length > 4e3 ? "\n..." : ""}</pre>` : `<div class="placeholder">${t("ADVANCED_EDITOR.SELECT_FILE")}</div>`;
+       <pre class="pre-file">${syntaxHighlight(selectedFileContent.slice(0, 6e3))}${selectedFileContent.length > 6e3 ? "\n..." : ""}</pre>` : `<div class="placeholder">${t("ADVANCED_EDITOR.SELECT_FILE")}</div>`;
+  const notesHtml = testItBlock && testNotes ? `<p class="test-notes">${escHtml(testNotes)}</p>` : "";
   const itHtml = testItBlock ? `<div style="margin-top:10px">
          <div class="file-name block-header">
            <span>${t("ADVANCED_EDITOR.IT_LABEL")}</span>
            <button id="btn-copy-it" class="btn-copy">${t("ADVANCED_EDITOR.COPY_IT_BTN")}</button>
          </div>
-         <pre style="max-height:120px;font-size:10.5px">${escHtml(testItBlock.slice(0, 500))}</pre>
+         <pre class="pre-block">${syntaxHighlight(testItBlock.slice(0, 3e3))}</pre>
        </div>` : "";
   const interceptorsHtml = interceptorsBlock ? `<div style="margin-top:10px">
          <div class="file-name block-header">
            <span>${t("ADVANCED_EDITOR.BEFORE_EACH_LABEL")}</span>
            <button id="btn-copy-interceptors" class="btn-copy">${t("ADVANCED_EDITOR.COPY_ICP_BTN")}</button>
          </div>
-         <pre style="max-height:120px;font-size:10.5px;color:#3fb950">${escHtml(interceptorsBlock.slice(0, 500))}</pre>
+         <pre class="pre-block pre-icp">${syntaxHighlight(interceptorsBlock.slice(0, 3e3))}</pre>
        </div>` : "";
   const newFileForm = isCreatingFile ? `<div class="new-file-form">
          <input id="input-new-file" type="text" placeholder="${escHtml(t("ADVANCED_EDITOR.NEW_FILE_PLACEHOLDER"))}" autocomplete="off" />
@@ -3123,7 +3351,7 @@ function renderAdvancedEditor(state, t) {
       </div>
       <div id="resize-handle" class="resize-handle"></div>
       <div class="main">
-        <div class="content-area">${contentHtml}${itHtml}${interceptorsHtml}</div>
+        <div class="content-area">${contentHtml}${notesHtml}${itHtml}${interceptorsHtml}</div>
         <div class="footer">
           <button id="btn-save" class="btn-save"
             ${!saveButtonEnabled || !testItBlock ? "disabled" : ""}>
@@ -3184,6 +3412,7 @@ var AdvancedTestEditorElement = class extends HTMLElement {
   selectedFileContent = null;
   testItBlock = "";
   interceptorsBlock = "";
+  testNotes = "";
   isPreviewMode = false;
   previewFileName = null;
   previewFileContent = null;
@@ -3277,7 +3506,8 @@ var AdvancedTestEditorElement = class extends HTMLElement {
     if (this.interceptorsBlock) {
       content = this.transformationService.insertBeforeEach(content, this.interceptorsBlock);
     }
-    content = this.transformationService.insertItBlock(content, this.testItBlock);
+    const comment = this.testNotes ? this.transformationService.buildBlockComment(this.testNotes) + "\n" : "";
+    content = this.transformationService.insertItBlock(content, comment + this.testItBlock);
     if (!content) return;
     const writable = await this.selectedFileHandle.createWritable();
     await writable.write(content);
@@ -3304,9 +3534,11 @@ var AdvancedTestEditorElement = class extends HTMLElement {
     if (test) {
       this.testItBlock = test.itBlock ?? "";
       this.interceptorsBlock = test.interceptorsBlock ?? "";
+      this.testNotes = test.notes ?? "";
     } else {
       this.testItBlock = "";
       this.interceptorsBlock = "";
+      this.testNotes = "";
     }
     this.render();
   }
@@ -3396,6 +3628,7 @@ var AdvancedTestEditorElement = class extends HTMLElement {
       selectedFileContent: this.selectedFileContent,
       testItBlock: this.testItBlock,
       interceptorsBlock: this.interceptorsBlock,
+      testNotes: this.testNotes,
       saveButtonEnabled: this.saveButtonEnabled,
       isCreatingFile: this.isCreatingFile,
       collapsedDirs: this.collapsedDirs,
@@ -3962,6 +4195,7 @@ var LibE2eRecorderElement = class extends HTMLElement {
   recording;
   persistence;
   translation;
+  isVisible = false;
   isRecording = false;
   isPaused = false;
   cypressCommands = [];
@@ -3996,6 +4230,7 @@ var LibE2eRecorderElement = class extends HTMLElement {
     this.initSelectorStrategy();
     this.initSubscriptions();
     this.render();
+    this.initVisibility();
     this.keydownHandler = (e) => this.handleKeyboardEvent(e);
     window.addEventListener("keydown", this.keydownHandler);
   }
@@ -4061,6 +4296,16 @@ var LibE2eRecorderElement = class extends HTMLElement {
       document.body.appendChild(picker);
     });
   }
+  async initVisibility() {
+    if (this.hasAttribute("start-hidden")) {
+      this.isVisible = this.getAttribute("start-hidden") === "false";
+      this.style.display = this.isVisible ? "" : "none";
+      return;
+    }
+    const config = await this.persistence.getGeneralConfig();
+    this.isVisible = config?.["startHidden"] !== "true";
+    this.style.display = this.isVisible ? "" : "none";
+  }
   async initSelectorStrategy() {
     const config = await this.persistence.getGeneralConfig();
     const strategy = config?.["selectorStrategy"];
@@ -4080,6 +4325,12 @@ var LibE2eRecorderElement = class extends HTMLElement {
   handleKeyboardEvent(event) {
     if (!event.ctrlKey) return;
     const key = event.key.toLowerCase();
+    if (key === "e" && event.shiftKey) {
+      event.preventDefault();
+      this.toggleVisibility();
+      return;
+    }
+    if (!this.isVisible) return;
     if (key === "r") {
       event.preventDefault();
       this.toggle();
@@ -4097,6 +4348,10 @@ var LibE2eRecorderElement = class extends HTMLElement {
       this.showSettingsDialog();
     }
   }
+  toggleVisibility() {
+    this.isVisible = !this.isVisible;
+    this.style.display = this.isVisible ? "" : "none";
+  }
   // ── recording history (task 5) ────────────────────────────────────────────
   saveRecordingHistory() {
     if (!this.cypressCommands.length) return;
@@ -4332,13 +4587,13 @@ cypress/         <span style="color:#484f58">${this.translation.translate("RECOR
           child.translation = this.translation;
           container.appendChild(child);
           child.addEventListener("savetest", (e) => {
-            const { description, tags } = e.detail ?? {};
-            this.onSaveTest(description ?? null, tags ?? []);
+            const { description, notes, tags } = e.detail ?? {};
+            this.onSaveTest(description ?? null, tags ?? [], notes ?? "");
             Swal.close();
           });
           child.addEventListener("saveandexport", (e) => {
-            const { description, tags } = e.detail ?? {};
-            this.onSaveAndExportTest(description ?? null, tags ?? []);
+            const { description, notes, tags } = e.detail ?? {};
+            this.onSaveAndExportTest(description ?? null, tags ?? [], notes ?? "");
             Swal.close();
           });
         },
@@ -4369,6 +4624,10 @@ cypress/         <span style="color:#484f58">${this.translation.translate("RECOR
           child.addEventListener("smartselectorchange", (e) => {
             this.smartSelectorEnabled = e.detail;
           });
+          child.addEventListener("starthiddenchange", (e) => {
+            this.isVisible = !e.detail;
+            this.style.display = this.isVisible ? "" : "none";
+          });
         },
         willClose: () => {
           this.isSettingsDialogOpen = false;
@@ -4480,18 +4739,18 @@ cypress/         <span style="color:#484f58">${this.translation.translate("RECOR
     this.resizePopup();
   }
   // ── save handlers ─────────────────────────────────────────────────────────
-  async onSaveTest(description, tags = []) {
+  async onSaveTest(description, tags = [], notes = "") {
     if (description) {
-      await this.persistence.insertTest(description, this.cypressCommands, this.interceptors, tags);
+      await this.persistence.insertTest(description, this.cypressCommands, this.interceptors, tags, notes);
       this.recording.clearCommands();
       this.clearRecordingHistory();
       this.cypressCommands = [];
       this.interceptors = [];
     }
   }
-  async onSaveAndExportTest(description, tags = []) {
+  async onSaveAndExportTest(description, tags = [], notes = "") {
     if (description) {
-      const id = await this.persistence.insertTest(description, this.cypressCommands, this.interceptors, tags);
+      const id = await this.persistence.insertTest(description, this.cypressCommands, this.interceptors, tags, notes);
       this.recording.clearCommands();
       this.clearRecordingHistory();
       this.cypressCommands = [];
@@ -4518,6 +4777,7 @@ cypress/         <span style="color:#484f58">${this.translation.translate("RECOR
   render() {
     const rec = this.isRecording;
     const paused = this.isPaused;
+    this.style.display = this.isVisible ? "" : "none";
     this.shadow.innerHTML = `<style>${getRecorderStyles(rec, paused)}</style>${renderRecorderWidget(rec, paused, this.translation.translate.bind(this.translation))}`;
     this.shadow.querySelector('[data-action="toggle"]')?.addEventListener("click", () => this.toggle());
     this.shadow.querySelector('[data-action="pause"]')?.addEventListener("click", () => this.togglePause());