@rogatio/cli 6.9.0 → 6.10.0

package/dist/editor/index.js

@@ -1742,6 +1742,31 @@ var HTTP_METHODS2 = [
   "CONNECT",
   "TRACE"
 ];
+var RESOURCE_TYPE_LABELS = {
+  main_frame: "Page",
+  sub_frame: "Frame",
+  stylesheet: "Stylesheet",
+  script: "Script",
+  image: "Image",
+  font: "Font",
+  object: "Plugin",
+  media: "Media",
+  xmlhttprequest: "Fetch",
+  ping: "Ping",
+  csp_report: "CSP report",
+  websocket: "WebSocket",
+  webtransport: "WebTransport",
+  webbundle: "Web Bundle",
+  other: "Other"
+};
+var TEST_CASE_LIMIT = 256;
+var RULE_TYPE_LABELS = {
+  redirect: "Redirect",
+  query: "Query parameters",
+  header: "Header",
+  "response-body": "Response body",
+  "request-body": "Request body"
+};
 var COMMON_RULE_FIELDS = /* @__PURE__ */ new Set([
   "id",
   "name",
@@ -1759,6 +1784,30 @@ var FORBIDDEN_EXTENSION_FIELDS = /* @__PURE__ */ new Set([
 var MAX_SNAPSHOT_ARRAY_LENGTH = 4096;
 var F2_MAX_URL_REGEX_LENGTH2 = 2048;
 var editorInstanceCount = 0;
+function normalizeProjectActions(value) {
+  if (!Array.isArray(value)) return [];
+  const actions = [];
+  for (let index = 0; index < value.length; index += 1) {
+    if (!Object.hasOwn(value, index)) continue;
+    const item = value[index];
+    if (!isRecord4(item)) continue;
+    const command = item.command;
+    const label = item.label;
+    if (typeof command !== "string" || command.length === 0) continue;
+    if (typeof label !== "string" || label.length === 0) continue;
+    if (item.tone === "danger") {
+      actions.push({ command, label, tone: "danger" });
+    } else {
+      actions.push({ command, label });
+    }
+  }
+  return actions;
+}
+function ruleCountLabel(count) {
+  if (count === 0) return "No rules";
+  if (count === 1) return "1 rule";
+  return `${count} rules`;
+}
 function isRecord4(value) {
   return value !== null && typeof value === "object" && !Array.isArray(value);
 }
@@ -2033,6 +2082,80 @@ function displayName(value, fallback) {
   const text = safeText(value, fallback);
   return text.length > 0 ? text : fallback;
 }
+function checkingCopy(method, resourceType) {
+  if (method === "GET" && resourceType === "main_frame") {
+    return "Checking these as page loads (GET).";
+  }
+  if (method === "" && resourceType === "") {
+    return "The method and the resource type are not tested.";
+  }
+  const resourceLabel = resourceType === "" ? "" : RESOURCE_TYPE_LABELS[resourceType];
+  if (method === "") {
+    const subject = resourceType === "main_frame" ? "page loads" : `${resourceLabel} requests`;
+    return `Checking these as ${subject}. The method is not tested.`;
+  }
+  if (resourceType === "") {
+    return `Checking these as ${method} requests. The resource type is not tested.`;
+  }
+  if (resourceType === "main_frame") {
+    return `Checking these as page loads (${method}).`;
+  }
+  return `Checking these as ${resourceLabel} requests (${method}).`;
+}
+function exactUrlFromSource(source) {
+  if (source?.key !== "url" || source.operator !== "regex") {
+    return null;
+  }
+  if (typeof source.value !== "string") return null;
+  const value = source.value;
+  if (!value.startsWith("^") || !value.endsWith("$") || value.length < 2) {
+    return null;
+  }
+  let decoded = "";
+  for (let index = 1; index < value.length - 1; index += 1) {
+    const char = value[index];
+    if (char === "\\") {
+      index += 1;
+      const escaped = value[index];
+      if (escaped === void 0 || index >= value.length - 1) return null;
+      decoded += escaped;
+      continue;
+    }
+    if ("^$\\.*+?()[]{}|".includes(char)) return null;
+    decoded += char;
+  }
+  const converted = urlToExactRegex(decoded);
+  if (!converted.ok || converted.source !== value) return null;
+  return decoded;
+}
+function isDryRunResult(value) {
+  if (!isRecord4(value)) return false;
+  const summary = value.summary;
+  return Array.isArray(value.results) && Array.isArray(value.errors) && isRecord4(summary) && typeof summary.matchedUrlCount === "number" && typeof summary.urlCount === "number";
+}
+function previewSentence(preview) {
+  if (!preview || preview.summary.length === 0) return null;
+  switch (preview.kind) {
+    case "redirect":
+      return `The browser would go to ${preview.summary}.`;
+    case "query":
+      return `The query would be ${preview.summary}.`;
+    case "header":
+      return `The header would be ${preview.summary}.`;
+    case "request-body":
+      return `The request body would be ${preview.summary}.`;
+    case "response-body":
+      return `The response body would be ${preview.summary}.`;
+    default:
+      return null;
+  }
+}
+function missReason(rule) {
+  if (rule.source.state === "unmatched") return "URL pattern";
+  if (rule.method.state === "unmatched") return "method";
+  if (rule.resourceType.state === "unmatched") return "resource type";
+  return "URL pattern";
+}
 function isHTMLElement(value) {
   return value !== null && typeof value === "object" && value.nodeType === 1 && typeof value.appendChild === "function";
 }
@@ -2163,6 +2286,8 @@ var EditorControllerImpl = class {
   extensionControls = /* @__PURE__ */ new Map();
   extensionCleanups = [];
   confirmation;
+  groupPickerOpen = false;
+  projectActions;
   focusRequest;
   saving = false;
   destroyed = false;
@@ -2171,9 +2296,8 @@ var EditorControllerImpl = class {
   controlNumber = 0;
   previousFocus;
   testUrls = "";
-  testMethod = "";
-  testResourceType = "";
-  testMaxCases = "256";
+  testMethod = "GET";
+  testResourceType = "main_frame";
   testResult = void 0;
   testRunning = false;
   testRequestId = 0;
@@ -2193,6 +2317,7 @@ var EditorControllerImpl = class {
     this.root = options.root;
     this.document = options.root.ownerDocument;
     this.options = options;
+    this.projectActions = normalizeProjectActions(options.projectActions);
     this.extensions = extensions;
     this.instanceId = `rogatio-editor-${++editorInstanceCount}`;
     this.draft = initial;
@@ -2310,6 +2435,10 @@ var EditorControllerImpl = class {
     if (this.destroyed) return;
     const target = event.target;
     if (!(target instanceof Element)) return;
+    if (this.groupPickerOpen && target instanceof HTMLElement && target.dataset.groupPicker !== void 0 && event.target === target) {
+      this.closeGroupPicker();
+      return;
+    }
     const element = target.closest(
       "[data-command], [data-route], [data-search-result], [data-error-path]"
     );
@@ -2349,10 +2478,6 @@ var EditorControllerImpl = class {
       this.testUrls = target.value;
       return;
     }
-    if (target.dataset.testMaxCases !== void 0) {
-      this.testMaxCases = target.value;
-      return;
-    }
     const path = target.dataset.path;
     if (!path || target.type === "checkbox" || this.extensionControls.has(path))
       return;
@@ -2366,12 +2491,6 @@ var EditorControllerImpl = class {
     if (!(target instanceof HTMLInputElement || target instanceof HTMLSelectElement)) {
       return;
     }
-    if (target.dataset.mobileRoute !== void 0 && target instanceof HTMLSelectElement) {
-      const selectedOption = target.options[target.selectedIndex];
-      const groupId = selectedOption?.dataset.groupId;
-      this.navigate(target.value, groupId);
-      return;
-    }
     if (target instanceof HTMLInputElement && target.dataset.resourcePath !== void 0) {
       this.updateResourceTypes(
         target.dataset.resourcePath,
@@ -2387,10 +2506,12 @@ var EditorControllerImpl = class {
     }
     if (target instanceof HTMLSelectElement && target.dataset.testMethod !== void 0) {
       this.testMethod = target.value || "";
+      this.render();
       return;
     }
     if (target instanceof HTMLSelectElement && target.dataset.testResourceType !== void 0) {
       this.testResourceType = target.value || "";
+      this.render();
       return;
     }
     const path = target.dataset.path;
@@ -2425,6 +2546,11 @@ var EditorControllerImpl = class {
       this.render();
       return;
     }
+    if (event.key === "Escape" && this.groupPickerOpen) {
+      event.preventDefault();
+      this.closeGroupPicker();
+      return;
+    }
     const target = event.target;
     const inRenameInput = target instanceof HTMLElement && target.dataset.renameInput !== void 0;
     if (!inRenameInput) return;
@@ -2571,6 +2697,25 @@ var EditorControllerImpl = class {
       void this.runTest();
       return;
     }
+    if (command === "test:open-rule") {
+      this.navigateToRule(element.dataset.groupId, element.dataset.ruleId);
+      return;
+    }
+    if (command === "test:try-url") {
+      const url = element.dataset.url;
+      if (!url) return;
+      this.testUrls = url;
+      this.statusMessage = "";
+      this.render();
+      return;
+    }
+    if (command === "open-group-picker") {
+      this.openGroupPicker();
+      return;
+    }
+    if (command === "close-group-picker") {
+      this.closeGroupPicker();
+    }
   }
   collectDiagnostics(value) {
     let hostDiagnostics;
@@ -3282,65 +3427,111 @@ var EditorControllerImpl = class {
     this.focusRequest = path;
     this.render();
   }
+  ruleCount() {
+    let count = 0;
+    for (const group of this.draft.groups) count += group.rules.length;
+    return count;
+  }
+  testLines() {
+    const entries = [];
+    const rawLines = this.testUrls.split(/\r?\n/);
+    for (let index = 0; index < rawLines.length; index += 1) {
+      const url = rawLines[index]?.trim() ?? "";
+      if (url.length > 0) entries.push({ url, line: index + 1 });
+    }
+    return entries;
+  }
+  showDryRunDiagnostics(diagnostics) {
+    this.testResult = void 0;
+    this.testRunning = false;
+    this.errors = [...diagnostics];
+    const count = diagnostics.length;
+    this.statusMessage = count === 0 ? "The project could not be tested." : `${count} validation error${count === 1 ? "" : "s"} found.`;
+    const first = diagnostics[0];
+    if (first) {
+      this.navigateToPath(first.path);
+      return;
+    }
+    this.render();
+  }
   async runTest() {
     if (!this.options.dryRun) {
       this.statusMessage = "Dry-run is not configured for this editor instance.";
       this.render();
       return;
     }
-    const urlsText = this.testUrls.trim();
-    if (!urlsText) {
+    if (this.ruleCount() === 0) {
+      this.testResult = void 0;
+      this.testRunning = false;
+      this.statusMessage = "This project has no rules to test.";
+      this.render();
+      return;
+    }
+    const lines = this.testLines();
+    if (lines.length === 0) {
       this.statusMessage = "Please enter at least one URL to test.";
       this.render();
       return;
     }
-    const lines = urlsText.split(/\r?\n/).map((line) => line.trim()).filter((line) => line.length > 0);
-    const cases = lines.map((url) => ({
-      url,
-      method: this.testMethod === "" ? void 0 : this.testMethod,
-      resourceType: this.testResourceType === "" ? void 0 : this.testResourceType
-    }));
-    const maxCasesRaw = Number.parseInt(this.testMaxCases, 10);
-    const maxCases = Number.isSafeInteger(maxCasesRaw) && maxCasesRaw > 0 ? maxCasesRaw : void 0;
+    if (lines.length > TEST_CASE_LIMIT) {
+      this.testResult = void 0;
+      this.testRunning = false;
+      this.statusMessage = "Only 256 URLs can be checked at once.";
+      this.render();
+      return;
+    }
+    const cases = lines.map((entry) => {
+      const testCase = { url: entry.url };
+      if (this.testMethod !== "") testCase.method = this.testMethod;
+      if (this.testResourceType !== "") {
+        testCase.resourceType = this.testResourceType;
+      }
+      return testCase;
+    });
     const requestId = ++this.testRequestId;
     this.testRunning = true;
-    this.statusMessage = "Running dry-run...";
+    this.statusMessage = "Checking URLs...";
     this.render();
     try {
-      const result = await this.options.dryRun(
-        this.getDraft(),
-        cases,
-        maxCases === void 0 ? void 0 : { maxCases }
-      );
+      const outcome = await this.options.dryRun(this.getDraft(), cases);
       if (requestId !== this.testRequestId) return;
-      this.testResult = result;
       this.testRunning = false;
-      const matched = result.summary.matchedUrlCount;
-      const total = result.summary.urlCount;
-      this.statusMessage = `Test complete: ${matched}/${total} URLs matched at least one rule.`;
+      if (isDryRunResult(outcome)) {
+        this.testResult = outcome;
+        const checked = outcome.summary.urlCount;
+        this.statusMessage = outcome.errors.length > 0 ? `Checked ${checked} URL${checked === 1 ? "" : "s"}. Some lines are not http(s) URLs.` : `Checked ${checked} URL${checked === 1 ? "" : "s"}.`;
+        this.render();
+        return;
+      }
+      const diagnostics = normalizeDiagnostics(
+        isRecord4(outcome) ? outcome.diagnostics : void 0
+      );
+      this.showDryRunDiagnostics(diagnostics);
     } catch (e) {
       if (requestId !== this.testRequestId) return;
+      this.testResult = void 0;
       this.testRunning = false;
       const message = e instanceof Error ? e.message : "Test failed";
       this.statusMessage = `Test error: ${message}`;
+      this.render();
     }
-    this.render();
   }
   renderTestResults(result) {
     const resultsSection = this.host.querySelector(
       "[data-test-results]"
     );
-    if (!resultsSection) return;
+    if (!resultsSection || !isDryRunResult(result)) return;
     resultsSection.replaceChildren();
     const heading = this.document.createElement("h3");
     heading.textContent = "Results";
     resultsSection.append(heading);
+    const lines = this.testLines();
     if (result.errors.length > 0) {
       const errorsList = this.document.createElement("ul");
       errorsList.dataset.testErrors = "true";
       for (const err of result.errors) {
         const item = this.document.createElement("li");
-        item.textContent = `${err.code}: ${err.message}${err.index !== void 0 ? ` (case ${err.index})` : ""}`;
+        item.textContent = this.testErrorText(err, lines);
         errorsList.append(item);
       }
       resultsSection.append(errorsList);
@@ -3355,75 +3546,138 @@ var EditorControllerImpl = class {
     for (const urlResult of result.results) {
       const card = this.document.createElement("article");
       card.dataset.testResultCard = "true";
-      const matched = urlResult.matchedRuleCount > 0;
-      card.dataset.matched = matched ? "true" : "false";
-      const urlHeader = this.document.createElement("div");
-      urlHeader.dataset.testResultHeader = "true";
-      const urlText = this.document.createElement("strong");
-      urlText.textContent = urlResult.url;
-      const urlBadge = this.document.createElement("span");
-      urlBadge.dataset.testBadge = "true";
-      urlBadge.dataset.variant = matched ? "matched" : "unmatched";
-      urlBadge.textContent = matched ? "MATCHED" : "NO MATCH";
-      urlHeader.append(urlText, urlBadge);
-      card.append(urlHeader);
-      for (const rule of urlResult.rules) {
-        const ruleDiv = this.document.createElement("div");
-        ruleDiv.dataset.testRule = "true";
-        const ruleHeader = this.document.createElement("div");
-        ruleHeader.dataset.testRuleHeader = "true";
-        const ruleName = this.document.createElement("strong");
-        ruleName.textContent = this.testRuleLabel(rule.groupId, rule.ruleId);
-        const ruleBadge = this.document.createElement("span");
-        ruleBadge.dataset.testBadge = "true";
-        ruleBadge.dataset.variant = rule.matched ? "matched" : "unmatched";
-        ruleBadge.textContent = rule.matched ? "\u2713 MATCHED" : "\u2717 NOT MATCHED";
-        ruleHeader.append(ruleName, ruleBadge);
-        ruleDiv.append(ruleHeader);
-        const dims = [
-          { label: "source", dim: rule.source },
-          { label: "method", dim: rule.method },
-          { label: "resourceType", dim: rule.resourceType }
-        ];
-        for (const { label, dim } of dims) {
-          const dimDiv = this.document.createElement("div");
-          dimDiv.dataset.testDimension = "true";
-          const badge = this.document.createElement("span");
-          badge.dataset.testBadge = "true";
-          badge.dataset.variant = dim.state === "matched" ? "matched" : dim.state === "unmatched" ? "unmatched" : "na";
-          badge.textContent = dim.state.toUpperCase();
-          dimDiv.append(
-            badge,
-            this.document.createTextNode(`${label}: ${dim.detail}`)
-          );
-          ruleDiv.append(dimDiv);
-        }
-        if (rule.actionPreview) {
-          const apDiv = this.document.createElement("div");
-          apDiv.dataset.testActionPreview = "true";
-          apDiv.textContent = `Action preview: ${rule.actionPreview.kind} - ${rule.actionPreview.summary}`;
-          ruleDiv.append(apDiv);
-        }
-        card.append(ruleDiv);
+      const matches = urlResult.rules.filter((rule) => rule.matched);
+      const misses = urlResult.rules.filter((rule) => !rule.matched);
+      card.dataset.matched = matches.length > 0 ? "true" : "false";
+      for (const rule of matches) {
+        card.append(this.renderTestOutcome(urlResult.url, rule));
+      }
+      if (misses.length > 0) {
+        card.append(this.renderTestMisses(misses));
       }
       resultsSection.append(card);
     }
   }
+  testErrorText(err, lines) {
+    if (err.code === "dryrun.batch-limit") {
+      return "Only 256 URLs can be checked at once.";
+    }
+    const entry = err.index === void 0 ? void 0 : lines[err.index];
+    if (err.code === "dryrun.invalid-url" && entry) {
+      return `Line ${entry.line} is not an http(s) URL: ${entry.url}`;
+    }
+    if (entry) {
+      return `Line ${entry.line} could not be checked: ${entry.url}`;
+    }
+    return err.message;
+  }
+  renderTestOutcome(url, rule) {
+    const names = this.testRuleNames(rule.groupId, rule.ruleId);
+    const typeLabel = this.testRuleTypeLabel(rule.groupId, rule.ruleId);
+    const outcome = this.document.createElement("p");
+    outcome.dataset.testOutcome = "true";
+    const lead = this.document.createElement("span");
+    lead.textContent = names.groupKnown ? `${url} matches ${typeLabel} in ${names.groupName} / ` : `${url} matches ${typeLabel} in `;
+    const ruleButton = this.createCommandButton(
+      names.ruleLabel,
+      "test:open-rule",
+      false,
+      { groupId: rule.groupId, ruleId: rule.ruleId }
+    );
+    ruleButton.dataset.testRuleLink = "true";
+    ruleButton.removeAttribute("data-btn");
+    const tailParts = ["."];
+    const preview = previewSentence(rule.actionPreview);
+    if (preview) tailParts.push(` ${preview}`);
+    if (rule.method.state === "not-applicable") {
+      tailParts.push(" The method was not tested.");
+    }
+    if (rule.resourceType.state === "not-applicable") {
+      tailParts.push(" The resource type was not tested.");
+    }
+    if (this.groupIsOffInBrowser(rule.groupId)) {
+      tailParts.push(
+        " This group is off in Chrome, so the browser will not apply this rule."
+      );
+    }
+    const tail = this.document.createElement("span");
+    tail.textContent = tailParts.join("");
+    outcome.append(lead, ruleButton, tail);
+    return outcome;
+  }
+  renderTestMisses(misses) {
+    const details = this.document.createElement("details");
+    details.dataset.testMisses = "true";
+    const summary = this.document.createElement("summary");
+    summary.textContent = misses.length === 1 ? "1 rule did not match" : `${misses.length} rules did not match`;
+    const list = this.document.createElement("ul");
+    for (const rule of misses) {
+      const names = this.testRuleNames(rule.groupId, rule.ruleId);
+      const item = this.document.createElement("li");
+      const ruleButton = this.createCommandButton(
+        names.ruleLabel,
+        "test:open-rule",
+        false,
+        { groupId: rule.groupId, ruleId: rule.ruleId }
+      );
+      ruleButton.dataset.testRuleLink = "true";
+      ruleButton.removeAttribute("data-btn");
+      const reason = this.document.createElement("span");
+      reason.dataset.testMissReason = "true";
+      reason.textContent = missReason(rule);
+      item.append(ruleButton, this.document.createTextNode(" \u2014 "), reason);
+      list.append(item);
+    }
+    details.append(summary, list);
+    return details;
+  }
   /**
    * A test-result row is identified by the names the user actually sees. The dry
    * result carries ids only, and the draft the editor handed over is the source
-   * of truth for both, so no contract changes. A rule that is no longer in the
-   * draft falls back to its id rather than rendering a blank row.
+   * of truth for both. A rule that is no longer in the draft falls back to its id.
    */
-  testRuleLabel(groupId, ruleId) {
+  testRuleNames(groupId, ruleId) {
     const group = this.groupById(groupId);
-    if (!group) return `${groupId}/${ruleId}`;
+    if (!group) {
+      return {
+        groupKnown: false,
+        ruleKnown: false,
+        groupName: groupId,
+        ruleLabel: `${groupId}/${ruleId}`
+      };
+    }
     const groupName = displayName(group.name, "Unnamed group");
     const rule = this.ruleById(groupId, ruleId);
-    if (!rule) return `${groupName} / ${ruleId}`;
-    return `${groupName} / ${displayName(rule.name, "Unnamed rule")}`;
+    if (!rule) {
+      return {
+        groupKnown: true,
+        ruleKnown: false,
+        groupName,
+        ruleLabel: ruleId
+      };
+    }
+    return {
+      groupKnown: true,
+      ruleKnown: true,
+      groupName,
+      ruleLabel: displayName(rule.name, "Unnamed rule")
+    };
+  }
+  testRuleTypeLabel(groupId, ruleId) {
+    const rule = this.ruleById(groupId, ruleId);
+    const type = rule && typeof rule.type === "string" ? rule.type : "";
+    return RULE_TYPE_LABELS[type] ?? "the rule";
+  }
+  groupIsOffInBrowser(groupId) {
+    const enablement = this.options.groupEnablement;
+    if (!enablement) return false;
+    const group = this.groupById(groupId);
+    const saved = group ? this.savedGroupId(group) : void 0;
+    const id = saved && saved.length > 0 ? saved : groupId;
+    return enablement.isEnabled(id) !== true;
   }
   navigate(route, groupId) {
+    const returnFocusToGroups = this.groupPickerOpen;
     if (route === "project") {
       this.route = { kind: "project" };
     } else if (route === "test") {
@@ -3433,6 +3687,8 @@ var EditorControllerImpl = class {
     } else {
       return;
     }
+    this.groupPickerOpen = false;
+    if (returnFocusToGroups) this.focusRequest = "route:groups";
     this.closeRenameOnLeave();
     this.testRequestId += 1;
     this.statusMessage = "";
@@ -3458,6 +3714,7 @@ var EditorControllerImpl = class {
     }
   }
   navigateToGroup(groupId) {
+    this.groupPickerOpen = false;
     const groupIds = new Set(
       this.draft.groups.map((group) => typeof group.id === "string" ? group.id : "").filter((id) => id.length > 0)
     );
@@ -3530,6 +3787,7 @@ var EditorControllerImpl = class {
     this.revealRuleCard(resolvedGroup, resolvedRule);
   }
   navigateToSearchResult(path) {
+    this.groupPickerOpen = false;
     const segments = decodePointer(path);
     if (segments?.[0] !== "groups") {
       this.route = { kind: "project" };
@@ -3621,7 +3879,9 @@ var EditorControllerImpl = class {
     this.renderSummary();
     this.renderMigrationNotices();
     this.renderSearchResults();
+    if (this.confirmation) this.groupPickerOpen = false;
     this.renderConfirmation();
+    this.renderGroupPicker();
     this.restoreFocus();
     this.focusRequest = void 0;
   }
@@ -3634,39 +3894,7 @@ var EditorControllerImpl = class {
     dirty.dataset.dirtyState = "true";
     dirty.textContent = this.isDirty() ? "Unsaved changes" : "All changes saved";
     titleBlock.append(title, dirty);
-    const mobileNav = this.document.createElement("label");
-    mobileNav.dataset.mobileRouteNav = "true";
-    mobileNav.textContent = "Project section";
-    const select = this.document.createElement("select");
-    select.dataset.mobileRoute = "true";
-    select.dataset.editorKey = "mobile-route";
-    const projectOption = this.document.createElement("option");
-    projectOption.value = "project";
-    projectOption.textContent = "Project";
-    select.append(projectOption);
-    for (const group of this.draft.groups) {
-      const option = this.document.createElement("option");
-      option.value = "group";
-      option.dataset.groupId = safeText(group.id);
-      option.textContent = displayName(group.name, "Unnamed group");
-      select.append(option);
-    }
-    const testOption = this.document.createElement("option");
-    testOption.value = "test";
-    testOption.textContent = "Test console";
-    select.append(testOption);
-    if (this.route.kind === "project") {
-      select.value = "project";
-    } else if (this.route.kind === "test") {
-      select.value = "test";
-    } else {
-      const groupId = this.route.groupId;
-      const options = Array.from(select.options);
-      const option = options.find((value) => value.dataset.groupId === groupId);
-      if (option) select.value = "group";
-    }
-    mobileNav.append(select);
-    this.header.append(titleBlock, mobileNav);
+    this.header.append(titleBlock);
     this.status.textContent = this.statusMessage;
     this.status.setAttribute("aria-busy", this.saving ? "true" : "false");
   }
@@ -3676,30 +3904,34 @@ var EditorControllerImpl = class {
     heading.dataset.editorVisuallyHidden = "true";
     heading.textContent = "Project sections";
     this.rail.append(heading);
-    const project = this.createButton("Project", "route:project");
+    const list = this.document.createElement("ol");
+    list.dataset.routeBreadcrumb = "true";
+    const projectItem = this.document.createElement("li");
+    const project = this.createButton(
+      displayName(this.draft.name, "Project"),
+      "route:project"
+    );
     project.dataset.route = "project";
     project.dataset.editorKey = "route:project";
-    if (this.route.kind === "project")
+    if (this.route.kind === "project") {
       project.setAttribute("aria-current", "page");
-    this.rail.append(project);
-    for (const group of this.draft.groups) {
-      const groupId = safeText(group.id);
-      const name = displayName(group.name, "Unnamed group");
-      const button = this.createButton(name, `route:group:${groupId}`);
-      button.dataset.route = "group";
-      button.dataset.groupId = groupId;
-      button.dataset.editorKey = `route:group:${groupId}`;
-      if (this.route.kind === "group" && this.route.groupId === groupId) {
-        button.setAttribute("aria-current", "page");
-      }
-      this.rail.append(button);
     }
-    const testBtn = this.createButton("Test console", "route:test");
-    testBtn.dataset.route = "test";
-    testBtn.dataset.editorKey = "route:test";
-    if (this.route.kind === "test")
-      testBtn.setAttribute("aria-current", "page");
-    this.rail.append(testBtn);
+    projectItem.append(project);
+    const groupItem = this.document.createElement("li");
+    const openGroup = this.route.kind === "group" ? this.groupById(this.route.groupId) : void 0;
+    const groups = this.createButton(
+      openGroup ? displayName(openGroup.name, "Unnamed group") : "Groups",
+      "route:groups"
+    );
+    groups.dataset.command = "open-group-picker";
+    groups.dataset.editorKey = "route:groups";
+    if (openGroup) {
+      groups.dataset.groupId = safeText(openGroup.id);
+      groups.setAttribute("aria-current", "page");
+    }
+    groupItem.append(groups);
+    list.append(projectItem, groupItem);
+    this.rail.append(list);
     const searchWrap = this.document.createElement("div");
     searchWrap.dataset.searchWrap = "true";
     const searchLabel = this.document.createElement("label");
@@ -3731,18 +3963,18 @@ var EditorControllerImpl = class {
         this.createCommandButton("AI Assist", "ai-assist", this.saving)
       );
     }
-    tools.append(this.createCommandButton("Validate", "validate", this.saving));
+    const testBtn = this.createButton("Test console", "route:test");
+    testBtn.dataset.route = "test";
+    testBtn.dataset.editorKey = "route:test";
+    testBtn.dataset.btn = "secondary";
+    testBtn.disabled = this.saving;
     if (this.route.kind === "test") {
-      tools.append(
-        this.createCommandButton(
-          "Run test",
-          "test:run",
-          this.saving || this.testRunning,
-          {},
-          "primary"
-        )
-      );
+      testBtn.setAttribute("aria-current", "page");
     }
+    tools.append(
+      testBtn,
+      this.createCommandButton("Validate", "validate", this.saving)
+    );
     const commit = this.document.createElement("div");
     commit.dataset.actionCluster = "commit";
     commit.append(
@@ -3890,19 +4122,6 @@ var EditorControllerImpl = class {
           this.createGroupActionClusters(groupId, groupName)
         );
       }
-    } else {
-      const run = this.document.createElement("div");
-      run.dataset.actionCluster = "safe";
-      run.append(
-        this.createCommandButton(
-          "Run test",
-          "test:run",
-          this.saving || this.testRunning,
-          {},
-          "primary"
-        )
-      );
-      this.appendDockRow(dock, "Test", run);
     }
     this.appendDockRow(dock, "Project", this.createProjectActionRow());
     this.form.append(dock);
@@ -3932,6 +4151,7 @@ var EditorControllerImpl = class {
       description
     );
     fields.append(fieldGrid);
+    this.renderProjectActions(fields);
     this.form.append(fields);
     const groups = this.document.createElement("section");
     groups.dataset.groupListSection = "true";
@@ -4055,7 +4275,7 @@ var EditorControllerImpl = class {
     this.form.append(heading);
     const description = this.document.createElement("p");
     description.dataset.testDescription = "true";
-    description.textContent = "Run offline dry-run tests against the current project. Enter test cases (one URL per line) and optional method/resource type defaults. No network requests are made.";
+    description.textContent = "Check whether these URLs match your rules. Nothing is contacted, and nothing is saved.";
     this.form.append(description);
     const panel = this.document.createElement("div");
     panel.dataset.testPanel = "true";
@@ -4072,91 +4292,128 @@ var EditorControllerImpl = class {
     urlsTextarea.placeholder = "https://example.com/page\nhttps://example.com/script.js\nhttps://other.com/";
     urlsTextarea.value = this.testUrls;
     urlsTextarea.dataset.testUrls = "true";
+    urlsTextarea.dataset.editorKey = "test-urls";
     urlsLabel.append(urlsTextarea);
     urlsField.append(urlsLabel);
     urlsFieldset.append(urlsField);
+    const samples = this.renderSampleUrlButtons();
+    if (samples) urlsFieldset.append(samples);
     panel.append(urlsFieldset);
-    const defaultsFieldset = this.document.createElement("fieldset");
-    const defaultsLegend = this.document.createElement("legend");
-    defaultsLegend.textContent = "Defaults (applied to all URLs without explicit values)";
-    defaultsFieldset.append(defaultsLegend);
+    const checking = this.document.createElement("p");
+    checking.dataset.testChecking = "true";
+    checking.textContent = checkingCopy(this.testMethod, this.testResourceType);
+    panel.append(checking);
     const defaultsGrid = this.document.createElement("div");
     defaultsGrid.dataset.testDefaults = "true";
     const methodField = this.document.createElement("div");
     methodField.dataset.editorField = "true";
     const methodLabel = this.document.createElement("label");
-    methodLabel.textContent = "Default HTTP method";
+    methodLabel.textContent = "Method";
     const methodSelect = this.document.createElement("select");
     methodSelect.dataset.testMethod = "true";
+    methodSelect.dataset.editorKey = "test-method";
+    for (const method of HTTP_METHODS2) {
+      const option = this.document.createElement("option");
+      option.value = method;
+      option.textContent = method;
+      methodSelect.append(option);
+    }
+    const methodAny = this.document.createElement("option");
+    methodAny.value = "";
+    methodAny.textContent = "Any method";
+    methodSelect.append(methodAny);
     methodSelect.value = this.testMethod;
-    const methodEmpty = this.document.createElement("option");
-    methodEmpty.value = "";
-    methodEmpty.textContent = "(none \u2014 not-applicable)";
-    methodSelect.append(methodEmpty);
-    for (const m of HTTP_METHODS2) {
-      const opt = this.document.createElement("option");
-      opt.value = m;
-      opt.textContent = m;
-      methodSelect.append(opt);
-    }
     methodLabel.append(methodSelect);
     methodField.append(methodLabel);
     const rtField = this.document.createElement("div");
     rtField.dataset.editorField = "true";
     const rtLabel = this.document.createElement("label");
-    rtLabel.textContent = "Default resource type";
+    rtLabel.textContent = "Resource type";
     const rtSelect = this.document.createElement("select");
     rtSelect.dataset.testResourceType = "true";
+    rtSelect.dataset.editorKey = "test-resource-type";
+    for (const resourceType of RESOURCE_TYPES2) {
+      const option = this.document.createElement("option");
+      option.value = resourceType;
+      option.textContent = RESOURCE_TYPE_LABELS[resourceType];
+      rtSelect.append(option);
+    }
+    const rtAny = this.document.createElement("option");
+    rtAny.value = "";
+    rtAny.textContent = "Any resource type";
+    rtSelect.append(rtAny);
     rtSelect.value = this.testResourceType;
-    const rtEmpty = this.document.createElement("option");
-    rtEmpty.value = "";
-    rtEmpty.textContent = "(none \u2014 not-applicable)";
-    rtSelect.append(rtEmpty);
-    for (const rt of RESOURCE_TYPES2) {
-      const opt = this.document.createElement("option");
-      opt.value = rt;
-      opt.textContent = rt;
-      rtSelect.append(opt);
-    }
     rtLabel.append(rtSelect);
     rtField.append(rtLabel);
     defaultsGrid.append(methodField, rtField);
-    defaultsFieldset.append(defaultsGrid);
-    panel.append(defaultsFieldset);
-    const maxCasesField = this.document.createElement("div");
-    maxCasesField.dataset.editorField = "true";
-    const maxCasesLabel = this.document.createElement("label");
-    maxCasesLabel.textContent = "Max test cases";
-    const maxCasesInput = this.document.createElement("input");
-    maxCasesInput.type = "number";
-    maxCasesInput.min = "1";
-    maxCasesInput.max = "10000";
-    maxCasesInput.value = this.testMaxCases;
-    maxCasesInput.style.width = "8rem";
-    maxCasesInput.dataset.testMaxCases = "true";
-    maxCasesLabel.append(maxCasesInput);
-    maxCasesField.append(maxCasesLabel);
-    panel.append(maxCasesField);
-    const runBtn = this.createButton("Run test", "test:run");
-    runBtn.type = "button";
+    panel.append(defaultsGrid);
+    const runBtn = this.createCommandButton(
+      "Run test",
+      "test:run",
+      this.saving || this.testRunning,
+      {},
+      "primary"
+    );
     runBtn.dataset.testRun = "true";
-    runBtn.dataset.command = "test:run";
-    runBtn.dataset.btn = "primary";
-    runBtn.disabled = this.saving || this.testRunning;
     panel.append(runBtn);
     this.form.append(panel);
     const resultsSection = this.document.createElement("section");
     resultsSection.dataset.testResults = "true";
     this.form.append(resultsSection);
-    if (this.testResult) {
+    if (this.ruleCount() === 0) {
+      const empty = this.document.createElement("p");
+      empty.dataset.testEmpty = "true";
+      empty.textContent = "This project has no rules to test.";
+      resultsSection.append(empty);
+    } else if (this.testResult) {
       this.renderTestResults(this.testResult);
     } else if (this.testRunning) {
       const pending = this.document.createElement("p");
       pending.dataset.testPending = "true";
-      pending.textContent = "Running dry-run...";
+      pending.textContent = "Checking URLs...";
       resultsSection.append(pending);
+    } else if (this.statusMessage === "Only 256 URLs can be checked at once.") {
+      const limit = this.document.createElement("p");
+      limit.dataset.testLimit = "true";
+      limit.textContent = this.statusMessage;
+      resultsSection.append(limit);
     }
   }
+  renderSampleUrlButtons() {
+    const samples = [];
+    for (const group of this.draft.groups) {
+      const groupId = safeText(group.id);
+      for (const rule of group.rules) {
+        const url = exactUrlFromSource(rule.source);
+        if (!url) continue;
+        samples.push({
+          groupId,
+          ruleId: safeText(rule.id),
+          url,
+          name: displayName(rule.name, "Unnamed rule")
+        });
+      }
+    }
+    if (samples.length === 0) return void 0;
+    const row = this.document.createElement("div");
+    row.dataset.testSamples = "true";
+    for (const sample of samples) {
+      const button = this.createCommandButton(
+        "Try a URL from this rule",
+        "test:try-url",
+        false,
+        { groupId: sample.groupId, ruleId: sample.ruleId, url: sample.url }
+      );
+      if (samples.length > 1) {
+        button.setAttribute(
+          "aria-label",
+          `Try a URL from this rule, ${sample.name}`
+        );
+      }
+      row.append(button);
+    }
+    return row;
+  }
   renderRule(group, rule, groupIndex, ruleIndex) {
     const groupId = safeText(group.id);
     const ruleId = safeText(rule.id);
@@ -5056,6 +5313,103 @@ var EditorControllerImpl = class {
     }
     return results;
   }
+  renderProjectActions(fields) {
+    if (this.projectActions.length === 0) return;
+    const group = this.document.createElement("div");
+    group.dataset.projectActions = "true";
+    group.setAttribute("role", "group");
+    group.setAttribute("aria-label", "Project settings");
+    for (const action of this.projectActions) {
+      group.append(
+        this.createCommandButton(
+          action.label,
+          action.command,
+          false,
+          {},
+          action.tone === "danger" ? "danger" : "secondary"
+        )
+      );
+    }
+    fields.append(group);
+  }
+  openGroupPicker() {
+    this.groupPickerOpen = true;
+    this.focusRequest = this.draft.groups.length > 0 ? "group-picker-first" : "group-picker-close";
+    this.render();
+  }
+  closeGroupPicker() {
+    this.groupPickerOpen = false;
+    this.focusRequest = "route:groups";
+    this.render();
+  }
+  renderGroupPicker() {
+    const existing = this.host.querySelector("[data-group-picker]");
+    existing?.remove();
+    if (!this.groupPickerOpen) return;
+    const overlay = this.document.createElement("div");
+    overlay.dataset.groupPicker = "true";
+    overlay.setAttribute("role", "presentation");
+    const dialog = this.document.createElement("section");
+    dialog.dataset.editorDialog = "true";
+    dialog.setAttribute("role", "dialog");
+    dialog.setAttribute("aria-modal", "true");
+    const title = this.document.createElement("h2");
+    title.id = `${this.instanceId}-group-picker-title`;
+    title.textContent = "Groups";
+    dialog.setAttribute("aria-labelledby", title.id);
+    dialog.append(title);
+    if (this.draft.groups.length === 0) {
+      const empty = this.document.createElement("p");
+      empty.textContent = "No groups yet.";
+      dialog.append(empty);
+    } else {
+      const list = this.document.createElement("ul");
+      list.dataset.groupPickerList = "true";
+      for (let index = 0; index < this.draft.groups.length; index += 1) {
+        const group = this.draft.groups[index];
+        if (!group) continue;
+        const groupId = safeText(group.id);
+        const name = displayName(group.name, "Unnamed group");
+        const item = this.document.createElement("li");
+        const button = this.document.createElement("button");
+        button.type = "button";
+        button.dataset.route = "group";
+        button.dataset.groupId = groupId;
+        button.dataset.btn = "secondary";
+        button.dataset.editorKey = index === 0 ? "group-picker-first" : `group-picker:${groupId}`;
+        if (this.route.kind === "group" && this.route.groupId === groupId) {
+          button.setAttribute("aria-current", "true");
+        }
+        const nameEl = this.document.createElement("span");
+        nameEl.dataset.groupPickerName = "true";
+        nameEl.textContent = name;
+        const rulesEl = this.document.createElement("span");
+        rulesEl.dataset.groupPickerRules = "true";
+        rulesEl.textContent = ruleCountLabel(group.rules.length);
+        button.append(nameEl, rulesEl);
+        const savedId = this.savedGroupId(group);
+        if (this.options.groupEnablement && savedId) {
+          const stateEl = this.document.createElement("span");
+          stateEl.dataset.groupPickerState = "true";
+          stateEl.textContent = this.options.groupEnablement.isEnabled(savedId) ? "Enabled" : "Disabled";
+          button.append(stateEl);
+        }
+        item.append(button);
+        list.append(item);
+      }
+      dialog.append(list);
+    }
+    const actions = this.document.createElement("div");
+    actions.dataset.editorDialogActions = "true";
+    const close = this.createButton("Close", "group-picker-close");
+    close.dataset.command = "close-group-picker";
+    close.dataset.editorKey = "group-picker-close";
+    close.dataset.btn = "secondary";
+    actions.append(close);
+    dialog.append(actions);
+    overlay.append(dialog);
+    this.host.append(overlay);
+  }
   renderConfirmation() {
     const existing = this.host.querySelector("[data-editor-confirmation]");
     existing?.remove();