@rogatio/cli 5.0.0 → 5.1.1

package/dist/editor/index.js

@@ -214,6 +214,353 @@ var HTTP_METHODS = Object.freeze([
   "TRACE"
 ]);
 
+// packages/editor/src/ai-assist-panel.ts
+function createAIAssistPanel(_container, _editor, onApply, onClose) {
+  let visible = false;
+  let streamingContent = "";
+  let streamingMessageIndex = -1;
+  const messages = [];
+  const panel = document.createElement("div");
+  panel.className = "ai-assist-panel";
+  panel.style.cssText = `
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 400px;
+    max-width: 100vw;
+    background: #1e1e24;
+    border-left: 1px solid #333;
+    display: flex;
+    flex-direction: column;
+    z-index: 1000;
+    transform: translateX(100%);
+    transition: transform 0.2s ease;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    font-size: 13px;
+    color: #e0e0e0;
+  `;
+  const header = document.createElement("div");
+  header.style.cssText = `
+    padding: 12px 16px;
+    border-bottom: 1px solid #333;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: #15151a;
+  `;
+  header.innerHTML = `
+    <div style="display: flex; align-items: center; gap: 8px;">
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8z"/>
+        <path d="M12 6v6l4 2"/>
+      </svg>
+      <span style="font-weight: 600;">AI Assist</span>
+    </div>
+    <button class="ai-close-btn" style="
+      background: none;
+      border: none;
+      color: #888;
+      cursor: pointer;
+      padding: 4px;
+      border-radius: 4px;
+    ">
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <line x1="18" y1="6" x2="6" y2="18"/>
+        <line x1="6" y1="6" x2="18" y2="18"/>
+      </svg>
+    </button>
+  `;
+  const messagesContainer = document.createElement("div");
+  messagesContainer.style.cssText = `
+    flex: 1;
+    overflow-y: auto;
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  `;
+  const inputContainer = document.createElement("div");
+  inputContainer.style.cssText = `
+    padding: 12px 16px;
+    border-top: 1px solid #333;
+    background: #15151a;
+  `;
+  const inputWrapper = document.createElement("div");
+  inputWrapper.style.cssText = `
+    display: flex;
+    gap: 8px;
+    margin-bottom: 8px;
+  `;
+  const textarea = document.createElement("textarea");
+  textarea.placeholder = "Ask AI to generate rules, fix issues, or explain...";
+  textarea.style.cssText = `
+    flex: 1;
+    background: #2a2a34;
+    border: 1px solid #3a3a48;
+    border-radius: 8px;
+    padding: 10px 12px;
+    color: #e0e0e0;
+    font-family: inherit;
+    font-size: 13px;
+    resize: none;
+    min-height: 60px;
+    max-height: 150px;
+    outline: none;
+  `;
+  const sendButton = document.createElement("button");
+  sendButton.textContent = "Send";
+  sendButton.style.cssText = `
+    background: #3b82f6;
+    color: white;
+    border: none;
+    border-radius: 8px;
+    padding: 10px 20px;
+    font-weight: 600;
+    cursor: pointer;
+    align-self: flex-end;
+    transition: background 0.2s;
+  `;
+  const statusText = document.createElement("div");
+  statusText.style.cssText = `
+    font-size: 11px;
+    color: #666;
+    text-align: center;
+  `;
+  inputWrapper.appendChild(textarea);
+  inputWrapper.appendChild(sendButton);
+  inputContainer.appendChild(inputWrapper);
+  inputContainer.appendChild(statusText);
+  panel.appendChild(header);
+  panel.appendChild(messagesContainer);
+  panel.appendChild(inputContainer);
+  const closeBtn = header.querySelector(".ai-close-btn");
+  function show() {
+    if (!visible) {
+      visible = true;
+      document.body.appendChild(panel);
+      requestAnimationFrame(() => {
+        panel.style.transform = "translateX(0)";
+      });
+      textarea.focus();
+    }
+  }
+  function hide() {
+    if (visible) {
+      visible = false;
+      panel.style.transform = "translateX(100%)";
+      setTimeout(() => {
+        if (!visible && panel.parentNode) {
+          panel.parentNode.removeChild(panel);
+        }
+      }, 200);
+      onClose();
+    }
+  }
+  function isVisible() {
+    return visible;
+  }
+  function addMessage(message) {
+    const messageEl = document.createElement("div");
+    messageEl.style.cssText = `
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      max-width: 85%;
+      ${message.role === "user" ? "align-self: flex-end;" : "align-self: flex-start;"}
+    `;
+    const bubble = document.createElement("div");
+    bubble.style.cssText = `
+      padding: 10px 14px;
+      border-radius: 16px;
+      ${message.role === "user" ? "background: #3b82f6; color: white; border-bottom-right-radius: 4px;" : "background: #2a2a34; color: #e0e0e0; border-bottom-left-radius: 4px;"}
+      white-space: pre-wrap;
+      word-wrap: break-word;
+    `;
+    bubble.textContent = message.content;
+    messageEl.appendChild(bubble);
+    if (message.proposal) {
+      const proposalEl = createProposalElement(message.proposal);
+      messageEl.appendChild(proposalEl);
+    }
+    messagesContainer.appendChild(messageEl);
+    messagesContainer.scrollTop = messagesContainer.scrollHeight;
+  }
+  function createProposalElement(proposal) {
+    const container = document.createElement("div");
+    container.style.cssText = `
+      margin-top: 8px;
+      padding: 12px;
+      background: #1a1a24;
+      border: 1px solid #333;
+      border-radius: 8px;
+    `;
+    const explanation = document.createElement("div");
+    explanation.style.cssText = `
+      font-size: 12px;
+      color: #aaa;
+      margin-bottom: 12px;
+      line-height: 1.5;
+    `;
+    explanation.textContent = proposal.explanation;
+    container.appendChild(explanation);
+    const rulesList = document.createElement("div");
+    rulesList.style.cssText = `
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    `;
+    for (const rule of proposal.rules) {
+      const ruleEl = document.createElement("div");
+      ruleEl.style.cssText = `
+        padding: 10px;
+        background: #2a2a34;
+        border-radius: 6px;
+        border: 1px solid #3a3a48;
+      `;
+      const ruleHeader = document.createElement("div");
+      ruleHeader.style.cssText = `
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        margin-bottom: 8px;
+      `;
+      const kindBadge = document.createElement("span");
+      kindBadge.textContent = rule.kind;
+      kindBadge.style.cssText = `
+        font-size: 10px;
+        font-weight: 600;
+        text-transform: uppercase;
+        padding: 2px 8px;
+        border-radius: 4px;
+        background: #3b82f6;
+        color: white;
+      `;
+      const ruleName = document.createElement("span");
+      ruleName.textContent = rule.name;
+      ruleName.style.cssText = `
+        font-weight: 500;
+        flex: 1;
+      `;
+      ruleHeader.appendChild(kindBadge);
+      ruleHeader.appendChild(ruleName);
+      const ruleDetails = document.createElement("div");
+      ruleDetails.style.cssText = `
+        font-size: 11px;
+        color: #888;
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+        gap: 4px 12px;
+      `;
+      const addDetail = (label, value) => {
+        const detail = document.createElement("div");
+        detail.innerHTML = `<span style="color:#666;">${label}:</span> ${value}`;
+        ruleDetails.appendChild(detail);
+      };
+      addDetail("Regex", rule.urlRegex);
+      if (rule.origins?.length) addDetail("Origins", rule.origins.join(", "));
+      if (rule.resourceTypes?.length)
+        addDetail("Types", rule.resourceTypes.join(", "));
+      if (rule.priority !== void 0)
+        addDetail("Priority", rule.priority.toString());
+      if (rule.method) addDetail("Method", rule.method);
+      const actionBtn = document.createElement("button");
+      actionBtn.textContent = "Apply Rule";
+      actionBtn.style.cssText = `
+        margin-top: 10px;
+        width: 100%;
+        background: #22c55e;
+        color: white;
+        border: none;
+        border-radius: 6px;
+        padding: 8px;
+        font-weight: 600;
+        cursor: pointer;
+        transition: background 0.2s;
+      `;
+      actionBtn.addEventListener("click", () => {
+        onApply(proposal);
+      });
+      ruleEl.appendChild(ruleHeader);
+      ruleEl.appendChild(ruleDetails);
+      ruleEl.appendChild(actionBtn);
+      rulesList.appendChild(ruleEl);
+    }
+    container.appendChild(rulesList);
+    return container;
+  }
+  function clearMessages() {
+    messages.length = 0;
+    streamingContent = "";
+    streamingMessageIndex = -1;
+    messagesContainer.innerHTML = "";
+  }
+  function updateStreamingContent(content) {
+    if (streamingMessageIndex >= 0 && streamingMessageIndex < messages.length) {
+      const message = messages[streamingMessageIndex];
+      message.content = streamingContent + content;
+      const bubbles = messagesContainer.querySelectorAll(
+        "div > div:first-child"
+      );
+      if (bubbles[streamingMessageIndex]) {
+        bubbles[streamingMessageIndex].textContent = message.content;
+      }
+    }
+  }
+  function startStreaming(role) {
+    streamingContent = "";
+    const message = { role, content: "", isStreaming: true };
+    messages.push(message);
+    streamingMessageIndex = messages.length - 1;
+    addMessage(message);
+  }
+  function finishStreaming(proposal) {
+    if (streamingMessageIndex >= 0 && streamingMessageIndex < messages.length) {
+      const message = messages[streamingMessageIndex];
+      message.isStreaming = false;
+      if (proposal) message.proposal = proposal;
+      const messageEls = messagesContainer.children;
+      if (messageEls[streamingMessageIndex]) {
+        const existingProposal = messageEls[streamingMessageIndex].querySelector("div > div:last-child");
+        if (proposal) {
+          if (existingProposal) existingProposal.remove();
+          const proposalEl = createProposalElement(proposal);
+          messageEls[streamingMessageIndex].appendChild(
+            proposalEl
+          );
+        }
+      }
+    }
+    streamingContent = "";
+    streamingMessageIndex = -1;
+  }
+  function handleSend() {
+    const prompt = textarea.value.trim();
+    if (!prompt) return;
+    textarea.value = "";
+    textarea.style.height = "auto";
+  }
+  closeBtn.addEventListener("click", hide);
+  sendButton.addEventListener("click", handleSend);
+  textarea.addEventListener("keydown", (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  });
+  return {
+    show,
+    hide,
+    isVisible,
+    addMessage,
+    clearMessages,
+    // Expose streaming methods for the aiAssist handler to use
+    startStreaming,
+    updateStreamingContent,
+    finishStreaming
+  };
+}
+
 // packages/editor/src/rule-types/mock.ts
 function isRecord(value) {
   return typeof value === "object" && value !== null && !Array.isArray(value);
@@ -340,7 +687,7 @@ function createMockRuleType() {
       return stable(diagnostics);
     },
     mount(context) {
-      const { document, container } = context;
+      const { document: document2, container } = context;
       const getCurrent = () => asMockAction(context.getField("mock"));
       const setAction = (next) => {
         context.setField("mock", next);
@@ -349,9 +696,9 @@ function createMockRuleType() {
         const current = getCurrent();
         container.replaceChildren();
         if (current === void 0) return;
-        const statusLabel = document.createElement("label");
+        const statusLabel = document2.createElement("label");
         statusLabel.textContent = "Status";
-        const statusInput = document.createElement("input");
+        const statusInput = document2.createElement("input");
         statusInput.type = "number";
         statusInput.min = String(LIMITS.minMockStatus);
         statusInput.max = String(LIMITS.maxMockStatus);
@@ -365,9 +712,9 @@ function createMockRuleType() {
         });
         context.registerControl("/mock/status", statusInput);
         statusLabel.append(statusInput);
-        const delayLabel = document.createElement("label");
+        const delayLabel = document2.createElement("label");
         delayLabel.textContent = "Delay (ms)";
-        const delayInput = document.createElement("input");
+        const delayInput = document2.createElement("input");
         delayInput.type = "number";
         delayInput.min = "0";
         delayInput.max = String(LIMITS.maxMockDelayMs);
@@ -383,20 +730,20 @@ function createMockRuleType() {
         });
         context.registerControl("/mock/delayMs", delayInput);
         delayLabel.append(delayInput);
-        const sourceLabel = document.createElement("label");
+        const sourceLabel = document2.createElement("label");
         sourceLabel.textContent = "Body source";
-        const sourceSelect = document.createElement("select");
+        const sourceSelect = document2.createElement("select");
         sourceSelect.dataset.editorField = "true";
-        const bodyOption = document.createElement("option");
+        const bodyOption = document2.createElement("option");
         bodyOption.value = "body";
         bodyOption.textContent = "Inline body";
-        const fileOption = document.createElement("option");
+        const fileOption = document2.createElement("option");
         fileOption.value = "file";
         fileOption.textContent = "File snapshot";
         sourceSelect.append(bodyOption, fileOption);
         sourceSelect.value = typeof current.file === "string" ? "file" : "body";
         context.registerControl("/mock/body-source", sourceSelect);
-        const bodyArea = document.createElement("textarea");
+        const bodyArea = document2.createElement("textarea");
         bodyArea.value = typeof current.body === "string" ? current.body : "";
         bodyArea.dataset.editorField = "true";
         bodyArea.addEventListener("input", () => {
@@ -405,9 +752,9 @@ function createMockRuleType() {
           setAction({ ...c, body: bodyArea.value, file: void 0 });
         });
         context.registerControl("/mock/body", bodyArea);
-        const fileLabel = document.createElement("label");
+        const fileLabel = document2.createElement("label");
         fileLabel.textContent = "File path";
-        const fileInput = document.createElement("input");
+        const fileInput = document2.createElement("input");
         fileInput.type = "text";
         fileInput.value = typeof current.file === "string" ? current.file : "";
         fileInput.dataset.editorField = "true";
@@ -425,8 +772,8 @@ function createMockRuleType() {
         };
         sourceSelect.addEventListener("change", syncSource);
         syncSource();
-        const headersFieldset = document.createElement("fieldset");
-        const headersLegend = document.createElement("legend");
+        const headersFieldset = document2.createElement("fieldset");
+        const headersLegend = document2.createElement("legend");
         headersLegend.textContent = "Response headers";
         headersFieldset.append(headersLegend);
         const renderHeaders = () => {
@@ -437,11 +784,11 @@ function createMockRuleType() {
           });
           const headers = c.headers ?? [];
           headers.forEach((header, index) => {
-            const row = document.createElement("div");
+            const row = document2.createElement("div");
             row.dataset.mockHeaderRow = String(index);
-            const nameLabel = document.createElement("label");
+            const nameLabel = document2.createElement("label");
             nameLabel.textContent = "Name";
-            const nameInput = document.createElement("input");
+            const nameInput = document2.createElement("input");
             nameInput.type = "text";
             nameInput.value = header.name;
             nameInput.dataset.editorField = "true";
@@ -455,9 +802,9 @@ function createMockRuleType() {
             });
             context.registerControl(`/mock/headers/${index}/name`, nameInput);
             nameLabel.append(nameInput);
-            const valueLabel = document.createElement("label");
+            const valueLabel = document2.createElement("label");
             valueLabel.textContent = "Value";
-            const valueInput = document.createElement("input");
+            const valueInput = document2.createElement("input");
             valueInput.type = "text";
             valueInput.value = header.value;
             valueInput.dataset.editorField = "true";
@@ -471,7 +818,7 @@ function createMockRuleType() {
             });
             context.registerControl(`/mock/headers/${index}/value`, valueInput);
             valueLabel.append(valueInput);
-            const remove = document.createElement("button");
+            const remove = document2.createElement("button");
             remove.type = "button";
             remove.textContent = "Remove";
             remove.dataset.editorField = "true";
@@ -484,7 +831,7 @@ function createMockRuleType() {
             row.append(nameLabel, valueLabel, remove);
             headersFieldset.append(row);
           });
-          const add = document.createElement("button");
+          const add = document2.createElement("button");
           add.type = "button";
           add.textContent = "Add header";
           add.dataset.editorField = "true";
@@ -612,7 +959,7 @@ var queryRuleType = {
     return stable2(diagnostics);
   },
   mount(context) {
-    const { document, container } = context;
+    const { document: document2, container } = context;
     const getCurrent = () => asQueryAction(context.getField("action"));
     const setAction = (next) => {
       context.setField("action", next);
@@ -622,11 +969,11 @@ var queryRuleType = {
       container.replaceChildren();
       if (current === void 0) return;
       current.params.forEach((param, index) => {
-        const row = document.createElement("div");
+        const row = document2.createElement("div");
         row.dataset.queryParamRow = String(index);
-        const nameLabel = document.createElement("label");
+        const nameLabel = document2.createElement("label");
         nameLabel.textContent = "Name";
-        const nameInput = document.createElement("input");
+        const nameInput = document2.createElement("input");
         nameInput.type = "text";
         nameInput.value = param.name;
         nameInput.dataset.editorField = "true";
@@ -640,9 +987,9 @@ var queryRuleType = {
         });
         context.registerControl(`/action/params/${index}/name`, nameInput);
         nameLabel.append(nameInput);
-        const valueLabel = document.createElement("label");
+        const valueLabel = document2.createElement("label");
         valueLabel.textContent = "Value";
-        const valueInput = document.createElement("input");
+        const valueInput = document2.createElement("input");
         valueInput.type = "text";
         valueInput.value = param.value;
         valueInput.dataset.editorField = "true";
@@ -656,7 +1003,7 @@ var queryRuleType = {
         });
         context.registerControl(`/action/params/${index}/value`, valueInput);
         valueLabel.append(valueInput);
-        const remove = document.createElement("button");
+        const remove = document2.createElement("button");
         remove.type = "button";
         remove.textContent = "Remove";
         remove.dataset.editorField = "true";
@@ -669,7 +1016,7 @@ var queryRuleType = {
         row.append(nameLabel, valueLabel, remove);
         container.append(row);
       });
-      const add = document.createElement("button");
+      const add = document2.createElement("button");
       add.type = "button";
       add.textContent = "Add parameter";
       add.dataset.editorField = "true";
@@ -834,17 +1181,17 @@ function createRequestBodyRuleType() {
       return stable3(diagnostics);
     },
     mount(context) {
-      const { document, container } = context;
+      const { document: document2, container } = context;
       const render = () => {
         const current = requestBodyOf(context.getField("requestBody"));
         container.replaceChildren();
         if (current === void 0) return;
-        const modeSelect = document.createElement("select");
+        const modeSelect = document2.createElement("select");
         modeSelect.value = current.mode;
-        const replaceOption = document.createElement("option");
+        const replaceOption = document2.createElement("option");
         replaceOption.value = "replace";
         replaceOption.textContent = "Replace body";
-        const regexOption = document.createElement("option");
+        const regexOption = document2.createElement("option");
         regexOption.value = "regex";
         regexOption.textContent = "Regex replace";
         modeSelect.append(replaceOption, regexOption);
@@ -862,7 +1209,7 @@ function createRequestBodyRuleType() {
         context.registerControl("/requestBody/mode", modeSelect);
         container.append(modeSelect);
         if (current.mode === "replace") {
-          const bodyInput = document.createElement("textarea");
+          const bodyInput = document2.createElement("textarea");
           bodyInput.value = current.body ?? "";
           bodyInput.placeholder = "Replacement body";
           bodyInput.addEventListener("input", () => {
@@ -872,7 +1219,7 @@ function createRequestBodyRuleType() {
           context.registerControl("/requestBody/body", bodyInput);
           container.append(bodyInput);
         } else {
-          const patternInput = document.createElement("input");
+          const patternInput = document2.createElement("input");
           patternInput.type = "text";
           patternInput.value = current.pattern ?? "";
           patternInput.placeholder = "Regex pattern";
@@ -882,7 +1229,7 @@ function createRequestBodyRuleType() {
           });
           context.registerControl("/requestBody/pattern", patternInput);
           container.append(patternInput);
-          const replacementInput = document.createElement("input");
+          const replacementInput = document2.createElement("input");
           replacementInput.type = "text";
           replacementInput.value = current.replacement ?? "";
           replacementInput.placeholder = "Replacement";
@@ -964,15 +1311,15 @@ function createResponseBodyRuleType() {
       return stable4(diagnostics);
     },
     mount(context) {
-      const { document, container } = context;
+      const { document: document2, container } = context;
       const render = () => {
         const current = replacementsOf(context.getField("responseBody"));
         container.replaceChildren();
         if (current === void 0) return;
         current.forEach((entry, index) => {
-          const row = document.createElement("div");
+          const row = document2.createElement("div");
           row.dataset.responseBodyReplacement = String(index);
-          const pattern = document.createElement("input");
+          const pattern = document2.createElement("input");
           pattern.type = "text";
           pattern.value = entry.pattern;
           pattern.placeholder = "Pattern";
@@ -987,7 +1334,7 @@ function createResponseBodyRuleType() {
             `/responseBody/replacements/${index}/pattern`,
             pattern
           );
-          const replacement = document.createElement("input");
+          const replacement = document2.createElement("input");
           replacement.type = "text";
           replacement.value = entry.replacement;
           replacement.placeholder = "Replacement";
@@ -1002,7 +1349,7 @@ function createResponseBodyRuleType() {
             `/responseBody/replacements/${index}/replacement`,
             replacement
           );
-          const remove = document.createElement("button");
+          const remove = document2.createElement("button");
           remove.type = "button";
           remove.textContent = "Remove replacement";
           remove.addEventListener("click", () => {
@@ -1013,7 +1360,7 @@ function createResponseBodyRuleType() {
           row.append(pattern, replacement, remove);
           container.append(row);
         });
-        const add = document.createElement("button");
+        const add = document2.createElement("button");
         add.type = "button";
         add.textContent = "Add replacement";
         add.addEventListener("click", () => {
@@ -1463,6 +1810,7 @@ var EditorControllerImpl = class {
   testResult = void 0;
   testRunning = false;
   testRequestId = 0;
+  aiAssistPanel = null;
   constructor(options, initial, extensions) {
     this.root = options.root;
     this.document = options.root.ownerDocument;
@@ -1475,6 +1823,19 @@ var EditorControllerImpl = class {
     if (initialDiagnostics.length > 0) {
       throw new EditorInitializationError(initialDiagnostics);
     }
+    if (options.aiAssist) {
+      this.aiAssistPanel = createAIAssistPanel(
+        this.root,
+        {
+          getDraft: () => this.getDraft(),
+          navigateToGroup: (groupId) => this.navigateToGroup(groupId)
+        },
+        (proposal) => this.applyAIProposal(proposal),
+        () => {
+        }
+        // onClose
+      );
+    }
     this.host = this.document.createElement("div");
     this.host.className = "rogatio-editor";
     this.host.dataset.rogatioEditor = "true";
@@ -1548,6 +1909,10 @@ var EditorControllerImpl = class {
   destroy() {
     if (this.destroyed) return;
     this.destroyed = true;
+    if (this.aiAssistPanel) {
+      this.aiAssistPanel.hide();
+      this.aiAssistPanel = null;
+    }
     this.cleanupExtensions();
     this.host.removeEventListener("click", this.handleClick);
     this.host.removeEventListener("input", this.handleInput);
@@ -1677,6 +2042,12 @@ var EditorControllerImpl = class {
     }
   };
   dispatchCommand(command, element) {
+    if (command === "ai-assist") {
+      if (this.aiAssistPanel) {
+        this.aiAssistPanel.show();
+      }
+      return;
+    }
     if (command === "validate") {
       this.validate();
       return;
@@ -2189,6 +2560,48 @@ var EditorControllerImpl = class {
     this.focusRequest = failure.path;
     this.render();
   }
+  applyAIProposal(proposal) {
+    for (const ruleProposal of proposal.rules) {
+      let group = this.groupById(ruleProposal.groupId);
+      if (!group) {
+        const groupId = ruleProposal.groupId;
+        this.draft.groups.push({
+          id: groupId,
+          name: "AI Group",
+          origins: [],
+          rules: []
+        });
+        group = this.groupById(groupId);
+      }
+      if (!group) return;
+      const ruleId = this.nextId("rule-ai");
+      const rule = {
+        id: ruleId,
+        name: ruleProposal.name,
+        urlRegex: ruleProposal.urlRegex,
+        origins: ruleProposal.origins ? [...ruleProposal.origins] : [],
+        resourceTypes: ruleProposal.resourceTypes ? [...ruleProposal.resourceTypes] : ["main_frame"],
+        priority: ruleProposal.priority ?? 100
+      };
+      if (ruleProposal.method) {
+        rule.method = ruleProposal.method;
+      }
+      const actionField = ruleProposal.kind === "redirect" || ruleProposal.kind === "mock" ? ruleProposal.kind : "action";
+      rule[actionField] = ruleProposal.action;
+      group.rules.push(rule);
+      this.markChanged();
+      const groupIdStr = String(group.id);
+      this.focusRequest = pointer(
+        "groups",
+        this.groupIndex(groupIdStr),
+        "rules",
+        group.rules.length - 1,
+        "name"
+      );
+    }
+    this.statusMessage = `Applied ${proposal.rules.length} rule${proposal.rules.length === 1 ? "" : "s"} from AI.`;
+    this.render();
+  }
   addGroupOrigin(groupId) {
     const group = this.groupById(groupId);
     if (!group || this.saving) return;
@@ -2617,6 +3030,11 @@ var EditorControllerImpl = class {
   renderCommandBar() {
     this.commandBar.replaceChildren();
     this.commandBar.setAttribute("aria-busy", this.saving ? "true" : "false");
+    if (this.aiAssistPanel) {
+      this.commandBar.append(
+        this.createCommandButton("AI Assist", "ai-assist", this.saving)
+      );
+    }
     this.commandBar.append(
       this.createCommandButton("Validate", "validate", this.saving),
       this.createCommandButton("Save", "save", this.saving || !this.isDirty()),
@@ -3596,10 +4014,10 @@ var HEADER_OPERATIONS = [
   "append",
   "remove"
 ];
-function createSelect(document, options, value, onChange) {
-  const select = document.createElement("select");
+function createSelect(document2, options, value, onChange) {
+  const select = document2.createElement("select");
   for (const option of options) {
-    const opt = document.createElement("option");
+    const opt = document2.createElement("option");
     opt.value = option;
     opt.textContent = option;
     if (option === value) opt.selected = true;
@@ -3608,8 +4026,8 @@ function createSelect(document, options, value, onChange) {
   select.addEventListener("change", () => onChange(select.value));
   return select;
 }
-function createInput(document, value, onChange, maxLength) {
-  const input = document.createElement("input");
+function createInput(document2, value, onChange, maxLength) {
+  const input = document2.createElement("input");
   input.type = "text";
   input.value = value;
   if (maxLength !== void 0) input.maxLength = maxLength;
@@ -3624,16 +4042,16 @@ function createHeaderRuleType() {
       return rule.type === "header";
     },
     mount(context) {
-      const document = context.document;
-      const fieldset = document.createElement("fieldset");
-      const legend = document.createElement("legend");
+      const document2 = context.document;
+      const fieldset = document2.createElement("fieldset");
+      const legend = document2.createElement("legend");
       legend.textContent = "Header rule";
       fieldset.append(legend);
-      const directionLabel = document.createElement("label");
+      const directionLabel = document2.createElement("label");
       directionLabel.textContent = "Direction";
       const directionValue = context.getField("headerDirection") ?? "request";
       const directionSelect = createSelect(
-        document,
+        document2,
         HEADER_DIRECTIONS,
         directionValue,
         (value) => {
@@ -3643,11 +4061,11 @@ function createHeaderRuleType() {
       context.registerControl("/headerDirection", directionSelect);
       directionLabel.append(directionSelect);
       fieldset.append(directionLabel);
-      const operationLabel = document.createElement("label");
+      const operationLabel = document2.createElement("label");
       operationLabel.textContent = "Operation";
       const operationValue = context.getField("headerOperation") ?? "set";
       const operationSelect = createSelect(
-        document,
+        document2,
         HEADER_OPERATIONS,
         operationValue,
         (value) => {
@@ -3657,11 +4075,11 @@ function createHeaderRuleType() {
       context.registerControl("/headerOperation", operationSelect);
       operationLabel.append(operationSelect);
       fieldset.append(operationLabel);
-      const nameLabel = document.createElement("label");
+      const nameLabel = document2.createElement("label");
       nameLabel.textContent = "Header name";
       const nameValue = context.getField("headerName") ?? "";
       const nameInput = createInput(
-        document,
+        document2,
         nameValue,
         (value) => {
           context.setField("headerName", value);
@@ -3671,11 +4089,11 @@ function createHeaderRuleType() {
       context.registerControl("/headerName", nameInput);
       nameLabel.append(nameInput);
       fieldset.append(nameLabel);
-      const valueLabel = document.createElement("label");
+      const valueLabel = document2.createElement("label");
       valueLabel.textContent = "Header value";
       const valueValue = context.getField("headerValue") ?? "";
       const valueInput = createInput(
-        document,
+        document2,
         valueValue,
         (value) => {
           context.setField("headerValue", value);
@@ -3773,10 +4191,10 @@ function createRedirectRuleType() {
       return rule.type === "redirect";
     },
     mount(context) {
-      const document = context.document;
-      const label = document.createElement("label");
+      const document2 = context.document;
+      const label = document2.createElement("label");
       label.textContent = "Redirect destination URL";
-      const input = document.createElement("input");
+      const input = document2.createElement("input");
       input.type = "text";
       input.maxLength = 2048;
       const existing = context.getField("redirect.destination");