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

package/dist/index.cjs

@@ -578,7 +578,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",
@@ -627,7 +629,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",
@@ -666,7 +671,12 @@ var I18N_ES = {
     COPY_ICP_BTN: "\u{1F4CB} Copiar interceptores",
     INSERT_BTN: "\u{1F4BE} Insertar en archivo",
     EDIT_MANUAL_BTN: "\u270F\uFE0F Editar manualmente",
-    CLOSE_BTN: "\u2715 Cerrar"
+    CLOSE_BTN: "\u2715 Cerrar",
+    NEW_FILE_BTN: "+ Nuevo archivo",
+    REFRESH_BTN: "\u21BB Actualizar",
+    NEW_FILE_PLACEHOLDER: "nombre-del-test",
+    NEW_FILE_CONFIRM: "Crear",
+    NEW_FILE_CANCEL: "Cancelar"
   },
   FILE_PREVIEW: {
     NO_FILE: "Sin archivo",
@@ -735,7 +745,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",
@@ -784,7 +796,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",
@@ -823,7 +838,12 @@ var I18N_EN = {
     COPY_ICP_BTN: "\u{1F4CB} Copy interceptors",
     INSERT_BTN: "\u{1F4BE} Insert into file",
     EDIT_MANUAL_BTN: "\u270F\uFE0F Edit manually",
-    CLOSE_BTN: "\u2715 Close"
+    CLOSE_BTN: "\u2715 Close",
+    NEW_FILE_BTN: "+ New file",
+    REFRESH_BTN: "\u21BB Refresh",
+    NEW_FILE_PLACEHOLDER: "test-name",
+    NEW_FILE_CONFIRM: "Create",
+    NEW_FILE_CANCEL: "Cancel"
   },
   FILE_PREVIEW: {
     NO_FILE: "No file",
@@ -892,7 +912,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",
@@ -941,7 +963,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",
@@ -980,7 +1005,12 @@ var I18N_FR = {
     COPY_ICP_BTN: "\u{1F4CB} Copier les intercepteurs",
     INSERT_BTN: "\u{1F4BE} Ins\xE9rer dans le fichier",
     EDIT_MANUAL_BTN: "\u270F\uFE0F \xC9diter manuellement",
-    CLOSE_BTN: "\u2715 Fermer"
+    CLOSE_BTN: "\u2715 Fermer",
+    NEW_FILE_BTN: "+ Nouveau fichier",
+    REFRESH_BTN: "\u21BB Actualiser",
+    NEW_FILE_PLACEHOLDER: "nom-du-test",
+    NEW_FILE_CONFIRM: "Cr\xE9er",
+    NEW_FILE_CANCEL: "Annuler"
   },
   FILE_PREVIEW: {
     NO_FILE: "Sans fichier",
@@ -1049,7 +1079,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",
@@ -1098,7 +1130,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",
@@ -1137,7 +1172,12 @@ var I18N_IT = {
     COPY_ICP_BTN: "\u{1F4CB} Copia interceptor",
     INSERT_BTN: "\u{1F4BE} Inserisci nel file",
     EDIT_MANUAL_BTN: "\u270F\uFE0F Modifica manualmente",
-    CLOSE_BTN: "\u2715 Chiudi"
+    CLOSE_BTN: "\u2715 Chiudi",
+    NEW_FILE_BTN: "+ Nuovo file",
+    REFRESH_BTN: "\u21BB Aggiorna",
+    NEW_FILE_PLACEHOLDER: "nome-del-test",
+    NEW_FILE_CONFIRM: "Crea",
+    NEW_FILE_CANCEL: "Annulla"
   },
   FILE_PREVIEW: {
     NO_FILE: "Nessun file",
@@ -1206,7 +1246,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",
@@ -1255,7 +1297,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",
@@ -1294,7 +1339,12 @@ var I18N_DE = {
     COPY_ICP_BTN: "\u{1F4CB} Interceptors kopieren",
     INSERT_BTN: "\u{1F4BE} In Datei einf\xFCgen",
     EDIT_MANUAL_BTN: "\u270F\uFE0F Manuell bearbeiten",
-    CLOSE_BTN: "\u2715 Schlie\xDFen"
+    CLOSE_BTN: "\u2715 Schlie\xDFen",
+    NEW_FILE_BTN: "+ Neue Datei",
+    REFRESH_BTN: "\u21BB Aktualisieren",
+    NEW_FILE_PLACEHOLDER: "test-name",
+    NEW_FILE_CONFIRM: "Erstellen",
+    NEW_FILE_CANCEL: "Abbrechen"
   },
   FILE_PREVIEW: {
     NO_FILE: "Keine Datei",
@@ -1376,13 +1426,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}
 });`;
@@ -1413,6 +1487,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";
   }
@@ -1824,9 +1905,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);
@@ -1850,9 +1931,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) {
@@ -2592,7 +2673,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 {
@@ -2614,6 +2696,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;
   }
@@ -2653,7 +2744,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("");
@@ -2662,6 +2753,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" />
@@ -2681,6 +2774,7 @@ var SaveTestElement = class extends HTMLElement {
   shadow;
   _step = "ask";
   description = "";
+  notes = "";
   tags = [];
   translation = translationService;
   constructor() {
@@ -2698,17 +2792,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();
   }
@@ -2735,12 +2830,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 = "";
@@ -2846,17 +2945,129 @@ 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/components/test-editor/test-editor.template.ts
 init_html_utils();
+
+// src/utils/syntax-highlight.utils.ts
+init_html_utils();
+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;
   const tagFilterHtml = tags.length ? `<div class="tag-filter">
@@ -2873,18 +3084,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" : ""}">
@@ -2893,6 +3106,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}
@@ -3071,7 +3286,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"));
       });
     });
   }
