@rogatio/cli 6.17.0 → 6.18.0

package/README.md

@@ -109,7 +109,7 @@ rogatio ai delete
 
 Configuration is stored at `~/.config/rogatio/provider.json` (Linux), `~/Library/Application Support/rogatio/provider.json` (macOS), or `%LOCALAPPDATA%\rogatio\provider.json` (Windows) with `600` permissions.
 
-When AI is configured, `rogatio edit` shows an **AI Assist** button in the command bar. Click it to:
+When AI is configured, `rogatio edit` shows an **AI Assist** button on the project title row. Click it to:
 - Generate rules from natural language
 - Fix validation errors by repairing the offending rules in place (keeping their rule ids; max 3 auto-fix iterations)
 

package/dist/editor/index.css

@@ -213,8 +213,8 @@
   font-weight: 600;
 }
 .rogatio-editor [data-search-wrap] {
-  margin-left: auto;
-  flex: 0 0 auto;
+  position: relative;
+  flex: 0 1 18rem;
   width: min(18rem, 100%);
   min-width: 0;
 }
@@ -223,11 +223,20 @@
   padding: 1rem clamp(1rem, 3vw, 3rem) 3rem;
 }
 .rogatio-editor [data-editor-header] {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  gap: 1rem;
-  align-items: end;
-  margin-bottom: 1rem;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem 1.5rem;
+  margin-bottom: 1.25rem;
+}
+.rogatio-editor [data-editor-header-actions] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.5rem 0.65rem;
+  margin-left: auto;
 }
 .rogatio-editor [data-editor-header] h1,
 .rogatio-editor [data-editor-form] h2,
@@ -302,29 +311,12 @@
   text-align: left;
   text-decoration: underline;
 }
-.rogatio-editor [data-editor-command-bar] button[aria-current=page] {
-  border-color: rgba(59, 158, 255, 0.45);
-  background: var(--rogatio-primary-bg);
-  font-weight: 700;
-}
 .rogatio-editor [data-project-actions] {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
   margin-top: 0.75rem;
 }
-.rogatio-editor [data-editor-command-bar] {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.75rem 1rem;
-  margin-block: 1rem;
-  padding: 0.65rem 0.75rem;
-  border: 1px solid var(--rogatio-border);
-  border-radius: var(--rogatio-radius);
-  background: var(--rogatio-surface-raised);
-}
 .rogatio-editor [data-action-cluster] {
   display: flex;
   flex-wrap: wrap;
@@ -708,6 +700,25 @@
 .rogatio-editor [data-search-wrap] {
   position: relative;
 }
+.rogatio-editor [data-rail-tools] {
+  display: flex;
+  flex: 0 1 auto;
+  align-items: flex-end;
+  justify-content: flex-end;
+  gap: 0.65rem;
+  margin-left: auto;
+  min-width: 0;
+  max-width: 100%;
+}
+.rogatio-editor [data-rail-tools] [data-route=test] {
+  flex: none;
+  margin-bottom: 0.05rem;
+}
+.rogatio-editor [data-rail-tools] [data-route=test][aria-expanded=true] {
+  border-color: rgba(46, 196, 182, 0.55);
+  background: rgba(46, 196, 182, 0.14);
+  color: var(--rogatio-text);
+}
 .rogatio-editor [data-search-label] {
   display: flex;
   flex-direction: column;
@@ -755,7 +766,10 @@
     display: block;
   }
   .rogatio-editor [data-editor-header] {
-    grid-template-columns: 1fr;
+    align-items: flex-start;
+  }
+  .rogatio-editor [data-editor-header-actions] {
+    width: 100%;
   }
   .rogatio-editor [data-rule-heading],
   .rogatio-editor [data-group-heading],
@@ -805,7 +819,8 @@
   .rogatio-editor [data-group-row],
   .rogatio-editor [data-editor-check-group],
   .rogatio-editor [data-action-dock],
-  .rogatio-editor [data-action-cluster=danger] {
+  .rogatio-editor [data-action-cluster=danger],
+  .rogatio-editor [data-test-dialog] {
     border-color: ButtonText;
     background: Canvas;
   }
@@ -828,7 +843,85 @@
     transition: none;
   }
 }