@@ -3184,7 +3399,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("");
@@ -3224,6 +3439,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>
@@ -3286,6 +3513,7 @@ var ConfigurationElement = class extends HTMLElement {
   advancedHttpConfig = false;
   selectorStrategy = "data-cy";
   smartSelectorEnabled = true;
+  startHidden = false;
   filesystemGranted = false;
   cypressFolderName = null;
   constructor() {
@@ -3311,6 +3539,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;
@@ -3328,6 +3557,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" });
@@ -3388,7 +3623,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(
@@ -3403,6 +3639,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)
@@ -3434,26 +3674,38 @@ var ADVANCED_TEST_EDITOR_STYLES = `
   * { box-sizing: border-box; }
   .layout { display: flex; flex: 1; min-height: 0; }
   .sidebar {
-    width: 220px; border-right: 1px solid #21262d; overflow-y: auto;
-    padding: 8px; background: #0d1117; flex-shrink: 0;
+    border-right: none; display: flex; flex-direction: column;
+    background: #0d1117; flex-shrink: 0; min-width: 140px; max-width: 500px;
+  }
+  .tree-scroll {
+    flex: 1; overflow-y: auto; padding: 6px 4px;
     scrollbar-width: thin; scrollbar-color: #30363d transparent;
   }
-  .sidebar::-webkit-scrollbar { width: 4px; }
-  .sidebar::-webkit-scrollbar-thumb { background: #30363d; border-radius: 2px; }
-  .main { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: #161b22; }
+  .tree-scroll::-webkit-scrollbar { width: 4px; }
+  .tree-scroll::-webkit-scrollbar-thumb { background: #30363d; border-radius: 2px; }
+  .resize-handle {
+    width: 4px; background: #21262d; cursor: col-resize; flex-shrink: 0;
+    transition: background 0.15s;
+  }
+  .resize-handle:hover, .resize-handle.dragging { background: #2f81f7; }
+  .main { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: #161b22; min-width: 0; }
   .no-perm {
     padding: 28px; color: #484f58; font-size: 13px; text-align: center;
     display: flex; flex-direction: column; align-items: center; gap: 12px; line-height: 1.6;
   }
   .tree-item {
-    padding: 5px 8px; border-radius: 5px; cursor: pointer;
+    padding: 4px 6px; border-radius: 4px; cursor: pointer;
     font-size: 12px; color: #8b949e; white-space: nowrap;
     overflow: hidden; text-overflow: ellipsis;
     transition: background 0.12s, color 0.12s;
+    display: flex; align-items: center; gap: 4px; user-select: none;
   }
   .tree-item:hover { background: #161b22; color: #c9d1d9; }
   .tree-item.selected { background: rgba(47,129,247,0.12); color: #2f81f7; }
   .tree-item.dir { color: #e3b341; font-weight: 600; }
+  .tree-item.dir:hover { background: rgba(227,179,65,0.08); color: #f0c040; }
+  .dir-arrow { font-size: 8px; color: #484f58; width: 10px; flex-shrink: 0; line-height: 1; }
+  .tree-connector { display: block; width: 1px; background: #21262d; margin-left: 13px; height: 100%; }
   .content-area {
     flex: 1; padding: 12px 14px; overflow-y: auto;
     scrollbar-width: thin; scrollbar-color: #30363d transparent;
@@ -3463,12 +3715,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;
@@ -3484,6 +3745,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;
@@ -3491,6 +3758,34 @@ var ADVANCED_TEST_EDITOR_STYLES = `
     transition: background 0.12s, color 0.12s; white-space: nowrap; flex-shrink: 0;
   }
   .btn-copy:hover { background: #30363d; color: #e6edf3; }
+  .sidebar-toolbar {
+    display: flex; gap: 4px; padding: 6px 6px 4px;
+    border-bottom: 1px solid #21262d; flex-shrink: 0; background: #0d1117;
+  }
+  .btn-toolbar {
+    flex: 1; padding: 4px 6px; border: 1px solid #30363d; border-radius: 5px; cursor: pointer;
+    font-size: 10px; font-weight: 500; background: #161b22; color: #8b949e;
+    transition: background 0.12s, color 0.12s; white-space: nowrap; overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .btn-toolbar:hover { background: #30363d; color: #e6edf3; }
+  .btn-toolbar.btn-new { color: #3fb950; border-color: #238636; }
+  .btn-toolbar.btn-new:hover { background: #238636; color: #fff; }
+  .new-file-form {
+    padding: 6px; border-bottom: 1px solid #21262d; display: flex; flex-direction: column; gap: 4px;
+  }
+  .new-file-form input {
+    width: 100%; padding: 4px 7px; background: #0d1117; border: 1px solid #30363d;
+    border-radius: 5px; color: #e6edf3; font-size: 11px; font-family: monospace;
+    outline: none;
+  }
+  .new-file-form input:focus { border-color: #2f81f7; }
+  .new-file-form .ext { font-size: 9px; color: #484f58; padding: 0 2px; }
+  .new-file-actions { display: flex; gap: 4px; }
+  .btn-confirm { flex: 1; padding: 3px 6px; border: 1px solid #238636; border-radius: 5px; cursor: pointer; font-size: 10px; font-weight: 500; background: #238636; color: #fff; transition: background 0.12s; }
+  .btn-confirm:hover { background: #2ea043; }
+  .btn-cancel-form { flex: 1; padding: 3px 6px; border: 1px solid #30363d; border-radius: 5px; cursor: pointer; font-size: 10px; font-weight: 500; background: #21262d; color: #8b949e; transition: background 0.12s; }
+  .btn-cancel-form:hover { background: #30363d; color: #e6edf3; }
 `;
 
 // src/components/advanced-test-editor/advanced-test-editor.template.ts
@@ -3509,29 +3804,48 @@ function renderNoPermission(needsReauth, t) {
     </div>`;
 }
 function renderAdvancedEditor(state, t) {
-  const { e2eTree, selectedFile, selectedFileContent, testItBlock, interceptorsBlock, saveButtonEnabled } = state;
-  const treeHtml = e2eTree.length ? renderTree(e2eTree, selectedFile) : `<div class="tree-item" style="color:#6c7a99">${t("ADVANCED_EDITOR.NO_FILES")}</div>`;
+  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" />
+         <span class="ext">.cy.ts</span>
+         <div class="new-file-actions">
+           <button id="btn-new-file-confirm" class="btn-confirm">${t("ADVANCED_EDITOR.NEW_FILE_CONFIRM")}</button>
+           <button id="btn-new-file-cancel" class="btn-cancel-form">${t("ADVANCED_EDITOR.NEW_FILE_CANCEL")}</button>
+         </div>
+       </div>` : "";
+  const toolbar = `
+    <div class="sidebar-toolbar">
+      <button id="btn-new-file" class="btn-toolbar btn-new">${t("ADVANCED_EDITOR.NEW_FILE_BTN")}</button>
+      <button id="btn-refresh" class="btn-toolbar">${t("ADVANCED_EDITOR.REFRESH_BTN")}</button>
+    </div>`;
   return `
     <div class="layout">
-      <div class="sidebar">${treeHtml}</div>
+      <div class="sidebar" style="width:${sidebarWidth}px">
+        ${toolbar}
+        ${newFileForm}
+        <div class="tree-scroll">${treeHtml}</div>
+      </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" : ""}>
@@ -3545,16 +3859,24 @@ function renderAdvancedEditor(state, t) {
       </div>
     </div>`;
 }
-function renderTree(nodes, selected, indent = 0) {
+function renderTree(nodes, selected, collapsedDirs, indent = 0, parentPath = "") {
   return nodes.map((n) => {
+    const currentPath = parentPath ? `${parentPath}/${n.name}` : n.name;
     const isFile = n.kind === "file";
-    const isSel = selected === n || selected?.name === n.name;
-    const cls = `tree-item${isFile ? "" : " dir"}${isSel ? " selected" : ""}`;
-    const pad = `padding-left:${8 + indent * 14}px`;
-    if (!isFile && n.children?.length) {
-      return `<div class="${cls}" style="${pad}">\u{1F4C1} ${escHtml(n.name)}</div>
-              ${renderTree(n.children, selected, indent + 1)}`;
+    const pad = `padding-left:${6 + indent * 14}px`;
+    if (!isFile) {
+      const dir = n;
+      const hasChildren = (dir.children?.length ?? 0) > 0;
+      const isCollapsed = collapsedDirs.has(currentPath);
+      const arrow = hasChildren ? isCollapsed ? "\u25B6" : "\u25BC" : "\xB7";
+      const dirHtml = `<div class="tree-item dir" style="${pad}" data-dir-path="${escAttr(currentPath)}">
+        <span class="dir-arrow">${arrow}</span>\u{1F4C1} ${escHtml(n.name)}
+      </div>`;
+      if (!hasChildren || isCollapsed) return dirHtml;
+      return dirHtml + renderTree(dir.children, selected, collapsedDirs, indent + 1, currentPath);
     }
+    const isSel = selected?.name === n.name;
+    const cls = `tree-item${isSel ? " selected" : ""}`;
     const data = JSON.stringify({ kind: n.kind, name: n.name }).replace(/"/g, "&quot;");
     return `<div class="${cls}" style="${pad}" data-file="${data}">\u{1F4C4} ${escHtml(n.name)}</div>`;
   }).join("");
@@ -3584,12 +3906,17 @@ var AdvancedTestEditorElement = class extends HTMLElement {
   selectedFileContent = null;
   testItBlock = "";
   interceptorsBlock = "";
+  testNotes = "";
   isPreviewMode = false;
   previewFileName = null;
   previewFileContent = null;
+  isCreatingFile = false;
+  collapsedDirs = /* @__PURE__ */ new Set();
+  sidebarWidth = 220;
   hasPermission = false;
   needsReauth = false;
   _dirHandle = null;
+  _e2eHandle = null;
   constructor() {
     super();
     this.shadow = this.attachShadow({ mode: "open" });
@@ -3631,7 +3958,8 @@ var AdvancedTestEditorElement = class extends HTMLElement {
     try {
       for await (const entry of this._dirHandle.values()) {
         if (entry.kind === "directory" && entry.name === "e2e") {
-          const tree = await this.transformationService.scanDirectory(entry);
+          this._e2eHandle = entry;
+          const tree = await this.transformationService.scanDirectory(this._e2eHandle);
           this.e2eTree = tree.children ?? [];
           this.render();
           return;
@@ -3640,13 +3968,40 @@ var AdvancedTestEditorElement = class extends HTMLElement {
     } catch {
     }
   }
+  async createNewFile(rawName) {
+    if (!this._e2eHandle) return;
+    const name = rawName.trim().replace(/\.cy\.ts$/, "");
+    if (!name) return;
+    const fileName = `${name}.cy.ts`;
+    const template = `describe('${name}', () => {
+
+  it('should ', () => {
+
+  });
+
+});
+`;
+    try {
+      const fileHandle = await this._e2eHandle.getFileHandle(fileName, { create: true });
+      const writable = await fileHandle.createWritable();
+      await writable.write(template);
+      await writable.close();
+    } catch {
+    }
+    this.isCreatingFile = false;
+    await this.getFoldersData();
+  }
+  async refreshTree() {
+    await this.getFoldersData();
+  }
   async saveCommandsToFile() {
     if (!this.selectedFileHandle || !this.selectedFileContent || !this.testItBlock) return;
     let content = this.selectedFileContent;
     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);
@@ -3673,9 +4028,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();
   }
@@ -3697,6 +4054,44 @@ var AdvancedTestEditorElement = class extends HTMLElement {
       composed: true
     }));
   }
+  toggleDir(path) {
+    if (this.collapsedDirs.has(path)) {
+      this.collapsedDirs.delete(path);
+    } else {
+      this.collapsedDirs.add(path);
+    }
+    this.render();
+  }
+  setupResizeHandle() {
+    const handle = this.shadow.getElementById("resize-handle");
+    const sidebar = this.shadow.querySelector(".sidebar");
+    if (!handle || !sidebar) return;
+    let startX = 0;
+    let startWidth = 0;
+    const onMouseMove = (e) => {
+      const delta = e.clientX - startX;
+      const newWidth = Math.max(140, Math.min(500, startWidth + delta));
+      this.sidebarWidth = newWidth;
+      sidebar.style.width = `${newWidth}px`;
+    };
+    const onMouseUp = () => {
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseup", onMouseUp);
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+      handle.classList.remove("dragging");
+    };
+    handle.addEventListener("mousedown", (e) => {
+      startX = e.clientX;
+      startWidth = sidebar.offsetWidth;
+      document.addEventListener("mousemove", onMouseMove);
+      document.addEventListener("mouseup", onMouseUp);
+      document.body.style.cursor = "col-resize";
+      document.body.style.userSelect = "none";
+      handle.classList.add("dragging");
+      e.preventDefault();
+    });
+  }
   closePreview() {
     this.isPreviewMode = false;
     this.previewFileName = null;
@@ -3727,7 +4122,11 @@ var AdvancedTestEditorElement = class extends HTMLElement {
       selectedFileContent: this.selectedFileContent,
       testItBlock: this.testItBlock,
       interceptorsBlock: this.interceptorsBlock,
-      saveButtonEnabled: this.saveButtonEnabled
+      testNotes: this.testNotes,
+      saveButtonEnabled: this.saveButtonEnabled,
+      isCreatingFile: this.isCreatingFile,
+      collapsedDirs: this.collapsedDirs,
+      sidebarWidth: this.sidebarWidth
     }, this.t.bind(this))}`;
     this.shadow.querySelectorAll("[data-file]").forEach((el) => {
       el.addEventListener("click", () => {
@@ -3735,11 +4134,41 @@ var AdvancedTestEditorElement = class extends HTMLElement {
         if (data) this.onFileClick(JSON.parse(data));
       });
     });
+    this.shadow.querySelectorAll("[data-dir-path]").forEach((el) => {
+      el.addEventListener("click", () => {
+        const path = el.dataset["dirPath"];
+        if (path) this.toggleDir(path);
+      });
+    });
+    this.setupResizeHandle();
     this.shadow.getElementById("btn-save")?.addEventListener("click", () => this.saveCommandsToFile());
     this.shadow.getElementById("btn-edit")?.addEventListener("click", () => this.openEditManually());
     this.shadow.getElementById("btn-copy-it")?.addEventListener("click", () => this.copyToClipboard(this.testItBlock));
     this.shadow.getElementById("btn-copy-interceptors")?.addEventListener("click", () => this.copyToClipboard(this.interceptorsBlock));
     this.shadow.getElementById("btn-close")?.addEventListener("click", () => this.closePreview());
+    this.shadow.getElementById("btn-new-file")?.addEventListener("click", () => {
+      this.isCreatingFile = !this.isCreatingFile;
+      this.render();
+      if (this.isCreatingFile) this.shadow.getElementById("input-new-file")?.focus();
+    });
+    this.shadow.getElementById("btn-refresh")?.addEventListener("click", () => this.refreshTree());
+    this.shadow.getElementById("btn-new-file-confirm")?.addEventListener("click", () => {
+      const input2 = this.shadow.getElementById("input-new-file");
+      this.createNewFile(input2?.value ?? "");
+    });
+    this.shadow.getElementById("btn-new-file-cancel")?.addEventListener("click", () => {
+      this.isCreatingFile = false;
+      this.render();
+    });
+    const input = this.shadow.getElementById("input-new-file");
+    input?.addEventListener("keydown", (e) => {
+      if (e.key === "Enter") {
+        this.createNewFile(input.value);
+      } else if (e.key === "Escape") {
+        this.isCreatingFile = false;
+        this.render();
+      }
+    });
   }
 };
 if (!customElements.get("advanced-test-editor")) {
@@ -4247,6 +4676,7 @@ function renderRecorderWidget(rec, paused, t) {
 // src/components/lib-e2e-recorder/lib-e2e-recorder.ts
 var LibE2eRecorderElement = class extends HTMLElement {
   shadow;
+  _isDisabled = false;
   keydownHandler;
   recordingUnsub;
   commandsUnsub;
@@ -4260,6 +4690,7 @@ var LibE2eRecorderElement = class extends HTMLElement {
   recording;
   persistence;
   translation;
+  isVisible = false;
   isRecording = false;
   isPaused = false;
   cypressCommands = [];
@@ -4274,6 +4705,10 @@ var LibE2eRecorderElement = class extends HTMLElement {
     this.shadow = this.attachShadow({ mode: "open" });
   }
   connectedCallback() {
+    if ("Cypress" in window) {
+      this._isDisabled = true;
+      return;
+    }
     if (!this.getAttribute("data-cy")) {
       this.setAttribute("data-cy", "lib-e2e-cypress-for-dummys");
     }
@@ -4290,10 +4725,12 @@ var LibE2eRecorderElement = class extends HTMLElement {
     this.initSelectorStrategy();
     this.initSubscriptions();
     this.render();
+    this.initVisibility();
     this.keydownHandler = (e) => this.handleKeyboardEvent(e);
     window.addEventListener("keydown", this.keydownHandler);
   }
   disconnectedCallback() {
+    if (this._isDisabled) return;
     window.removeEventListener("keydown", this.keydownHandler);
     this.recordingUnsub?.();
     this.commandsUnsub?.();
@@ -4354,6 +4791,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"];
@@ -4373,6 +4820,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();
@@ -4390,6 +4843,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;
@@ -4625,13 +5082,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 ?? "");
             import_sweetalert2.default.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 ?? "");
             import_sweetalert2.default.close();
           });
         },
@@ -4662,6 +5119,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;
@@ -4674,7 +5135,7 @@ cypress/         <span style="color:#484f58">${this.translation.translate("RECOR
     this.toggleModal("isAdvancedEditorDialogOpen", () => {
       import_sweetalert2.default.fire({
         title: this.translation.translate("MAIN_FRAME.SHOW_ADVANCED_EDITOR"),
-        html: '<div id="advanced-editor-modal-content" style="min-height:300px;padding:0"></div>',
+        html: '<div id="advanced-editor-modal-content" style="flex:1;min-height:0;display:flex;flex-direction:column;padding:0"></div>',
         showCloseButton: true,
         showConfirmButton: false,
         allowOutsideClick: false,
@@ -4683,6 +5144,20 @@ cypress/         <span style="color:#484f58">${this.translation.translate("RECOR
         didOpen: () => {
           makeSwalDraggable();
           setSwal2DataCyAttribute();
+          const popup = import_sweetalert2.default.getPopup();
+          if (popup) {
+            popup.style.height = "600px";
+            const htmlContainer = popup.querySelector(".swal2-html-container");
+            if (htmlContainer) {
+              htmlContainer.style.flex = "1";
+              htmlContainer.style.minHeight = "0";
+              htmlContainer.style.overflow = "hidden";
+              htmlContainer.style.padding = "0";
+              htmlContainer.style.margin = "0";
+              htmlContainer.style.display = "flex";
+              htmlContainer.style.flexDirection = "column";
+            }
+          }
           const container = document.getElementById("advanced-editor-modal-content");
           if (!container) return;
           const child = document.createElement("advanced-test-editor");
@@ -4710,7 +5185,10 @@ cypress/         <span style="color:#484f58">${this.translation.translate("RECOR
           this.isAdvancedEditorDialogOpen = false;
         }
       });
-      this.resizePopup();
+      setTimeout(() => {
+        const popup = import_sweetalert2.default.getPopup();
+        if (popup) makeModalResizable(popup, { minWidth: 400, minHeight: 0 });
+      }, 0);
     });
   }
   showFileEditorDialog(handle, content, fileName, testId, itBlock = "", interceptorsBlock = "") {
@@ -4756,18 +5234,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 = [];
@@ -4794,6 +5272,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());