-.rogatio-editor [data-test-description],
+.rogatio-editor [data-editor-confirmation] {
+  z-index: 4;
+}
+.rogatio-editor [data-test-console] {
+  position: fixed;
+  inset: 0;
+  z-index: 3;
+  display: grid;
+  place-items: center;
+  padding: clamp(0.75rem, 3vw, 2rem);
+  background: rgb(6 8 12 / 72%);
+  backdrop-filter: blur(8px);
+}
+.rogatio-editor [data-test-dialog] {
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  width: min(68rem, 100%);
+  max-height: min(86vh, 52rem);
+  overflow: hidden;
+  border: 1px solid var(--rogatio-border);
+  border-top: 3px solid var(--rogatio-card-rule-edge);
+  border-radius: var(--rogatio-radius);
+  background:
+    linear-gradient(
+      180deg,
+      rgba(46, 196, 182, 0.08) 0%,
+      transparent 4.5rem),
+    var(--rogatio-surface-raised);
+  box-shadow: 0 28px 80px rgb(0 0 0 / 55%);
+}
+.rogatio-editor [data-test-dialog-head] {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 1.1rem 1.25rem 0.9rem;
+  border-bottom: 1px solid var(--rogatio-border);
+}
+.rogatio-editor [data-test-dialog-head] h2 {
+  margin: 0;
+  font-size: 1.65rem;
+  letter-spacing: -0.03em;
+}
+.rogatio-editor [data-test-kicker] {
+  margin: 0 0 0.2rem;
+  color: var(--rogatio-card-rule-edge);
+  font-family: var(--rogatio-font-mono);
+  font-size: 0.6875rem;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+.rogatio-editor [data-test-dialog] [data-test-description] {
+  margin: 0.35rem 0 0;
+  max-width: 40rem;
+  color: var(--rogatio-muted);
+}
+.rogatio-editor [data-test-dialog-body] {
+  overflow: auto;
+  padding: 1.1rem 1.25rem 1.35rem;
+}
+.rogatio-editor [data-test-status] {
+  margin: 0;
+  color: var(--rogatio-muted);
+}
+@media (min-width: 52rem) {
+  .rogatio-editor [data-test-dialog] [data-test-panel] {
+    grid-template-columns: minmax(0, 1.45fr) minmax(16rem, 0.7fr);
+    align-items: start;
+  }
+  .rogatio-editor [data-test-dialog] [data-test-panel] > fieldset {
+    grid-row: 1 / span 3;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .rogatio-editor [data-test-console] {
+    backdrop-filter: none;
+  }
+}
 .rogatio-editor [data-test-checking] {
   color: var(--rogatio-muted);
   margin-block: 0 1rem;

package/dist/editor/index.js

@@ -2517,12 +2517,12 @@ var EditorControllerImpl = class {
   extensions;
   instanceId;
   host;
+  layout;
   rail;
   main;
   header;
   status;
   summary;
-  commandBar;
   form;
   searchResults;
   draft;
@@ -2540,6 +2540,7 @@ var EditorControllerImpl = class {
   extensionCleanups = [];
   confirmation;
   groupPickerOpen = false;
+  testConsoleOpen = false;
   projectActions;
   focusRequest;
   saving = false;
@@ -2553,6 +2554,7 @@ var EditorControllerImpl = class {
   testResourceType = "main_frame";
   testResult = void 0;
   testRunning = false;
+  testNotice = "";
   testRequestId = 0;
   aiAssistPanel = null;
   aiAssistInFlight = false;
@@ -2597,8 +2599,8 @@ var EditorControllerImpl = class {
     this.host = this.document.createElement("div");
     this.host.className = "rogatio-editor";
     this.host.dataset.rogatioEditor = "true";
-    const layout = this.document.createElement("div");
-    layout.dataset.editorLayout = "true";
+    this.layout = this.document.createElement("div");
+    this.layout.dataset.editorLayout = "true";
     this.rail = this.document.createElement("nav");
     this.rail.dataset.desktopRouteRail = "true";
     this.rail.setAttribute("aria-label", "Project sections");
@@ -2613,10 +2615,6 @@ var EditorControllerImpl = class {
     this.summary = this.document.createElement("section");
     this.summary.dataset.editorSummary = "true";
     this.summary.setAttribute("role", "alert");
-    this.commandBar = this.document.createElement("div");
-    this.commandBar.dataset.editorCommandBar = "true";
-    this.commandBar.setAttribute("role", "toolbar");
-    this.commandBar.setAttribute("aria-label", "Project actions");
     this.form = this.document.createElement("form");
     this.form.dataset.editorForm = "true";
     this.form.noValidate = true;
@@ -2631,15 +2629,9 @@ var EditorControllerImpl = class {
       this.searchQuery = "";
       this.render();
     });
-    this.main.append(
-      this.header,
-      this.status,
-      this.summary,
-      this.commandBar,
-      this.form
-    );
-    layout.append(this.rail, this.main);
-    this.host.append(layout);
+    this.main.append(this.header, this.status, this.summary, this.form);
+    this.layout.append(this.rail, this.main);
+    this.host.append(this.layout);
     this.root.append(this.host);
     this.host.addEventListener("click", this.handleClick);
     this.host.addEventListener("input", this.handleInput);
@@ -2688,6 +2680,10 @@ var EditorControllerImpl = class {
     if (this.destroyed) return;
     const target = event.target;
     if (!(target instanceof Element)) return;
+    if (this.testConsoleOpen && target instanceof HTMLElement && target.dataset.testConsole !== void 0 && event.target === target) {
+      this.closeTestConsole();
+      return;
+    }
     if (this.groupPickerOpen && target instanceof HTMLElement && target.dataset.groupPicker !== void 0 && event.target === target) {
       this.closeGroupPicker();
       return;
@@ -2804,6 +2800,14 @@ var EditorControllerImpl = class {
       this.closeGroupPicker();
       return;
     }
+    if (event.key === "Escape" && this.testConsoleOpen) {
+      event.preventDefault();
+      this.closeTestConsole();
+      return;
+    }
+    if (event.key === "Tab" && this.testConsoleOpen && !this.confirmation) {
+      this.trapTestConsoleFocus(event);
+    }
     const target = event.target;
     const inRenameInput = target instanceof HTMLElement && target.dataset.renameInput !== void 0;
     if (!inRenameInput) return;
@@ -2951,6 +2955,7 @@ var EditorControllerImpl = class {
       return;
     }
     if (command === "test:open-rule") {
+      this.testConsoleOpen = false;
       this.navigateToRule(element.dataset.groupId, element.dataset.ruleId);
       return;
     }
@@ -2968,6 +2973,10 @@ var EditorControllerImpl = class {
     }
     if (command === "close-group-picker") {
       this.closeGroupPicker();
+      return;
+    }
+    if (command === "close-test-console") {
+      this.closeTestConsole();
     }
   }
   collectDiagnostics(value) {
@@ -3697,11 +3706,13 @@ var EditorControllerImpl = class {
   showDryRunDiagnostics(diagnostics) {
     this.testResult = void 0;
     this.testRunning = false;
+    this.testNotice = "";
     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.testConsoleOpen = false;
       this.navigateToPath(first.path);
       return;
     }
@@ -3709,27 +3720,27 @@ var EditorControllerImpl = class {
   }
   async runTest() {
     if (!this.options.dryRun) {
-      this.statusMessage = "Dry-run is not configured for this editor instance.";
+      this.testNotice = "Dry-run is not configured for this editor instance.";
       this.render();
       return;
     }
     if (this.ruleCount() === 0) {
       this.testResult = void 0;
       this.testRunning = false;
-      this.statusMessage = "This project has no rules to test.";
+      this.testNotice = "";
       this.render();
       return;
     }
     const lines = this.testLines();
     if (lines.length === 0) {
-      this.statusMessage = "Please enter at least one URL to test.";
+      this.testNotice = "Please enter at least one URL to test.";
       this.render();
       return;
     }
     if (lines.length > TEST_CASE_LIMIT) {
       this.testResult = void 0;
       this.testRunning = false;
-      this.statusMessage = "Only 256 URLs can be checked at once.";
+      this.testNotice = "Only 256 URLs can be checked at once.";
       this.render();
       return;
     }
@@ -3743,7 +3754,7 @@ var EditorControllerImpl = class {
     });
     const requestId = ++this.testRequestId;
     this.testRunning = true;
-    this.statusMessage = "Checking URLs...";
+    this.testNotice = "";
     this.render();
     try {
       const outcome = await this.options.dryRun(this.getDraft(), cases);
@@ -3752,7 +3763,7 @@ var EditorControllerImpl = class {
       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.testNotice = 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;
       }
@@ -3765,12 +3776,12 @@ var EditorControllerImpl = class {
       this.testResult = void 0;
       this.testRunning = false;
       const message = e instanceof Error ? e.message : "Test failed";
-      this.statusMessage = `Test error: ${message}`;
+      this.testNotice = `Test error: ${message}`;
       this.render();
     }
   }
-  renderTestResults(result) {
-    const resultsSection = this.host.querySelector(
+  renderTestResults(result, scope = this.host) {
+    const resultsSection = scope.querySelector(
       "[data-test-results]"
     );
     if (!resultsSection || !isDryRunResult(result)) return;
@@ -3946,16 +3957,19 @@ var EditorControllerImpl = class {
     return enablement.isEnabled(id) !== true;
   }
   navigate(route, groupId) {
+    if (route === "test") {
+      this.openTestConsole();
+      return;
+    }
     const returnFocusToGroups = this.groupPickerOpen;
     if (route === "project") {
       this.route = { kind: "project" };
-    } else if (route === "test") {
-      this.route = { kind: "test" };
     } else if (route === "group" && groupId && this.groupById(groupId)) {
       this.route = { kind: "group", groupId };
     } else {
       return;
     }
+    this.testConsoleOpen = false;
     this.groupPickerOpen = false;
     if (returnFocusToGroups) this.focusRequest = "route:groups";
     this.closeRenameOnLeave();
@@ -3984,6 +3998,7 @@ var EditorControllerImpl = class {
   }
   navigateToGroup(groupId) {
     this.groupPickerOpen = false;
+    this.testConsoleOpen = false;
     const groupIds = new Set(
       this.draft.groups.map((group) => typeof group.id === "string" ? group.id : "").filter((id) => id.length > 0)
     );
@@ -4057,6 +4072,7 @@ var EditorControllerImpl = class {
   }
   navigateToSearchResult(path) {
     this.groupPickerOpen = false;
+    this.testConsoleOpen = false;
     const segments = decodePointer(path);
     if (segments?.[0] !== "groups") {
       this.route = { kind: "project" };
@@ -4081,6 +4097,7 @@ var EditorControllerImpl = class {
     const segments = decodePointer(path);
     if (segments?.[0] !== "groups") {
       this.route = { kind: "project" };
+      this.testConsoleOpen = false;
       this.focusRequest = path;
       this.render();
       return;
@@ -4090,6 +4107,7 @@ var EditorControllerImpl = class {
     const group = this.draft.groups[groupIndex];
     if (!group || typeof group.id !== "string") return;
     this.route = { kind: "group", groupId: group.id };
+    this.testConsoleOpen = false;
     const last = segments[segments.length - 1];
     const ruleIndex = arrayIndex(segments[3] ?? "");
     const entityPath = last === "name" ? path : segments.length === 2 ? pointer("groups", groupIndex, "name") : segments.length === 4 && ruleIndex !== void 0 ? pointer("groups", groupIndex, "rules", ruleIndex, "name") : path;
@@ -4134,12 +4152,9 @@ var EditorControllerImpl = class {
     }
     this.renderHeader();
     this.renderRail();
-    this.renderCommandBar();
     this.form.replaceChildren();
     if (this.route.kind === "project") {
       this.renderProject();
-    } else if (this.route.kind === "test") {
-      this.renderTest();
     } else {
       this.renderGroup(this.route.groupId);
     }
@@ -4151,6 +4166,7 @@ var EditorControllerImpl = class {
     if (this.confirmation) this.groupPickerOpen = false;
     this.renderConfirmation();
     this.renderGroupPicker();
+    this.renderTestConsole();
     this.restoreFocus();
     this.focusRequest = void 0;
   }
@@ -4163,7 +4179,13 @@ var EditorControllerImpl = class {
     dirty.dataset.dirtyState = "true";
     dirty.textContent = this.isDirty() ? "Unsaved changes" : "All changes saved";
     titleBlock.append(title, dirty);
-    this.header.append(titleBlock);
+    const actions = this.document.createElement("div");
+    actions.dataset.editorHeaderActions = "true";
+    actions.setAttribute("role", "toolbar");
+    actions.setAttribute("aria-label", "Project actions");
+    actions.setAttribute("aria-busy", this.saving ? "true" : "false");
+    this.appendProjectActions(actions);
+    this.header.append(titleBlock, actions);
     this.status.textContent = this.statusMessage;
     this.status.setAttribute("aria-busy", this.saving ? "true" : "false");
   }
@@ -4219,12 +4241,24 @@ var EditorControllerImpl = class {
     search.setAttribute("aria-controls", "rogatio-search-results");
     searchLabel.append(search);
     searchWrap.append(searchLabel, this.searchResults);
-    this.rail.append(searchWrap);
+    const railTools = this.document.createElement("div");
+    railTools.dataset.railTools = "true";
+    const testBtn = this.createButton("Console", "route:test");
+    testBtn.dataset.route = "test";
+    testBtn.dataset.editorKey = "route:test";
+    testBtn.dataset.btn = "secondary";
+    testBtn.disabled = this.saving;
+    testBtn.setAttribute("aria-label", "Test console");
+    testBtn.setAttribute("aria-haspopup", "dialog");
+    testBtn.setAttribute(
+      "aria-expanded",
+      this.testConsoleOpen ? "true" : "false"
+    );
+    testBtn.setAttribute("aria-controls", `${this.instanceId}-test-console`);
+    railTools.append(testBtn, searchWrap);
+    this.rail.append(railTools);
   }
-  renderCommandBar() {
-    this.commandBar.replaceChildren();
-    this.commandBar.setAttribute("aria-busy", this.saving ? "true" : "false");
-    this.commandBar.setAttribute("aria-label", "Project actions");
+  appendProjectActions(actions) {
     const tools = this.document.createElement("div");
     tools.dataset.actionCluster = "tools";
     if (this.aiAssistPanel) {
@@ -4232,18 +4266,7 @@ var EditorControllerImpl = class {
         this.createCommandButton("AI Assist", "ai-assist", 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") {
-      testBtn.setAttribute("aria-current", "page");
-    }
-    tools.append(
-      testBtn,
-      this.createCommandButton("Validate", "validate", this.saving)
-    );
+    tools.append(this.createCommandButton("Validate", "validate", this.saving));
     const commit = this.document.createElement("div");
     commit.dataset.actionCluster = "commit";
     commit.append(
@@ -4256,7 +4279,7 @@ var EditorControllerImpl = class {
         "primary"
       )
     );
-    this.commandBar.append(tools, commit);
+    actions.append(tools, commit);
   }
   createGroupEnableButton(savedGroupId, groupName) {
     const enablement = this.options.groupEnablement;
@@ -4325,27 +4348,7 @@ var EditorControllerImpl = class {
   }
   createProjectActionRow() {
     const actions = this.document.createElement("div");
-    const tools = this.document.createElement("div");
-    tools.dataset.actionCluster = "tools";
-    if (this.aiAssistPanel) {
-      tools.append(
-        this.createCommandButton("AI Assist", "ai-assist", this.saving)
-      );
-    }
-    tools.append(this.createCommandButton("Validate", "validate", this.saving));
-    const commit = this.document.createElement("div");
-    commit.dataset.actionCluster = "commit";
-    commit.append(
-      this.createCommandButton("Cancel", "cancel", this.saving),
-      this.createCommandButton(
-        "Save",
-        "save",
-        this.saving || !this.isDirty(),
-        {},
-        "primary"
-      )
-    );
-    actions.append(tools, commit);
+    this.appendProjectActions(actions);
     return actions;
   }
   appendDockRow(dock, label, actions) {
@@ -4359,9 +4362,9 @@ var EditorControllerImpl = class {
     dock.append(row);
   }
   /**
-   * Repeats the actions a long page would otherwise hide: under the last rule
-   * on a group page, or under the test results. The project page stays short,
-   * so Add group lives on the Groups heading and that route has no ledger.
+   * Repeats the actions a long group page would otherwise hide, under the last
+   * rule. The project page stays short, so Add group lives on the Groups
+   * heading and that route has no ledger.
    */
   renderActionDock() {
     if (this.route.kind === "project") return;
@@ -4539,14 +4542,7 @@ var EditorControllerImpl = class {
     rulesSection.append(list);
     this.form.append(rulesSection);
   }
-  renderTest() {
-    const heading = this.document.createElement("h2");
-    heading.textContent = "Test console";
-    this.form.append(heading);
-    const description = this.document.createElement("p");
-    description.dataset.testDescription = "true";
-    description.textContent = "Check whether these URLs match your rules. Nothing is contacted, and nothing is saved.";
-    this.form.append(description);
+  renderTestBody(parent) {
     const panel = this.document.createElement("div");
     panel.dataset.testPanel = "true";
     const urlsFieldset = this.document.createElement("fieldset");
@@ -4626,26 +4622,33 @@ var EditorControllerImpl = class {
     );
     runBtn.dataset.testRun = "true";
     panel.append(runBtn);
-    this.form.append(panel);
+    parent.append(panel);
+    if (this.testNotice.length > 0 && !this.testRunning && this.testNotice !== "Only 256 URLs can be checked at once.") {
+      const note = this.document.createElement("p");
+      note.dataset.testStatus = "true";
+      note.setAttribute("role", "status");
+      note.textContent = this.testNotice;
+      parent.append(note);
+    }
     const resultsSection = this.document.createElement("section");
     resultsSection.dataset.testResults = "true";
-    this.form.append(resultsSection);
+    parent.append(resultsSection);
     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);
+      this.renderTestResults(this.testResult, parent);
     } else if (this.testRunning) {
       const pending = this.document.createElement("p");
       pending.dataset.testPending = "true";
       pending.textContent = "Checking URLs...";
       resultsSection.append(pending);
-    } else if (this.statusMessage === "Only 256 URLs can be checked at once.") {
+    } else if (this.testNotice === "Only 256 URLs can be checked at once.") {
       const limit = this.document.createElement("p");
       limit.dataset.testLimit = "true";
-      limit.textContent = this.statusMessage;
+      limit.textContent = this.testNotice;
       resultsSection.append(limit);
     }
   }
@@ -5602,7 +5605,100 @@ var EditorControllerImpl = class {
     }
     fields.append(group);
   }
+  openTestConsole() {
+    this.groupPickerOpen = false;
+    this.testConsoleOpen = true;
+    this.focusRequest = "test-urls";
+    this.render();
+  }
+  closeTestConsole() {
+    if (this.testRunning) {
+      this.testRequestId += 1;
+      this.testRunning = false;
+      this.testNotice = "";
+    }
+    this.testConsoleOpen = false;
+    this.focusRequest = "route:test";
+    this.render();
+  }
+  trapTestConsoleFocus(event) {
+    const dialog = this.host.querySelector("[data-test-dialog]");
+    if (!(dialog instanceof HTMLElement)) return;
+    const focusable = Array.from(
+      dialog.querySelectorAll(
+        "button, input, select, textarea, summary, a[href]"
+      )
+    ).filter((element) => {
+      if (element.hidden) return false;
+      const closedDetails = element.closest("details:not([open])");
+      if (closedDetails && element !== closedDetails.querySelector("summary")) {
+        return false;
+      }
+      if (element instanceof HTMLButtonElement || element instanceof HTMLInputElement || element instanceof HTMLSelectElement || element instanceof HTMLTextAreaElement) {
+        return !element.disabled;
+      }
+      return true;
+    });
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    if (!first || !last) return;
+    const active = this.document.activeElement;
+    const inside = active instanceof Node && dialog.contains(active);
+    if (!inside) {
+      event.preventDefault();
+      (event.shiftKey ? last : first).focus();
+      return;
+    }
+    if (event.shiftKey && active === first) {
+      event.preventDefault();
+      last.focus();
+      return;
+    }
+    if (!event.shiftKey && active === last) {
+      event.preventDefault();
+      first.focus();
+    }
+  }
+  renderTestConsole() {
+    this.host.querySelector("[data-test-console]")?.remove();
+    if ("inert" in this.layout) this.layout.inert = this.testConsoleOpen;
+    if (!this.testConsoleOpen) return;
+    const overlay = this.document.createElement("div");
+    overlay.dataset.testConsole = "true";
+    overlay.setAttribute("role", "presentation");
+    const dialog = this.document.createElement("section");
+    dialog.dataset.testDialog = "true";
+    dialog.id = `${this.instanceId}-test-console`;
+    dialog.setAttribute("role", "dialog");
+    dialog.setAttribute("aria-modal", "true");
+    const head = this.document.createElement("div");
+    head.dataset.testDialogHead = "true";
+    const titles = this.document.createElement("div");
+    const kicker = this.document.createElement("p");
+    kicker.dataset.testKicker = "true";
+    kicker.textContent = "Offline match";
+    const heading = this.document.createElement("h2");
+    heading.id = `${this.instanceId}-test-console-title`;
+    heading.textContent = "Test console";
+    dialog.setAttribute("aria-labelledby", heading.id);
+    const description = this.document.createElement("p");
+    description.dataset.testDescription = "true";
+    description.textContent = "Check whether these URLs match your rules. Nothing is contacted, and nothing is saved.";
+    titles.append(kicker, heading, description);
+    const close = this.createButton("Close", "test-console-close");
+    close.dataset.command = "close-test-console";
+    close.dataset.editorKey = "test-console-close";
+    close.dataset.btn = "secondary";
+    head.append(titles, close);
+    const body = this.document.createElement("div");
+    body.dataset.testDialogBody = "true";
+    this.renderTestBody(body);
+    dialog.append(head, body);
+    overlay.append(dialog);
+    this.host.append(overlay);
+  }
   openGroupPicker() {
+    this.testConsoleOpen = false;
     this.groupPickerOpen = true;
     this.focusRequest = this.draft.groups.length > 0 ? "group-picker-first" : "group-picker-close";
     this.render();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rogatio/cli",
-  "version": "6.17.0",
+  "version": "6.18.0",
   "private": false,
   "type": "module",
   "description": "Local-first browser request and response rules — editor host, file verification, test runner, and runtime dispatch.",