From a77b7b00c51c805f7e36119b27a7b71d988d3789 Mon Sep 17 00:00:00 2001
From: Van Nguyen <nguyenthanhvan1902@gmail.com>
Date: Sat, 8 Aug 2026 22:50:50 +0700
Subject: [PATCH 1/3] feat: implement response templating, graphql operation
 interception, and codebase refactoring

---
 panel.html                     |  8 +++
 popup.html                     |  8 +++
 src/background.ts              | 36 ++++++++-----
 src/shared.ts                  |  2 +
 src/tab-state.ts               | 10 +++-
 src/ui.ts                      | 17 +++++-
 src/utils.ts                   | 43 +++++++++++++++
 styles.css                     | 10 ++++
 tests/background-flow.test.mjs | 95 ++++++++++++++++++++++++++++++++++
 tests/test-harness.mjs         |  1 +
 10 files changed, 214 insertions(+), 16 deletions(-)

diff --git a/panel.html b/panel.html
index 36823fb..2c2943d 100644
--- a/panel.html
+++ b/panel.html
@@ -51,6 +51,14 @@ <h4 class="modal-title">
             <option value="DELETE">DELETE</option>
           </select>
         </label>
+        <label class="modal-field">
+          <span>GraphQL Operation (optional)</span>
+          <input
+            id="modal-graphql-op"
+            type="text"
+            placeholder="e.g. GetUserProfile or query name"
+          />
+        </label>
         <div class="override-type-selector">
           <label class="type-radio">
             <input type="radio" name="modal-override-type" value="body" checked />
diff --git a/popup.html b/popup.html
index c973578..aef004f 100644
--- a/popup.html
+++ b/popup.html
@@ -51,6 +51,14 @@ <h4 class="modal-title">
             <option value="DELETE">DELETE</option>
           </select>
         </label>
+        <label class="modal-field">
+          <span>GraphQL Operation (optional)</span>
+          <input
+            id="modal-graphql-op"
+            type="text"
+            placeholder="e.g. GetUserProfile or query name"
+          />
+        </label>
         <div class="override-type-selector">
           <label class="type-radio">
             <input type="radio" name="modal-override-type" value="body" checked />
diff --git a/src/background.ts b/src/background.ts
index e302d6f..b9be85b 100644
--- a/src/background.ts
+++ b/src/background.ts
@@ -481,11 +481,13 @@ namespace NetworkOverridesBackground {
   function findOverride(
     url: string,
     method: string | undefined,
-    overrides: OverrideRule[]
+    overrides: OverrideRule[],
+    postData?: string
   ): { override: OverrideRule; captures: string[] } | null {
     for (const test of overrides) {
       if (test.enabled === false) continue;
       if (!NetworkOverridesUtils.matchesMethod(test.method, method)) continue;
+      if (!NetworkOverridesUtils.matchesGraphQLOperation(test.graphqlOperation, postData)) continue;
       const captures = matchPattern(test.pattern, url);
       if (captures !== null) {
         return { override: test, captures };
@@ -518,18 +520,17 @@ namespace NetworkOverridesBackground {
     }
 
     if (isRequestStage) {
-      if (!state.recentApis.has(url)) {
-        recordApi(tabId, {
-          url,
-          type: params.resourceType || 'other',
-          method: params.request?.method,
-          headers: toFetchHeaders(params.request?.headers),
-          postData: params.request?.postData,
-        });
-      }
+      recordApi(tabId, {
+        url,
+        type: params.resourceType || 'other',
+        method: params.request?.method,
+        headers: toFetchHeaders(params.request?.headers),
+        postData: params.request?.postData,
+      });
 
       try {
-        const match = findOverride(url, params.request?.method, state.overrides);
+        const postData = params.request?.postData || state.recentApis.get(url)?.postData;
+        const match = findOverride(url, params.request?.method, state.overrides, postData);
         if (match && match.override.failReason) {
           const errorReason = match.override.failReason;
           const fail = () => {
@@ -634,7 +635,8 @@ namespace NetworkOverridesBackground {
           typeof params.responseStatusCode === 'number' ? params.responseStatusCode : undefined,
       });
 
-      const match = findOverride(url, params.request?.method, state.overrides);
+      const postData = params.request?.postData || state.recentApis.get(url)?.postData;
+      const match = findOverride(url, params.request?.method, state.overrides, postData);
       if (!match) {
         const resourceType = (params.resourceType || '').toLowerCase();
         if (capturedBodyTypes.includes(resourceType)) {
@@ -657,9 +659,15 @@ namespace NetworkOverridesBackground {
       console.log('[NetworkOverrides] Fulfill body:', match.override.pattern, '→', url);
 
       const ov = match.override;
+      const captures = match.captures;
 
       function bodyToValidBase64(): string {
-        if (ov.mode !== 'file') return stringToBase64Local(ov.body || '');
+        const rawBody = ov.body || '';
+        const processedBody =
+          ov.mode !== 'file'
+            ? NetworkOverridesUtils.processResponseTemplate(rawBody, captures)
+            : rawBody;
+        if (ov.mode !== 'file') return stringToBase64Local(processedBody);
         try {
           atob(ov.body);
           return ov.body;
@@ -669,7 +677,7 @@ namespace NetworkOverridesBackground {
             ov.pattern,
             '— encoding as text instead'
           );
-          return stringToBase64Local(ov.body || '');
+          return stringToBase64Local(processedBody);
         }
       }
 
diff --git a/src/shared.ts b/src/shared.ts
index 31347b9..2a004b4 100644
--- a/src/shared.ts
+++ b/src/shared.ts
@@ -12,6 +12,8 @@ declare namespace NetworkOverridesShared {
     statusCode?: number; // integer 100–599; body rules only
     responseHeaders?: FetchHeader[]; // extra/override response headers; body rules only
     requestHeaders?: FetchHeader[]; // extra/override request headers; applied at request stage
+    graphqlOperation?: string; // optional GraphQL operationName to match against request payload
+    processTemplates?: boolean; // whether to process dynamic template tokens {{now}}, {{uuid}}, etc.
     delayMs?: number; // 0–120000 ms; body and fail rules
     failReason?: string; // presence makes this a fail rule (CDP Network.ErrorReason)
   }
diff --git a/src/tab-state.ts b/src/tab-state.ts
index e0c1175..4f9c62c 100644
--- a/src/tab-state.ts
+++ b/src/tab-state.ts
@@ -90,10 +90,18 @@ namespace NetworkOverridesTabState {
 
   export function setRecentApi(tabId: number, entry: ApiEntry): void {
     const state = ensure(tabId);
+    const existing = state.recentApis.get(entry.url);
+    const merged: ApiEntry = existing
+      ? {
+          ...existing,
+          ...entry,
+          postData: entry.postData !== undefined ? entry.postData : existing.postData,
+        }
+      : entry;
     if (state.recentApis.has(entry.url)) {
       state.recentApis.delete(entry.url);
     }
-    state.recentApis.set(entry.url, entry);
+    state.recentApis.set(entry.url, merged);
     trimToLimit(state.recentApis, RECENT_APIS_LIMIT);
     schedulePersist(tabId);
   }
diff --git a/src/ui.ts b/src/ui.ts
index 54eecf6..d89600a 100644
--- a/src/ui.ts
+++ b/src/ui.ts
@@ -165,6 +165,7 @@ namespace NetworkOverridesUi {
     importRulesInput: HTMLInputElement;
     modalRequestHeaders?: HTMLTextAreaElement;
     modalRequestHeadersField?: HTMLElement;
+    modalGraphqlOp?: HTMLInputElement;
     modalPreviewContainer?: HTMLDivElement;
     profilesSelect?: HTMLSelectElement;
     saveProfileBtn?: HTMLButtonElement;
@@ -328,6 +329,9 @@ namespace NetworkOverridesUi {
           override.method && override.method !== 'ANY'
             ? `<span class="override-method-badge">${escapeHtml(override.method)}</span> `
             : '';
+        const gqlBadge = override.graphqlOperation
+          ? `<span class="graphql-badge">GQL: ${escapeHtml(override.graphqlOperation)}</span> `
+          : '';
         const statusBadge =
           typeof override.statusCode === 'number'
             ? `<span class="override-status-badge">${override.statusCode}</span> `
@@ -351,7 +355,7 @@ namespace NetworkOverridesUi {
             <div class="override-item-info">
               <b class="override-pattern">${escapeHtml(override.pattern)}</b>
               ${override.redirectUrl ? `<div class="override-redirect">→ ${escapeHtml(override.redirectUrl)}</div>` : ''}
-              <div class="override-meta">${methodBadge}${failBadge}${statusBadge}${delayBadge}${escapeHtml(override.mode)}${override.body ? ` · ${escapeHtml(override.body.substring(0, 80))}${override.body.length > 80 ? '…' : ''}` : ''}</div>
+              <div class="override-meta">${methodBadge}${gqlBadge}${failBadge}${statusBadge}${delayBadge}${escapeHtml(override.mode)}${override.body ? ` · ${escapeHtml(override.body.substring(0, 80))}${override.body.length > 80 ? '…' : ''}` : ''}</div>
             </div>
             <div class="override-item-actions">
               <button data-index="${index}" class="edit-btn" title="Edit">✎</button>
@@ -408,6 +412,9 @@ namespace NetworkOverridesUi {
     }
 
     function prefillAdvancedFields(existing: OverrideRule | null): void {
+      if (elements.modalGraphqlOp) {
+        elements.modalGraphqlOp.value = existing?.graphqlOperation || '';
+      }
       elements.modalStatus.value =
         existing && typeof existing.statusCode === 'number' ? String(existing.statusCode) : '';
       elements.modalDelay.value =
@@ -952,6 +959,9 @@ namespace NetworkOverridesUi {
       if (method && method !== 'ANY') {
         override.method = method;
       }
+      if (elements.modalGraphqlOp && elements.modalGraphqlOp.value.trim()) {
+        override.graphqlOperation = elements.modalGraphqlOp.value.trim();
+      }
       if (oldOverride?.enabled === false) {
         override.enabled = false;
       }
@@ -1129,6 +1139,8 @@ namespace NetworkOverridesUi {
             rule.responseHeaders.every(isValidImportHeader))) &&
         (rule.requestHeaders === undefined ||
           (Array.isArray(rule.requestHeaders) && rule.requestHeaders.every(isValidImportHeader))) &&
+        (rule.graphqlOperation === undefined || typeof rule.graphqlOperation === 'string') &&
+        (rule.processTemplates === undefined || typeof rule.processTemplates === 'boolean') &&
         (rule.failReason === undefined ||
           (typeof rule.failReason === 'string' &&
             FAIL_REASONS.includes(rule.failReason) &&
@@ -1161,6 +1173,8 @@ namespace NetworkOverridesUi {
         if (rule.redirectUrl !== undefined) clean.redirectUrl = rule.redirectUrl;
         if (rule.enabled !== undefined) clean.enabled = rule.enabled;
         if (rule.method !== undefined) clean.method = rule.method.toUpperCase();
+        if (rule.graphqlOperation !== undefined) clean.graphqlOperation = rule.graphqlOperation;
+        if (rule.processTemplates !== undefined) clean.processTemplates = rule.processTemplates;
         if (rule.statusCode !== undefined) clean.statusCode = rule.statusCode;
         if (rule.delayMs !== undefined) clean.delayMs = rule.delayMs;
         if (rule.responseHeaders !== undefined) {
@@ -1465,6 +1479,7 @@ namespace NetworkOverridesUi {
       modalRequestHeadersField: document.getElementById(
         'modal-request-headers-field'
       ) as HTMLElement,
+      modalGraphqlOp: document.getElementById('modal-graphql-op') as HTMLInputElement,
       modalPreviewContainer: document.getElementById('modal-preview-container') as HTMLDivElement,
       profilesSelect: document.getElementById('profiles-select') as HTMLSelectElement,
       saveProfileBtn: document.getElementById('save-profile-btn') as HTMLButtonElement,
diff --git a/src/utils.ts b/src/utils.ts
index 313330b..38e1fcd 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -68,4 +68,47 @@ namespace NetworkOverridesUtils {
     if (!requestMethod) return false;
     return ruleMethod.toUpperCase() === requestMethod.toUpperCase();
   }
+
+  export function matchesGraphQLOperation(ruleOp?: string, postData?: string): boolean {
+    if (!ruleOp || !ruleOp.trim()) return true;
+    if (!postData || !postData.trim()) return false;
+    const target = ruleOp.trim().toLowerCase();
+    try {
+      const parsed = JSON.parse(postData);
+      if (
+        typeof parsed.operationName === 'string' &&
+        parsed.operationName.toLowerCase() === target
+      ) {
+        return true;
+      }
+      if (typeof parsed.query === 'string' && parsed.query.toLowerCase().includes(target)) {
+        return true;
+      }
+    } catch {}
+    return postData.toLowerCase().includes(target);
+  }
+
+  export function processResponseTemplate(body: string, captures: string[] = []): string {
+    if (!body || !body.includes('{{')) return body;
+    let result = body;
+    result = result.replace(/\{\{(timestamp|now)\}\}/gi, () => new Date().toISOString());
+    result = result.replace(/\{\{epoch\}\}/gi, () => String(Date.now()));
+    result = result.replace(/\{\{uuid\}\}/gi, () => {
+      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
+        const r = (Math.random() * 16) | 0;
+        const v = c === 'x' ? r : (r & 0x3) | 0x8;
+        return v.toString(16);
+      });
+    });
+    result = result.replace(/\{\{randomInt:(\d+):(\d+)\}\}/gi, (_, minStr, maxStr) => {
+      const min = parseInt(minStr, 10);
+      const max = parseInt(maxStr, 10);
+      return String(Math.floor(Math.random() * (max - min + 1)) + min);
+    });
+    result = result.replace(/\{\{param:(\d+)\}\}/gi, (_, indexStr) => {
+      const idx = parseInt(indexStr, 10) - 1;
+      return idx >= 0 && idx < captures.length ? captures[idx] : '';
+    });
+    return result;
+  }
 }
diff --git a/styles.css b/styles.css
index 9a0e2a0..b33fea0 100644
--- a/styles.css
+++ b/styles.css
@@ -849,3 +849,13 @@ input[type='search'] {
   max-height: 130px;
   object-fit: contain;
 }
+
+.graphql-badge {
+  background-color: #e5c07b;
+  color: #1e1e1e;
+  font-size: 0.7rem;
+  font-weight: bold;
+  padding: 1px 5px;
+  border-radius: 3px;
+  margin-left: 4px;
+}
diff --git a/tests/background-flow.test.mjs b/tests/background-flow.test.mjs
index cb36438..edcbce4 100644
--- a/tests/background-flow.test.mjs
+++ b/tests/background-flow.test.mjs
@@ -1083,3 +1083,98 @@ test('Background handles updateCapturedBodyTypes message', async () => {
   );
   assert.equal(responded, true);
 });
+
+test('Background processes response template tokens {{uuid}} and {{timestamp}}', async () => {
+  const harness = createBackgroundHarness();
+
+  harness.callMessage({
+    type: 'update',
+    tabId: 7,
+    tabUrl: `${TEST_DOMAIN}/`,
+    enabled: true,
+    overrides: [{ pattern: '/users$/', body: '{"id":"{{uuid}}"}', mode: 'text' }],
+  });
+  await new Promise(resolve => setTimeout(resolve, 0));
+
+  harness.emitDebuggerEvent('Fetch.requestPaused', {
+    requestId: 'req-template-1',
+    request: { url: TEST_API_URL },
+    responseStatusCode: 200,
+    resourceType: 'Fetch',
+  });
+
+  await new Promise(resolve => setTimeout(resolve, 20));
+
+  const fulfill = harness.commandLog.find(
+    ({ method, params }) =>
+      method === 'Fetch.fulfillRequest' && params.requestId === 'req-template-1'
+  );
+  assert.ok(fulfill, 'Must fulfill request');
+  const decoded = Buffer.from(fulfill.params.body, 'base64').toString('utf8');
+  assert.equal(decoded.includes('{{uuid}}'), false, 'Template token must be replaced');
+  assert.ok(/"id":"[a-f0-9-]{36}"/.test(decoded), 'UUID regex must match generated UUID');
+});
+
+test('Background filters GraphQL requests by operationName', async () => {
+  const harness = createBackgroundHarness();
+
+  harness.callMessage({
+    type: 'update',
+    tabId: 7,
+    tabUrl: `${TEST_DOMAIN}/`,
+    enabled: true,
+    overrides: [
+      {
+        pattern: '/graphql',
+        body: '{"data":{"user":{"name":"Mocked User"}}}',
+        mode: 'text',
+        graphqlOperation: 'GetUserProfile',
+      },
+    ],
+  });
+  await new Promise(resolve => setTimeout(resolve, 0));
+
+  // Request 1: Different operation -> should NOT match
+  harness.emitDebuggerEvent('Fetch.requestPaused', {
+    requestId: 'req-gql-1',
+    request: {
+      url: `${TEST_DOMAIN}/graphql`,
+      method: 'POST',
+      postData: '{"operationName":"GetOrders"}',
+    },
+    resourceType: 'Fetch',
+  });
+
+  const continueCmd = harness.commandLog.find(
+    ({ method, params }) => method === 'Fetch.continueRequest' && params.requestId === 'req-gql-1'
+  );
+  assert.ok(continueCmd, 'Different operation must pass through');
+
+  // Request 2: Matching operation -> MUST match
+  harness.emitDebuggerEvent('Fetch.requestPaused', {
+    requestId: 'req-gql-2',
+    request: {
+      url: `${TEST_DOMAIN}/graphql`,
+      method: 'POST',
+      postData: '{"operationName":"GetUserProfile"}',
+    },
+    resourceType: 'Fetch',
+  });
+
+  harness.emitDebuggerEvent('Fetch.requestPaused', {
+    requestId: 'req-gql-2',
+    request: {
+      url: `${TEST_DOMAIN}/graphql`,
+      method: 'POST',
+      postData: '{"operationName":"GetUserProfile"}',
+    },
+    responseStatusCode: 200,
+    resourceType: 'Fetch',
+  });
+  await new Promise(resolve => setTimeout(resolve, 20));
+
+  const fulfill = harness.commandLog.find(
+    ({ method, params }) => method === 'Fetch.fulfillRequest' && params.requestId === 'req-gql-2'
+  );
+  assert.ok(fulfill, 'Matching GraphQL operation must fulfill request');
+});
diff --git a/tests/test-harness.mjs b/tests/test-harness.mjs
index 27ab32a..8c19691 100644
--- a/tests/test-harness.mjs
+++ b/tests/test-harness.mjs
@@ -133,6 +133,7 @@ function buildUiHtml() {
           <option value="PATCH">PATCH</option>
           <option value="DELETE">DELETE</option>
         </select>
+        <input id="modal-graphql-op" type="text">
         <div class="override-type-selector">
           <label class="type-radio">
             <input type="radio" name="modal-override-type" value="body" checked />

From 0b28767cbca00d2a13ca6123deaab4dd310f71aa Mon Sep 17 00:00:00 2001
From: Van Nguyen <nguyenthanhvan1902@gmail.com>
Date: Sat, 8 Aug 2026 22:52:19 +0700
Subject: [PATCH 2/3] ci: enhance pipeline with concurrency, ESLint check, and
 Playwright browser caching

---
 .github/workflows/ci.yml | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 10538d1..dcf7204 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -8,6 +8,10 @@ on:
       - develop
   pull_request:
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
 jobs:
   test:
     runs-on: ubuntu-latest
@@ -30,6 +34,9 @@ jobs:
       - name: Check code formatting
         run: npx prettier --check .
 
+      - name: Lint TypeScript code
+        run: npm run lint
+
       - name: Lint commit messages
         run: |
           if [ "${{ github.event_name }}" = "pull_request" ]; then
@@ -44,7 +51,14 @@ jobs:
       - name: Run tests with coverage
         run: npm run ci:test
 
-      - name: Install Playwright Chromium
+      - name: Cache Playwright Chromium
+        uses: actions/cache@v4
+        id: playwright-cache
+        with:
+          path: ~/.cache/ms-playwright
+          key: ${{ runner.os }}-playwright-${{ hashFiles('package-lock.json') }}
+
+      - name: Install Playwright Chromium dependencies
         run: npx playwright install --with-deps chromium
 
       - name: Run Playwright smoke test

From 2644b573d029756460ac5bdc2b8c56b77348af27 Mon Sep 17 00:00:00 2001
From: Van Nguyen <nguyenthanhvan1902@gmail.com>
Date: Sun, 9 Aug 2026 00:42:07 +0700
Subject: [PATCH 3/3] feat: refine override UI and refactor extension modules

---
 guide.html                            |  267 +---
 panel.html                            |  297 ++--
 popup.html                            |  291 ++--
 scripts/smoke.mjs                     |   43 +
 src/background.ts                     |  789 +----------
 src/background/api-capture.ts         |  128 ++
 src/background/debugger-controller.ts |  212 +++
 src/background/encoding.ts            |   32 +
 src/background/interceptor.ts         |  290 ++++
 src/background/message-router.ts      |  165 +++
 src/ui.ts                             | 1862 +++++--------------------
 src/ui/api-list.ts                    |  186 +++
 src/ui/attach-status.ts               |   34 +
 src/ui/curl.ts                        |  128 ++
 src/ui/dialogs.ts                     |  148 ++
 src/ui/headers-editor.ts              |  134 ++
 src/ui/modal-controller.ts            |  217 +++
 src/ui/modal.ts                       |  125 ++
 src/ui/notifications.ts               |  109 ++
 src/ui/persistence.ts                 |   20 +
 src/ui/primitives.ts                  |   96 ++
 src/ui/profiles.ts                    |   87 ++
 src/ui/rules-io-controller.ts         |  251 ++++
 src/ui/rules-list.ts                  |  144 ++
 src/ui/swagger.ts                     |   85 ++
 src/ui/toolbar-controller.ts          |  151 ++
 src/ui/types.ts                       |  108 ++
 src/ui/view-utils.ts                  |   41 +
 src/utils.ts                          |    5 +-
 styles.css                            |  865 +-----------
 styles/base.css                       |  398 ++++++
 styles/features.css                   |  263 ++++
 styles/guide.css                      |  207 +++
 styles/modal-and-rules.css            |  441 ++++++
 styles/primitives.css                 |  352 +++++
 tests/background-advanced.test.mjs    |  419 ++++++
 tests/background-flow.test.mjs        |  734 +---------
 tests/background-lifecycle.test.mjs   |  319 +++++
 tests/background-test-harness.mjs     |  242 ++++
 tests/tab-state.test.mjs              |    3 +-
 tests/test-harness.mjs                |  356 ++---
 tests/ui-behavior.test.mjs            |  866 +-----------
 tests/ui-components.test.mjs          |  164 +++
 tests/ui-import-validation.test.mjs   |  197 +++
 tests/ui-modal-primitives.test.mjs    |  369 +++++
 tests/ui-notifications.test.mjs       |  110 ++
 tests/ui-rules-io.test.mjs            |  422 ++++++
 tests/ui-shell.test.mjs               |   16 +
 48 files changed, 7880 insertions(+), 5308 deletions(-)
 create mode 100644 src/background/api-capture.ts
 create mode 100644 src/background/debugger-controller.ts
 create mode 100644 src/background/encoding.ts
 create mode 100644 src/background/interceptor.ts
 create mode 100644 src/background/message-router.ts
 create mode 100644 src/ui/api-list.ts
 create mode 100644 src/ui/attach-status.ts
 create mode 100644 src/ui/curl.ts
 create mode 100644 src/ui/dialogs.ts
 create mode 100644 src/ui/headers-editor.ts
 create mode 100644 src/ui/modal-controller.ts
 create mode 100644 src/ui/modal.ts
 create mode 100644 src/ui/notifications.ts
 create mode 100644 src/ui/persistence.ts
 create mode 100644 src/ui/primitives.ts
 create mode 100644 src/ui/profiles.ts
 create mode 100644 src/ui/rules-io-controller.ts
 create mode 100644 src/ui/rules-list.ts
 create mode 100644 src/ui/swagger.ts
 create mode 100644 src/ui/toolbar-controller.ts
 create mode 100644 src/ui/types.ts
 create mode 100644 src/ui/view-utils.ts
 create mode 100644 styles/base.css
 create mode 100644 styles/features.css
 create mode 100644 styles/guide.css
 create mode 100644 styles/modal-and-rules.css
 create mode 100644 styles/primitives.css
 create mode 100644 tests/background-advanced.test.mjs
 create mode 100644 tests/background-lifecycle.test.mjs
 create mode 100644 tests/background-test-harness.mjs
 create mode 100644 tests/ui-components.test.mjs
 create mode 100644 tests/ui-import-validation.test.mjs
 create mode 100644 tests/ui-modal-primitives.test.mjs
 create mode 100644 tests/ui-notifications.test.mjs
 create mode 100644 tests/ui-rules-io.test.mjs
 create mode 100644 tests/ui-shell.test.mjs

diff --git a/guide.html b/guide.html
index 73d87ca..b09ccb0 100644
--- a/guide.html
+++ b/guide.html
@@ -3,215 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <title>Network Overrides — User Guide</title>
-    <style>
-      :root {
-        --accent: #0a84ff;
-        --accent-dark: #0066d6;
-        --text: #1b2b3a;
-        --text-secondary: #55708a;
-        --border: #c9d7e6;
-        --bg: #f8fbff;
-        --card: #fff;
-        --code-bg: #f4f6f8;
-        --radius: 8px;
-      }
-      * {
-        box-sizing: border-box;
-      }
-      body {
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
-        line-height: 1.6;
-        color: var(--text);
-        background: var(--bg);
-        margin: 0;
-        padding: 0;
-      }
-      .container {
-        max-width: 880px;
-        margin: 0 auto;
-        padding: 32px 24px 80px;
-      }
-      h1 {
-        font-size: 2rem;
-        margin-bottom: 0.25em;
-        color: var(--accent-dark);
-      }
-      h1 small {
-        font-size: 1rem;
-        font-weight: 400;
-        color: var(--text-secondary);
-        display: block;
-        margin-top: 4px;
-      }
-      h2 {
-        font-size: 1.4rem;
-        margin: 2em 0 0.5em;
-        padding-bottom: 6px;
-        border-bottom: 2px solid var(--accent);
-        color: var(--text);
-      }
-      h3 {
-        font-size: 1.1rem;
-        margin: 1.5em 0 0.5em;
-        color: var(--accent-dark);
-      }
-      p,
-      li {
-        color: var(--text);
-      }
-      a {
-        color: var(--accent);
-      }
-      .toc {
-        background: var(--card);
-        border: 1px solid var(--border);
-        border-radius: var(--radius);
-        padding: 16px 24px;
-        margin: 24px 0;
-      }
-      .toc h3 {
-        margin: 0 0 12px;
-        border: none;
-      }
-      .toc ol {
-        margin: 0;
-        padding-left: 20px;
-      }
-      .toc a {
-        text-decoration: none;
-      }
-      .toc a:hover {
-        text-decoration: underline;
-      }
-      code,
-      pre {
-        font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
-        font-size: 0.9em;
-        background: var(--code-bg);
-        border-radius: 4px;
-      }
-      code {
-        padding: 2px 6px;
-      }
-      pre {
-        padding: 12px 16px;
-        overflow-x: auto;
-        border: 1px solid var(--border);
-        border-radius: var(--radius);
-        line-height: 1.5;
-      }
-      table {
-        width: 100%;
-        border-collapse: collapse;
-        margin: 16px 0;
-        font-size: 0.95em;
-      }
-      th,
-      td {
-        text-align: left;
-        padding: 8px 12px;
-        border: 1px solid var(--border);
-      }
-      th {
-        background: var(--accent);
-        color: #fff;
-        font-weight: 600;
-      }
-      tr:nth-child(even) {
-        background: #fff;
-      }
-      .card {
-        background: var(--card);
-        border: 1px solid var(--border);
-        border-radius: var(--radius);
-        padding: 16px 20px;
-        margin: 16px 0;
-      }
-      .card-title {
-        font-weight: 700;
-        font-size: 1rem;
-        margin-bottom: 8px;
-        color: var(--accent-dark);
-      }
-      .tag {
-        display: inline-block;
-        padding: 2px 10px;
-        border-radius: 999px;
-        font-size: 0.78rem;
-        font-weight: 600;
-        text-transform: uppercase;
-        letter-spacing: 0.03em;
-      }
-      .tag-blue {
-        background: #e8f3ff;
-        color: #0a4f9c;
-      }
-      .tag-green {
-        background: #e3f9e5;
-        color: #1a7d36;
-      }
-      .tag-orange {
-        background: #fff3e0;
-        color: #b85c00;
-      }
-      blockquote {
-        border-left: 4px solid var(--accent);
-        margin: 16px 0;
-        padding: 8px 16px;
-        background: #f0f7ff;
-        border-radius: 0 var(--radius) var(--radius) 0;
-      }
-      blockquote p {
-        margin: 4px 0;
-      }
-      hr {
-        border: none;
-        border-top: 1px solid var(--border);
-        margin: 32px 0;
-      }
-      .faq-q {
-        font-weight: 700;
-        color: var(--accent-dark);
-        margin: 20px 0 4px;
-      }
-      .faq-a {
-        margin: 0 0 8px;
-      }
-      @media (prefers-color-scheme: dark) {
-        :root {
-          --text: #e8ecf0;
-          --text-secondary: #9aabbe;
-          --border: #3a4a5a;
-          --bg: #1a2330;
-          --card: #222d3d;
-          --code-bg: #1e2835;
-        }
-        a {
-          color: #5cb8ff;
-        }
-        th {
-          color: #fff;
-        }
-        tr:nth-child(even) {
-          background: #1e2835;
-        }
-        blockquote {
-          background: #1a2740;
-        }
-        .tag-blue {
-          background: #1a3050;
-          color: #8cc8ff;
-        }
-        .tag-green {
-          background: #1a3a25;
-          color: #6fda7a;
-        }
-        .tag-orange {
-          background: #3a2a10;
-          color: #ffb74d;
-        }
-      }
-    </style>
+    <link rel="stylesheet" href="styles/guide.css" />
   </head>
   <body>
     <div class="container">
@@ -280,7 +72,8 @@ <h3>3.1. Popup</h3>
       <p>Click the extension icon on the toolbar. Contains:</p>
       <ul>
         <li>
-          <strong>Header</strong>: "Network Overrides API" with Refresh (↻) and Info (ⓘ) buttons.
+          <strong>Header</strong>: "Network Overrides API" with two compact actions:
+          <strong>Refresh captured requests</strong> and <strong>Open user guide</strong>.
         </li>
         <li><strong>Enable Overrides toggle</strong>: Turn override functionality on/off.</li>
         <li>
@@ -728,18 +521,25 @@ <h3>9.2. Search APIs</h3>
 
       <h3>9.3. Refresh API list</h3>
       <p>
-        Click the <strong>Refresh</strong> button (↻). The extension retries up to 5 times (each
-        250ms apart) to load APIs.
+        Click <strong>Refresh captured requests</strong> in the header or the refresh action beside
+        the captured-request filters. The icon spins and is temporarily disabled while the current
+        API snapshot is loaded. If the list is empty, the extension retries automatically.
       </p>
 
-      <h3>9.4. Type grouping</h3>
+      <h3>9.4. Open the user guide</h3>
+      <p>
+        Click <strong>Open user guide</strong> in the header. The complete guide opens in a separate
+        browser tab, so the popup or DevTools panel remains available.
+      </p>
+
+      <h3>9.5. Type grouping</h3>
       <p>
         APIs are grouped by resource type: XHR, Fetch, JS, CSS, Img, Media, Font, Doc, WS, Manifest,
         EventSource, TextTrack, Other.
       </p>
       <p>Click a group header to collapse/expand. Collapse state is persisted in storage.</p>
 
-      <h3>9.5. Marker headers</h3>
+      <h3>9.6. Marker headers</h3>
       <p>When a request is overridden, the extension adds these response headers:</p>
       <ul>
         <li><code>x-network-overrides: true</code></li>
@@ -792,6 +592,28 @@ <h3>10.6. Required permissions</h3>
         <li><code>&lt;all_urls&gt;</code> — to attach the debugger to any tab.</li>
       </ul>
 
+      <h3>10.7. Save and apply notifications</h3>
+      <p>Rule operations now report their result in a notification at the top-right:</p>
+      <ul>
+        <li><strong>Green</strong>: the change was saved and applied to the active tab.</li>
+        <li>
+          <strong>Yellow</strong>: the change was saved, but interception could not be updated. This
+          commonly means another debugger or DevTools session owns the tab. Use
+          <strong>Retry</strong> in the notification after resolving the conflict; the rule does not
+          need to be saved again.
+        </li>
+        <li>
+          <strong>Red</strong>: the operation failed and was not saved. The message includes the
+          storage, import, profile, or background error when available.
+        </li>
+      </ul>
+      <p>
+        Validation errors inside the Override editor appear directly above
+        <strong>Save Override</strong>. The editor stays open and focuses the field that needs to be
+        corrected. While persistence is running, the button displays <strong>Saving…</strong> and
+        cannot be pressed twice.
+      </p>
+
       <!-- ============ 11 ============ -->
       <h2 id="faq">11. FAQ</h2>
 
@@ -806,6 +628,14 @@ <h2 id="faq">11. FAQ</h2>
         </ol>
       </div>
 
+      <div class="faq-q">Q: I clicked Save Override, but nothing appeared to happen?</div>
+      <div class="faq-a">
+        Check the message above the Save button and the notification in the top-right corner. A red
+        message means the rule was not stored. A yellow notification means the rule was stored but
+        could not be applied to the active tab; close any competing DevTools/debugger session and
+        click <strong>Retry</strong> in that notification.
+      </div>
+
       <div class="faq-q">Q: Turned off overrides but requests are still being modified?</div>
       <div class="faq-a">
         Try refreshing the page. If the issue persists, disable and re-enable the extension.
@@ -837,8 +667,8 @@ <h2 id="faq">11. FAQ</h2>
 
       <div class="faq-q">Q: APIs are not showing up in Captured APIs?</div>
       <div class="faq-a">
-        Click the <strong>Refresh</strong> button (↻). The extension retries 5 times over 1.25
-        seconds. If still empty:
+        Click <strong>Refresh captured requests</strong>. The extension retries automatically for a
+        short period. If the list is still empty:
         <ol>
           <li>Verify the toggle is ON.</li>
           <li>Check the Network tab to confirm requests are being sent.</li>
@@ -862,8 +692,9 @@ <h2 id="faq">11. FAQ</h2>
       <div class="faq-a">
         Yes. Import always writes into the domain that's currently active in the panel, regardless
         of which domain the file's <code>domain</code> field says it was exported from — but if that
-        field doesn't match the current domain, a confirm dialog warns you first, so the mismatch
-        isn't silent.
+        field doesn't match the current domain, an import dialog warns you first, so the mismatch
+        isn't silent. If rules already exist, the next dialog provides explicit
+        <strong>Append rules</strong> and <strong>Replace rules</strong> choices.
       </div>
 
       <hr />
diff --git a/panel.html b/panel.html
index 2c2943d..38b4bf5 100644
--- a/panel.html
+++ b/panel.html
@@ -9,8 +9,35 @@
   <body>
     <div class="header-row">
       <h2>Network Overrides API</h2>
-      <button id="info-btn" type="button" class="header-btn info-btn" title="User Guide">ⓘ</button>
-      <button id="refresh-apis" type="button" class="header-btn" title="Refresh">↻</button>
+      <div class="header-actions" aria-label="Popup actions">
+        <button
+          id="refresh-apis"
+          type="button"
+          class="header-btn"
+          title="Refresh captured requests"
+          aria-label="Refresh captured requests"
+        >
+          <svg viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M20 6v5h-5"></path>
+            <path d="M4 18v-5h5"></path>
+            <path d="M6.1 9a7 7 0 0 1 11.5-2.6L20 9"></path>
+            <path d="M17.9 15a7 7 0 0 1-11.5 2.6L4 15"></path>
+          </svg>
+        </button>
+        <button
+          id="info-btn"
+          type="button"
+          class="header-btn info-btn"
+          title="Open user guide"
+          aria-label="Open user guide"
+        >
+          <svg viewBox="0 0 24 24" aria-hidden="true">
+            <circle cx="12" cy="12" r="9"></circle>
+            <path d="M12 11v6"></path>
+            <path d="M12 7.5h.01"></path>
+          </svg>
+        </button>
+      </div>
     </div>
 
     <div class="switch-container">
@@ -30,115 +57,159 @@ <h2>Network Overrides API</h2>
     </p>
 
     <div id="override-modal" class="modal" style="display: none">
-      <div class="modal-content">
-        <span class="close">&times;</span>
-        <h4 class="modal-title">
-          <span id="modal-title-text"></span>
-          <span id="modal-url"></span>
-        </h4>
-        <label class="modal-field">
-          <span>Pattern</span>
-          <input id="modal-pattern" type="text" />
-        </label>
-        <label class="modal-field">
-          <span>Method</span>
-          <select id="modal-method">
-            <option value="ANY">Any</option>
-            <option value="GET">GET</option>
-            <option value="POST">POST</option>
-            <option value="PUT">PUT</option>
-            <option value="PATCH">PATCH</option>
-            <option value="DELETE">DELETE</option>
-          </select>
-        </label>
-        <label class="modal-field">
-          <span>GraphQL Operation (optional)</span>
-          <input
-            id="modal-graphql-op"
-            type="text"
-            placeholder="e.g. GetUserProfile or query name"
-          />
-        </label>
-        <div class="override-type-selector">
-          <label class="type-radio">
-            <input type="radio" name="modal-override-type" value="body" checked />
-            <span>Override body</span>
-          </label>
-          <label class="type-radio">
-            <input type="radio" name="modal-override-type" value="redirect" />
-            <span>Redirect to URL</span>
-          </label>
-          <label class="type-radio">
-            <input type="radio" name="modal-override-type" value="fail" />
-            <span>Fail request</span>
+      <div class="modal-content modal-content--override">
+        <header class="modal-header">
+          <h4 class="modal-title">
+            <span id="modal-title-text"></span>
+            <span id="modal-url"></span>
+          </h4>
+          <button class="close modal-close" type="button" aria-label="Close override editor">
+            &times;
+          </button>
+        </header>
+        <div class="modal-scroll-body">
+          <label class="modal-field">
+            <span>Pattern</span>
+            <input id="modal-pattern" type="text" />
           </label>
-        </div>
-        <div id="modal-body-fields">
           <label class="modal-field">
-            <span>Response body</span>
-            <select id="modal-mode">
-              <option value="text">Text</option>
-              <option value="file">Raw base64</option>
+            <span>Method</span>
+            <select id="modal-method">
+              <option value="ANY">Any</option>
+              <option value="GET">GET</option>
+              <option value="POST">POST</option>
+              <option value="PUT">PUT</option>
+              <option value="PATCH">PATCH</option>
+              <option value="DELETE">DELETE</option>
             </select>
-            <textarea id="modal-body" rows="8" placeholder="Custom response body"></textarea>
-            <div class="modal-body-footer">
-              <span id="body-type-badge" class="body-type-badge">text</span>
-              <button id="format-json-btn" type="button" class="modal-action-btn">
-                Format JSON
-              </button>
-            </div>
-            <div
-              id="modal-preview-container"
-              class="modal-preview-container"
-              style="display: none"
-            ></div>
           </label>
-        </div>
-        <div id="modal-redirect-fields" style="display: none">
           <label class="modal-field">
-            <span>Redirect URL</span>
+            <span>GraphQL Operation (optional)</span>
             <input
-              id="modal-redirect-url"
+              id="modal-graphql-op"
               type="text"
-              placeholder="e.g. https://new-api.example.com/api/* (uses * for captured wildcards)"
+              placeholder="e.g. GetUserProfile or query name"
             />
           </label>
+          <div class="override-type-selector">
+            <label class="type-radio">
+              <input type="radio" name="modal-override-type" value="body" checked />
+              <span>Override body</span>
+            </label>
+            <label class="type-radio">
+              <input type="radio" name="modal-override-type" value="redirect" />
+              <span>Redirect to URL</span>
+            </label>
+            <label class="type-radio">
+              <input type="radio" name="modal-override-type" value="fail" />
+              <span>Fail request</span>
+            </label>
+          </div>
+          <div id="modal-body-fields">
+            <label class="modal-field">
+              <span>Response body</span>
+              <select id="modal-mode">
+                <option value="text">Text</option>
+                <option value="file">Raw base64</option>
+              </select>
+              <textarea id="modal-body" rows="8" placeholder="Custom response body"></textarea>
+              <div class="modal-body-footer">
+                <button
+                  id="format-json-btn"
+                  type="button"
+                  class="modal-action-btn body-format-btn"
+                  style="display: none"
+                  title="Pretty-print the JSON response body"
+                >
+                  Format JSON
+                </button>
+              </div>
+              <div
+                id="modal-preview-container"
+                class="modal-preview-container"
+                style="display: none"
+              ></div>
+            </label>
+          </div>
+          <div id="modal-redirect-fields" style="display: none">
+            <label class="modal-field">
+              <span>Redirect URL (uses * for captured wildcards)</span>
+              <input
+                id="modal-redirect-url"
+                type="text"
+                placeholder="e.g. https://new-api.example.com/api/*"
+              />
+            </label>
+          </div>
+          <div id="modal-fail-fields" style="display: none">
+            <label class="modal-field">
+              <span>Fail reason</span>
+              <select id="modal-fail-reason">
+                <option value="Failed">Failed</option>
+                <option value="TimedOut">TimedOut</option>
+                <option value="ConnectionRefused">ConnectionRefused</option>
+                <option value="NameNotResolved">NameNotResolved</option>
+                <option value="InternetDisconnected">InternetDisconnected</option>
+              </select>
+            </label>
+          </div>
+          <div id="modal-advanced-fields">
+            <label class="modal-field" id="modal-request-headers-field">
+              <span>Override Request Headers (Key-Value or Raw)</span>
+              <textarea
+                id="modal-request-headers"
+                rows="2"
+                placeholder="Authorization: Bearer mock-token"
+              ></textarea>
+              <div id="modal-request-headers-table" class="modal-headers-table"></div>
+            </label>
+            <label class="modal-field" id="modal-status-field">
+              <span>Status (blank = keep original)</span>
+              <input id="modal-status" type="number" min="100" max="599" placeholder="e.g. 500" />
+            </label>
+            <label class="modal-field">
+              <span>Delay (ms)</span>
+              <input id="modal-delay" type="number" min="0" max="120000" placeholder="0" />
+            </label>
+            <label class="modal-field" id="modal-headers-field">
+              <span>Extra Response Headers (Key-Value or Raw)</span>
+              <textarea id="modal-headers" rows="3" placeholder="X-Custom: value"></textarea>
+              <div id="modal-response-headers-table" class="modal-headers-table"></div>
+            </label>
+          </div>
         </div>
-        <div id="modal-fail-fields" style="display: none">
-          <label class="modal-field">
-            <span>Fail reason</span>
-            <select id="modal-fail-reason">
-              <option value="Failed">Failed</option>
-              <option value="TimedOut">TimedOut</option>
-              <option value="ConnectionRefused">ConnectionRefused</option>
-              <option value="NameNotResolved">NameNotResolved</option>
-              <option value="InternetDisconnected">InternetDisconnected</option>
-            </select>
-          </label>
-        </div>
-        <div id="modal-advanced-fields">
-          <label class="modal-field" id="modal-request-headers-field">
-            <span>Override Request Headers (one "Header-Name: value" per line)</span>
-            <textarea
-              id="modal-request-headers"
-              rows="2"
-              placeholder="Authorization: Bearer mock-token"
-            ></textarea>
-          </label>
-          <label class="modal-field" id="modal-status-field">
-            <span>Status (blank = keep original)</span>
-            <input id="modal-status" type="number" min="100" max="599" placeholder="e.g. 500" />
-          </label>
-          <label class="modal-field">
-            <span>Delay (ms)</span>
-            <input id="modal-delay" type="number" min="0" max="120000" placeholder="0" />
-          </label>
-          <label class="modal-field" id="modal-headers-field">
-            <span>Extra Response Headers (one "Header-Name: value" per line)</span>
-            <textarea id="modal-headers" rows="3" placeholder="X-Custom: value"></textarea>
-          </label>
+        <footer class="modal-footer">
+          <div id="modal-feedback" class="modal-feedback" role="status" aria-live="polite"></div>
+          <button id="save-override">Save Override</button>
+        </footer>
+      </div>
+    </div>
+
+    <!-- cURL / Swagger Import Modal -->
+    <div id="curl-swagger-modal" class="modal" style="display: none">
+      <div class="modal-content">
+        <span id="curl-swagger-close" class="close">&times;</span>
+        <h3>Import Rules from cURL or OpenAPI / Swagger Spec</h3>
+        <label class="modal-field">
+          <span>Paste cURL command or OpenAPI/Swagger JSON/YAML spec:</span>
+          <textarea
+            id="curl-swagger-textarea"
+            rows="6"
+            placeholder='curl -X POST https://api.example.com/users -H "Authorization: Bearer token" -d &apos;{"name":"John"}&apos;&#10;&#10;Or paste Swagger/OpenAPI JSON content...'
+          ></textarea>
+        </label>
+        <div class="curl-swagger-file-row">
+          <span>Or choose file (.json, .yaml, .yml, .curl, .txt):</span>
+          <input id="curl-swagger-file-input" type="file" accept=".json,.yaml,.yml,.curl,.txt" />
         </div>
-        <button id="save-override">Save Override</button>
+        <button
+          id="curl-swagger-import-btn"
+          type="button"
+          class="btn btn-primary"
+          style="margin-top: 10px"
+        >
+          Import Rules
+        </button>
       </div>
     </div>
 
@@ -149,7 +220,7 @@ <h4 class="modal-title">
     </div>
 
     <div id="new-row" class="tab-content" style="display: none">
-      <input id="pattern" placeholder="URL contains (e.g. /api/data)" />
+      <input id="pattern" placeholder="URL pattern" />
       <input
         id="redirect-url"
         type="text"
@@ -159,8 +230,8 @@ <h4 class="modal-title">
         <option value="text">Text</option>
         <option value="file">Raw base64</option>
       </select>
-      <textarea id="body" placeholder="Response body (text)" rows="6"></textarea>
-      <button id="add">Add override</button>
+      <textarea id="body" rows="6" placeholder="Response body"></textarea>
+      <button id="add">Add Manual</button>
     </div>
 
     <div id="apis-section" class="tab-content" style="display: none">
@@ -197,6 +268,9 @@ <h4 class="modal-title">
       <div class="rules-io-row">
         <button id="export-rules-btn" type="button" class="rules-io-btn">Export</button>
         <button id="import-rules-btn" type="button" class="rules-io-btn">Import</button>
+        <button id="import-curl-swagger-btn" type="button" class="rules-io-btn">
+          cURL / Swagger
+        </button>
         <input
           id="import-rules-input"
           type="file"
@@ -230,6 +304,23 @@ <h4 class="modal-title">
 
     <script src="dist/utils.js"></script>
     <script src="dist/shared.js"></script>
+    <script src="dist/ui/types.js"></script>
+    <script src="dist/ui/view-utils.js"></script>
+    <script src="dist/ui/primitives.js"></script>
+    <script src="dist/ui/notifications.js"></script>
+    <script src="dist/ui/dialogs.js"></script>
+    <script src="dist/ui/persistence.js"></script>
+    <script src="dist/ui/attach-status.js"></script>
+    <script src="dist/ui/curl.js"></script>
+    <script src="dist/ui/swagger.js"></script>
+    <script src="dist/ui/headers-editor.js"></script>
+    <script src="dist/ui/modal.js"></script>
+    <script src="dist/ui/rules-list.js"></script>
+    <script src="dist/ui/api-list.js"></script>
+    <script src="dist/ui/profiles.js"></script>
+    <script src="dist/ui/modal-controller.js"></script>
+    <script src="dist/ui/rules-io-controller.js"></script>
+    <script src="dist/ui/toolbar-controller.js"></script>
     <script src="dist/ui.js"></script>
     <script src="dist/panel.js"></script>
   </body>
diff --git a/popup.html b/popup.html
index aef004f..67c40a5 100644
--- a/popup.html
+++ b/popup.html
@@ -9,8 +9,35 @@
   <body class="popup-body">
     <div class="header-row">
       <h2>Network Overrides API</h2>
-      <button id="info-btn" type="button" class="header-btn info-btn" title="User Guide">ⓘ</button>
-      <button id="refresh-apis" type="button" class="header-btn" title="Refresh">↻</button>
+      <div class="header-actions" aria-label="Popup actions">
+        <button
+          id="refresh-apis"
+          type="button"
+          class="header-btn"
+          title="Refresh captured requests"
+          aria-label="Refresh captured requests"
+        >
+          <svg viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M20 6v5h-5"></path>
+            <path d="M4 18v-5h5"></path>
+            <path d="M6.1 9a7 7 0 0 1 11.5-2.6L20 9"></path>
+            <path d="M17.9 15a7 7 0 0 1-11.5 2.6L4 15"></path>
+          </svg>
+        </button>
+        <button
+          id="info-btn"
+          type="button"
+          class="header-btn info-btn"
+          title="Open user guide"
+          aria-label="Open user guide"
+        >
+          <svg viewBox="0 0 24 24" aria-hidden="true">
+            <circle cx="12" cy="12" r="9"></circle>
+            <path d="M12 11v6"></path>
+            <path d="M12 7.5h.01"></path>
+          </svg>
+        </button>
+      </div>
     </div>
 
     <div class="switch-container">
@@ -30,115 +57,159 @@ <h2>Network Overrides API</h2>
     </p>
 
     <div id="override-modal" class="modal" style="display: none">
-      <div class="modal-content">
-        <span class="close">&times;</span>
-        <h4 class="modal-title">
-          <span id="modal-title-text"></span>
-          <span id="modal-url"></span>
-        </h4>
-        <label class="modal-field">
-          <span>Pattern</span>
-          <input id="modal-pattern" type="text" />
-        </label>
-        <label class="modal-field">
-          <span>Method</span>
-          <select id="modal-method">
-            <option value="ANY">Any</option>
-            <option value="GET">GET</option>
-            <option value="POST">POST</option>
-            <option value="PUT">PUT</option>
-            <option value="PATCH">PATCH</option>
-            <option value="DELETE">DELETE</option>
-          </select>
-        </label>
-        <label class="modal-field">
-          <span>GraphQL Operation (optional)</span>
-          <input
-            id="modal-graphql-op"
-            type="text"
-            placeholder="e.g. GetUserProfile or query name"
-          />
-        </label>
-        <div class="override-type-selector">
-          <label class="type-radio">
-            <input type="radio" name="modal-override-type" value="body" checked />
-            <span>Override body</span>
-          </label>
-          <label class="type-radio">
-            <input type="radio" name="modal-override-type" value="redirect" />
-            <span>Redirect to URL</span>
-          </label>
-          <label class="type-radio">
-            <input type="radio" name="modal-override-type" value="fail" />
-            <span>Fail request</span>
+      <div class="modal-content modal-content--override">
+        <header class="modal-header">
+          <h4 class="modal-title">
+            <span id="modal-title-text"></span>
+            <span id="modal-url"></span>
+          </h4>
+          <button class="close modal-close" type="button" aria-label="Close override editor">
+            &times;
+          </button>
+        </header>
+        <div class="modal-scroll-body">
+          <label class="modal-field">
+            <span>Pattern</span>
+            <input id="modal-pattern" type="text" />
           </label>
-        </div>
-        <div id="modal-body-fields">
           <label class="modal-field">
-            <span>Response body</span>
-            <select id="modal-mode">
-              <option value="text">Text</option>
-              <option value="file">Raw base64</option>
+            <span>Method</span>
+            <select id="modal-method">
+              <option value="ANY">Any</option>
+              <option value="GET">GET</option>
+              <option value="POST">POST</option>
+              <option value="PUT">PUT</option>
+              <option value="PATCH">PATCH</option>
+              <option value="DELETE">DELETE</option>
             </select>
-            <textarea id="modal-body" rows="8" placeholder="Custom response body"></textarea>
-            <div class="modal-body-footer">
-              <span id="body-type-badge" class="body-type-badge">text</span>
-              <button id="format-json-btn" type="button" class="modal-action-btn">
-                Format JSON
-              </button>
-            </div>
-            <div
-              id="modal-preview-container"
-              class="modal-preview-container"
-              style="display: none"
-            ></div>
           </label>
-        </div>
-        <div id="modal-redirect-fields" style="display: none">
           <label class="modal-field">
-            <span>Redirect URL (uses * for captured wildcards)</span>
+            <span>GraphQL Operation (optional)</span>
             <input
-              id="modal-redirect-url"
+              id="modal-graphql-op"
               type="text"
-              placeholder="e.g. https://new-api.example.com/api/*"
+              placeholder="e.g. GetUserProfile or query name"
             />
           </label>
+          <div class="override-type-selector">
+            <label class="type-radio">
+              <input type="radio" name="modal-override-type" value="body" checked />
+              <span>Override body</span>
+            </label>
+            <label class="type-radio">
+              <input type="radio" name="modal-override-type" value="redirect" />
+              <span>Redirect to URL</span>
+            </label>
+            <label class="type-radio">
+              <input type="radio" name="modal-override-type" value="fail" />
+              <span>Fail request</span>
+            </label>
+          </div>
+          <div id="modal-body-fields">
+            <label class="modal-field">
+              <span>Response body</span>
+              <select id="modal-mode">
+                <option value="text">Text</option>
+                <option value="file">Raw base64</option>
+              </select>
+              <textarea id="modal-body" rows="8" placeholder="Custom response body"></textarea>
+              <div class="modal-body-footer">
+                <button
+                  id="format-json-btn"
+                  type="button"
+                  class="modal-action-btn body-format-btn"
+                  style="display: none"
+                  title="Pretty-print the JSON response body"
+                >
+                  Format JSON
+                </button>
+              </div>
+              <div
+                id="modal-preview-container"
+                class="modal-preview-container"
+                style="display: none"
+              ></div>
+            </label>
+          </div>
+          <div id="modal-redirect-fields" style="display: none">
+            <label class="modal-field">
+              <span>Redirect URL (uses * for captured wildcards)</span>
+              <input
+                id="modal-redirect-url"
+                type="text"
+                placeholder="e.g. https://new-api.example.com/api/*"
+              />
+            </label>
+          </div>
+          <div id="modal-fail-fields" style="display: none">
+            <label class="modal-field">
+              <span>Fail reason</span>
+              <select id="modal-fail-reason">
+                <option value="Failed">Failed</option>
+                <option value="TimedOut">TimedOut</option>
+                <option value="ConnectionRefused">ConnectionRefused</option>
+                <option value="NameNotResolved">NameNotResolved</option>
+                <option value="InternetDisconnected">InternetDisconnected</option>
+              </select>
+            </label>
+          </div>
+          <div id="modal-advanced-fields">
+            <label class="modal-field" id="modal-request-headers-field">
+              <span>Override Request Headers (Key-Value or Raw)</span>
+              <textarea
+                id="modal-request-headers"
+                rows="2"
+                placeholder="Authorization: Bearer mock-token"
+              ></textarea>
+              <div id="modal-request-headers-table" class="modal-headers-table"></div>
+            </label>
+            <label class="modal-field" id="modal-status-field">
+              <span>Status (blank = keep original)</span>
+              <input id="modal-status" type="number" min="100" max="599" placeholder="e.g. 500" />
+            </label>
+            <label class="modal-field">
+              <span>Delay (ms)</span>
+              <input id="modal-delay" type="number" min="0" max="120000" placeholder="0" />
+            </label>
+            <label class="modal-field" id="modal-headers-field">
+              <span>Extra Response Headers (Key-Value or Raw)</span>
+              <textarea id="modal-headers" rows="3" placeholder="X-Custom: value"></textarea>
+              <div id="modal-response-headers-table" class="modal-headers-table"></div>
+            </label>
+          </div>
         </div>
-        <div id="modal-fail-fields" style="display: none">
-          <label class="modal-field">
-            <span>Fail reason</span>
-            <select id="modal-fail-reason">
-              <option value="Failed">Failed</option>
-              <option value="TimedOut">TimedOut</option>
-              <option value="ConnectionRefused">ConnectionRefused</option>
-              <option value="NameNotResolved">NameNotResolved</option>
-              <option value="InternetDisconnected">InternetDisconnected</option>
-            </select>
-          </label>
-        </div>
-        <div id="modal-advanced-fields">
-          <label class="modal-field" id="modal-request-headers-field">
-            <span>Override Request Headers (one "Header-Name: value" per line)</span>
-            <textarea
-              id="modal-request-headers"
-              rows="2"
-              placeholder="Authorization: Bearer mock-token"
-            ></textarea>
-          </label>
-          <label class="modal-field" id="modal-status-field">
-            <span>Status (blank = keep original)</span>
-            <input id="modal-status" type="number" min="100" max="599" placeholder="e.g. 500" />
-          </label>
-          <label class="modal-field">
-            <span>Delay (ms)</span>
-            <input id="modal-delay" type="number" min="0" max="120000" placeholder="0" />
-          </label>
-          <label class="modal-field" id="modal-headers-field">
-            <span>Extra Response Headers (one "Header-Name: value" per line)</span>
-            <textarea id="modal-headers" rows="3" placeholder="X-Custom: value"></textarea>
-          </label>
+        <footer class="modal-footer">
+          <div id="modal-feedback" class="modal-feedback" role="status" aria-live="polite"></div>
+          <button id="save-override">Save Override</button>
+        </footer>
+      </div>
+    </div>
+
+    <!-- cURL / Swagger Import Modal -->
+    <div id="curl-swagger-modal" class="modal" style="display: none">
+      <div class="modal-content">
+        <span id="curl-swagger-close" class="close">&times;</span>
+        <h3>Import Rules from cURL or OpenAPI / Swagger Spec</h3>
+        <label class="modal-field">
+          <span>Paste cURL command or OpenAPI/Swagger JSON/YAML spec:</span>
+          <textarea
+            id="curl-swagger-textarea"
+            rows="6"
+            placeholder='curl -X POST https://api.example.com/users -H "Authorization: Bearer token" -d &apos;{"name":"John"}&apos;&#10;&#10;Or paste Swagger/OpenAPI JSON content...'
+          ></textarea>
+        </label>
+        <div class="curl-swagger-file-row">
+          <span>Or choose file (.json, .yaml, .yml, .curl, .txt):</span>
+          <input id="curl-swagger-file-input" type="file" accept=".json,.yaml,.yml,.curl,.txt" />
         </div>
-        <button id="save-override">Save Override</button>
+        <button
+          id="curl-swagger-import-btn"
+          type="button"
+          class="btn btn-primary"
+          style="margin-top: 10px"
+        >
+          Import Rules
+        </button>
       </div>
     </div>
 
@@ -197,6 +268,9 @@ <h4 class="modal-title">
       <div class="rules-io-row">
         <button id="export-rules-btn" type="button" class="rules-io-btn">Export</button>
         <button id="import-rules-btn" type="button" class="rules-io-btn">Import</button>
+        <button id="import-curl-swagger-btn" type="button" class="rules-io-btn">
+          cURL / Swagger
+        </button>
         <input
           id="import-rules-input"
           type="file"
@@ -230,6 +304,23 @@ <h4 class="modal-title">
 
     <script src="dist/utils.js"></script>
     <script src="dist/shared.js"></script>
+    <script src="dist/ui/types.js"></script>
+    <script src="dist/ui/view-utils.js"></script>
+    <script src="dist/ui/primitives.js"></script>
+    <script src="dist/ui/notifications.js"></script>
+    <script src="dist/ui/dialogs.js"></script>
+    <script src="dist/ui/persistence.js"></script>
+    <script src="dist/ui/attach-status.js"></script>
+    <script src="dist/ui/curl.js"></script>
+    <script src="dist/ui/swagger.js"></script>
+    <script src="dist/ui/headers-editor.js"></script>
+    <script src="dist/ui/modal.js"></script>
+    <script src="dist/ui/rules-list.js"></script>
+    <script src="dist/ui/api-list.js"></script>
+    <script src="dist/ui/profiles.js"></script>
+    <script src="dist/ui/modal-controller.js"></script>
+    <script src="dist/ui/rules-io-controller.js"></script>
+    <script src="dist/ui/toolbar-controller.js"></script>
     <script src="dist/ui.js"></script>
     <script src="dist/popup.js"></script>
   </body>
diff --git a/scripts/smoke.mjs b/scripts/smoke.mjs
index 8c20431..4f2480a 100644
--- a/scripts/smoke.mjs
+++ b/scripts/smoke.mjs
@@ -53,6 +53,9 @@ try {
   const site = context.pages()[0] ?? (await context.newPage());
   await site.goto(`http://127.0.0.1:${PORT}/`);
   const popup = await context.newPage();
+  // Approximate Chrome's action-popup viewport instead of testing the popup
+  // with the much larger regular-tab viewport from the browser context.
+  await popup.setViewportSize({ width: 400, height: 480 });
   await popup.goto(`chrome-extension://${extId}/popup.html`);
   await site.bringToFront(); // popup's getActiveTab() must resolve to the site tab
   // The popup subscribed its API-stream port while it was itself the active tab;
@@ -98,8 +101,38 @@ try {
   if (captured) {
     await apiItem.click();
     await popup.waitForSelector('#override-modal', { state: 'visible' });
+    const modalLayout = await popup.evaluate(() => {
+      const content = document.querySelector('#override-modal .modal-content--override');
+      const body = document.querySelector('#override-modal .modal-scroll-body');
+      const footer = document.querySelector('#override-modal .modal-footer');
+      const contentRect = content.getBoundingClientRect();
+      const footerRect = footer.getBoundingClientRect();
+      return {
+        withinViewport: contentRect.top >= 0 && contentRect.bottom <= window.innerHeight,
+        footerVisible: footerRect.top >= contentRect.top && footerRect.bottom <= contentRect.bottom,
+        bodyOverflow: getComputedStyle(body).overflowY,
+      };
+    });
+    report(
+      'override modal stays within the popup viewport',
+      modalLayout.withinViewport,
+      JSON.stringify(modalLayout)
+    );
+    report(
+      'override modal keeps the Save footer outside the scroll body',
+      modalLayout.footerVisible && modalLayout.bodyOverflow === 'auto',
+      JSON.stringify(modalLayout)
+    );
     await popup.fill('#modal-body', '{"mocked":true}');
     await popup.click('#save-override');
+    await popup.waitForSelector('#override-modal', { state: 'hidden' });
+    const saveNotice =
+      (await popup.locator('.notification-toast--success').last().textContent())?.trim() || '';
+    report(
+      'successful Save confirms storage and background application',
+      /saved and applied to the active tab/i.test(saveNotice),
+      saveNotice
+    );
     await popup.waitForTimeout(1000);
     const mocked = await site.evaluate(
       u => fetch(u).then(r => r.text()),
@@ -123,6 +156,7 @@ try {
     // compact so the later worker-restart check's exact body match still holds.
     await popup.fill('#modal-body', '{"mocked":true}');
     await popup.click('#save-override');
+    await popup.waitForSelector('#override-modal', { state: 'hidden' });
     await popup.waitForTimeout(1000);
     const mockedStatus = await site.evaluate(
       u => fetch(u).then(r => r.status),
@@ -135,11 +169,16 @@ try {
     );
 
     // ---- 3c. fail rule: a fresh rule makes fetch reject at the network layer
+    if (await popup.locator('#override-modal').isVisible()) {
+      await popup.click('#override-modal .modal-close');
+      await popup.waitForSelector('#override-modal', { state: 'hidden' });
+    }
     await popup.click('#add-api-btn');
     await popup.waitForSelector('#override-modal', { state: 'visible' });
     await popup.fill('#modal-pattern', 'api/fail');
     await popup.check('input[name="modal-override-type"][value="fail"]');
     await popup.click('#save-override');
+    await popup.waitForSelector('#override-modal', { state: 'hidden' });
     await popup.waitForTimeout(1000);
     const failOutcome = await site.evaluate(
       u =>
@@ -212,6 +251,10 @@ try {
     otherOrigin === '{"real":true}',
     otherOrigin
   );
+  if (await popup.locator('#override-modal').isVisible()) {
+    await popup.click('#override-modal .modal-close');
+    await popup.waitForSelector('#override-modal', { state: 'hidden' });
+  }
   await popup.click('#refresh-apis');
   await popup.waitForTimeout(1500);
   const staleItems = await popup.locator('li.api-item', { hasText: '127.0.0.1' }).count();
diff --git a/src/background.ts b/src/background.ts
index b9be85b..5bd9ed5 100644
--- a/src/background.ts
+++ b/src/background.ts
@@ -2,783 +2,16 @@
 /// <reference path="./shared.ts" />
 /// <reference path="./utils.ts" />
 /// <reference path="./tab-state.ts" />
-declare const Buffer: any;
 declare function importScripts(...urls: string[]): void;
 
-// Service workers can't use <script> tags like the UI pages do, so pull in
-// the shared pattern-matching logic the same way at runtime instead of
-// duplicating it here.
-importScripts('utils.js', 'tab-state.js');
-
-function stringToBase64Local(str: string): string {
-  if (typeof Buffer !== 'undefined') {
-    try {
-      return Buffer.from(str, 'utf8').toString('base64');
-    } catch {}
-  }
-  const bytes = new TextEncoder().encode(str);
-  let binary = '';
-  const CHUNK = 0x8000;
-  for (let i = 0; i < bytes.length; i += CHUNK) {
-    binary += String.fromCharCode.apply(null, Array.from(bytes.subarray(i, i + CHUNK)));
-  }
-  return btoa(binary);
-}
-function normalizeBodyLocal(body: string, isBase64: boolean): string {
-  try {
-    if (isBase64) {
-      if (typeof Buffer !== 'undefined') {
-        return Buffer.from(body, 'base64').toString('utf8');
-      }
-      const decoded = atob(body);
-      return decodeURIComponent(escape(decoded));
-    }
-    return body;
-  } catch {
-    return body;
-  }
-}
-
-namespace NetworkOverridesBackground {
-  import TabState = NetworkOverridesTabState;
-
-  type OverrideRule = NetworkOverridesShared.OverrideRule;
-  type FetchHeader = NetworkOverridesShared.FetchHeader;
-  type ApiEntry = NetworkOverridesShared.ApiEntry;
-
-  function toFetchHeaders(headers: Record<string, unknown> | undefined): FetchHeader[] {
-    if (!headers) return [];
-    return Object.entries(headers).map(([name, value]) => ({ name, value: String(value) }));
-  }
-
-  let capturedBodyTypes: string[] = ['xhr', 'fetch'];
-  try {
-    chrome.storage.local.get(['capturedBodyTypes'], (data: any) => {
-      if (Array.isArray(data?.capturedBodyTypes) && data.capturedBodyTypes.length > 0) {
-        capturedBodyTypes = data.capturedBodyTypes.map((t: any) => String(t).toLowerCase());
-      }
-    });
-  } catch {}
-
-  export function matchPattern(pattern: string, url: string): string[] | null {
-    return NetworkOverridesUtils.matchPattern(pattern, url);
-  }
-
-  export function patternMatches(pattern: string, url: string): boolean {
-    return NetworkOverridesUtils.patternMatches(pattern, url);
-  }
-
-  export function substituteWildcards(template: string, captures: string[]): string {
-    return NetworkOverridesUtils.substituteWildcards(template, captures);
-  }
-
-  export function normalizeBody(body: string, isBase64: boolean): string {
-    return normalizeBodyLocal(body, isBase64);
-  }
-
-  function recordApi(tabId: number, entry: ApiEntry): void {
-    TabState.setRecentApi(tabId, entry);
-    scheduleApiBroadcast(tabId, entry);
-  }
-
-  function scheduleApiBroadcast(tabId: number, entry: ApiEntry): void {
-    const rt = TabState.runtime(tabId);
-    if (rt.subscriberPorts.size === 0) return;
-    rt.broadcastQueue.set(entry.url, entry);
-    if (rt.broadcastTimer) return;
-    rt.broadcastTimer = setTimeout(() => {
-      rt.broadcastTimer = null;
-      const delta = Array.from(rt.broadcastQueue.values());
-      rt.broadcastQueue.clear();
-      if (delta.length === 0 || rt.subscriberPorts.size === 0) return;
-      rt.subscriberPorts.forEach(port => {
-        try {
-          port.postMessage({ type: 'apisDelta', apis: delta });
-        } catch {}
-      });
-    }, 150);
-  }
-
-  function storeResponseBody(
-    tabId: number,
-    url: string,
-    requestId: string,
-    callback: () => void
-  ): void {
-    chrome.debugger.sendCommand(
-      { tabId },
-      'Fetch.getResponseBody',
-      { requestId },
-      (response: { body?: string; base64Encoded?: boolean } | undefined) => {
-        if (!chrome.runtime.lastError && response && typeof response.body === 'string') {
-          const rawBody = normalizeBody(response.body, response.base64Encoded ?? false);
-          TabState.setRecentApiBody(tabId, url, rawBody);
-        }
-        callback();
-      }
-    );
-  }
-
-  // Strongly-typed messaging surface
-  type Msg =
-    | {
-        type: 'update';
-        tabId: number;
-        enabled: boolean;
-        overrides?: OverrideRule[];
-        tabUrl?: string;
-      }
-    | { type: 'getApis'; tabId: number }
-    | { type: 'getApiData'; tabId: number; url?: string }
-    | { type: 'clearApis'; tabId: number }
-    | { type: 'getStatus'; tabId: number }
-    | { type: 'updateCapturedBodyTypes'; types: string[] };
-
-  chrome.runtime.onMessage.addListener((msg: Msg, sender, sendResponse) => {
-    if (!msg || typeof msg !== 'object' || typeof msg.type !== 'string') {
-      return;
-    }
-    switch (msg.type) {
-      case 'update': {
-        const tabId = Number(msg.tabId);
-        if (Number.isNaN(tabId)) return;
-
-        const enabled = Boolean(msg.enabled);
-        const overrides = Array.isArray(msg.overrides) ? msg.overrides : [];
-        const tabUrl = typeof msg.tabUrl === 'string' ? msg.tabUrl : '';
-
-        const state = TabState.ensure(tabId);
-        state.enabled = enabled;
-        state.overrides = overrides;
-        if (tabUrl) state.origin = NetworkOverridesUtils.getOrigin(tabUrl);
-        TabState.schedulePersist(tabId);
-        if (enabled) {
-          attachDebugger(tabId).catch(console.error);
-        } else {
-          detachDebugger(tabId).catch(console.error);
-        }
-        break;
-      }
-      case 'getApis': {
-        const tabId = Number(msg.tabId);
-        if (Number.isNaN(tabId)) return;
-        const state = TabState.get(tabId);
-        if (state && typeof sendResponse === 'function') {
-          sendResponse({ type: 'apisResponse', apis: Array.from(state.recentApis.values()) });
-          return true;
-        }
-
-        void Promise.resolve(chrome.storage.session.get(TabState.stateKey(tabId))).then(
-          (data: any) => {
-            const snapshot = data?.[TabState.stateKey(tabId)];
-            const apis = snapshot?.recentApis ? Object.values(snapshot.recentApis) : [];
-            if (typeof sendResponse === 'function') {
-              sendResponse({ type: 'apisResponse', apis });
-            }
-          }
-        );
-        return true;
-      }
-      case 'clearApis': {
-        const clearTabId = Number(msg.tabId);
-        if (!Number.isNaN(clearTabId)) {
-          const state = TabState.get(clearTabId);
-          if (state) {
-            state.recentApis.clear();
-            state.recentApiBodies.clear();
-            TabState.schedulePersist(clearTabId);
-          }
-        }
-        if (typeof sendResponse === 'function') {
-          sendResponse({ type: 'clearApisResponse', success: true });
-        }
-        return;
-      }
-      case 'getStatus': {
-        const tabId = Number(msg.tabId);
-        if (Number.isNaN(tabId)) return;
-        const respond = () => {
-          const state = TabState.get(tabId);
-          if (typeof sendResponse === 'function') {
-            const payload: { type: string; attached: boolean; error?: string } = {
-              type: 'statusResponse',
-              attached: !!state?.attached,
-            };
-            if (state?.attachError) payload.error = state.attachError;
-            sendResponse(payload);
-          }
-        };
-        // Answering mid-attach would report a stale { attached: false } with no
-        // error; wait for the in-flight attempt so the UI sees the real outcome.
-        const pending = TabState.runtime(tabId).attachPromise;
-        if (pending) {
-          void pending.catch(() => {}).then(respond);
-        } else {
-          respond();
-        }
-        return true;
-      }
-      case 'getApiData': {
-        const tabId = Number(msg.tabId);
-        const url = String(msg.url || '');
-        if (Number.isNaN(tabId) || !url) return;
-
-        const state = TabState.get(tabId);
-        if (state?.recentApiBodies.has(url)) {
-          if (typeof sendResponse === 'function') {
-            sendResponse({
-              type: 'apiDataResponse',
-              url,
-              body: state.recentApiBodies.get(url) || '',
-            });
-          }
-          return true;
-        }
-
-        void Promise.resolve(chrome.storage.session.get(TabState.stateKey(tabId))).then(
-          (data: any) => {
-            const snapshot = data?.[TabState.stateKey(tabId)];
-            const body = snapshot?.recentApiBodies?.[url] ?? '';
-            if (typeof sendResponse === 'function') {
-              sendResponse({ type: 'apiDataResponse', url, body });
-            }
-          }
-        );
-        return true;
-      }
-      case 'updateCapturedBodyTypes': {
-        if (Array.isArray((msg as any).types)) {
-          capturedBodyTypes = (msg as any).types.map((t: any) => String(t).toLowerCase());
-        }
-        if (typeof sendResponse === 'function') {
-          sendResponse({ success: true });
-        }
-        return;
-      }
-      default:
-        if (typeof sendResponse === 'function') {
-          sendResponse({ success: true });
-        }
-        break;
-    }
-  });
-
-  chrome.runtime.onConnect.addListener(port => {
-    if (!port || port.name !== 'network-overrides-ui') return;
-
-    let subscribedTabId: number | null = null;
-
-    function unsubscribe(): void {
-      if (subscribedTabId === null) return;
-      TabState.runtime(subscribedTabId).subscriberPorts.delete(port);
-      subscribedTabId = null;
-    }
-
-    port.onDisconnect.addListener(() => unsubscribe());
-
-    port.onMessage.addListener((raw: any) => {
-      if (!raw || typeof raw !== 'object') return;
-      if (raw.type !== 'subscribe') return;
-
-      const tabId = Number(raw.tabId);
-      if (Number.isNaN(tabId)) return;
-
-      if (subscribedTabId !== null && subscribedTabId !== tabId) {
-        unsubscribe();
-      }
-
-      subscribedTabId = tabId;
-      TabState.runtime(tabId).subscriberPorts.add(port);
-
-      const state = TabState.get(tabId);
-      const apis = state ? Array.from(state.recentApis.values()) : [];
-      try {
-        port.postMessage({ type: 'apis', apis });
-      } catch {}
-    });
-  });
-
-  async function enableInterception(tabId: number): Promise<void> {
-    await sendDebugCommand(tabId, 'Network.enable', {});
-    await sendDebugCommand(tabId, 'Fetch.enable', {
-      patterns: [{ requestStage: 'Request' }, { requestStage: 'Response' }],
-    });
-  }
-
-  function sendDebugCommand(tabId: number, method: string, params: object): Promise<void> {
-    return new Promise((resolve, reject) => {
-      chrome.debugger.sendCommand({ tabId }, method, params, () => {
-        if (chrome.runtime.lastError) {
-          reject(new Error(chrome.runtime.lastError.message));
-        } else {
-          resolve();
-        }
-      });
-    });
-  }
-
-  function broadcastStatus(tabId: number): void {
-    const state = TabState.get(tabId);
-    if (!state) return;
-    const payload: { type: string; tabId: number; attached: boolean; error?: string } = {
-      type: 'status',
-      tabId,
-      attached: state.attached,
-    };
-    if (state.attachError) payload.error = state.attachError;
-    TabState.runtime(tabId).subscriberPorts.forEach(port => {
-      try {
-        port.postMessage(payload);
-      } catch {}
-    });
-  }
-
-  function attachDebugger(tabId: number): Promise<void> {
-    const state = TabState.ensure(tabId);
-    const rt = TabState.runtime(tabId);
-    if (state.attached) return Promise.resolve();
-    if (rt.attachPromise) return rt.attachPromise;
-
-    const attempt = new Promise<void>((resolve, reject) => {
-      try {
-        chrome.debugger.attach({ tabId }, '1.3', async () => {
-          if (chrome.runtime.lastError) {
-            const message = chrome.runtime.lastError.message || 'attach failed';
-            // Debugger sessions belong to the extension, not the worker
-            // instance, so our own session survives a worker restart and makes
-            // this attach fail. If commands still work, adopt that session;
-            // if they fail too, a foreign debugger (e.g. DevTools) owns the tab.
-            if (/already attached/i.test(message)) {
-              try {
-                await enableInterception(tabId);
-                return resolve();
-              } catch {
-                return reject(new Error(message));
-              }
-            }
-            return reject(new Error(message));
-          }
-          try {
-            await enableInterception(tabId);
-            resolve();
-          } catch (err) {
-            chrome.debugger.detach({ tabId }, () => {});
-            reject(err instanceof Error ? err : new Error(String(err)));
-          }
-        });
-      } catch (error) {
-        reject(error instanceof Error ? error : new Error(String(error)));
-      }
-    })
-      .then(() => {
-        state.attached = true;
-        state.attachError = undefined;
-        TabState.schedulePersist(tabId);
-        broadcastStatus(tabId);
-      })
-      .catch(error => {
-        state.attached = false;
-        state.attachError = error instanceof Error ? error.message : String(error);
-        state.enabled = false;
-        TabState.schedulePersist(tabId);
-        broadcastStatus(tabId);
-        throw error;
-      })
-      .finally(() => {
-        rt.attachPromise = null;
-      });
-
-    rt.attachPromise = attempt;
-    return attempt;
-  }
-
-  async function detachDebugger(tabId: number): Promise<void> {
-    if (!TabState.get(tabId)?.attached) return;
-
-    return new Promise(resolve => {
-      try {
-        chrome.debugger.sendCommand({ tabId }, 'Fetch.disable', {}, () => {
-          chrome.debugger.detach({ tabId }, () => {
-            TabState.dispose(tabId);
-            resolve();
-          });
-        });
-      } catch (error) {
-        console.error(error);
-        resolve();
-      }
-    });
-  }
-
-  chrome.tabs.onRemoved.addListener(tabId => {
-    if (TabState.get(tabId)?.attached) {
-      detachDebugger(tabId).catch(console.error);
-    }
-    TabState.dispose(tabId);
-  });
-
-  chrome.tabs.onUpdated.addListener((tabId, changeInfo) => {
-    if (typeof changeInfo.url !== 'string') return;
-    const state = TabState.get(tabId);
-    if (!state) return;
-    const newOrigin = NetworkOverridesUtils.getOrigin(changeInfo.url);
-    if (!newOrigin || newOrigin === state.origin) return;
-
-    state.origin = newOrigin;
-    state.recentApis.clear();
-    state.recentApiBodies.clear();
-    const overridesKey = `overrides_${newOrigin}`;
-    chrome.storage.local.get([overridesKey], (data: any) => {
-      if (state.origin !== newOrigin) return;
-      const saved = data?.[overridesKey];
-      state.overrides = Array.isArray(saved) ? saved : [];
-      TabState.schedulePersist(tabId);
-    });
-  });
-
-  chrome.debugger.onDetach.addListener((source, reason) => {
-    const tabId = source.tabId;
-    if (typeof tabId !== 'number') return;
-    // The tab is still open (infobar Cancel, DevTools takeover, browser-side
-    // teardown) — keep captured data and rules, only record that interception
-    // stopped. enabled goes off so a worker restart honors the cancellation.
-    const state = TabState.get(tabId);
-    if (!state) return;
-    state.attached = false;
-    state.enabled = false;
-    state.attachError = `Debugger detached (${reason || 'unknown reason'})`;
-    TabState.schedulePersist(tabId);
-    broadcastStatus(tabId);
-  });
-
-  chrome.debugger.onEvent.addListener((source, method, params: any) => {
-    const tabId = source.tabId;
-    if (typeof tabId !== 'number') return;
-
-    if (method === 'Fetch.requestPaused') {
-      handleRequestPaused(tabId, params);
-      return;
-    }
-
-    if (!TabState.get(tabId)?.attached) return;
-
-    if (method === 'Network.requestWillBeSent') {
-      const requestUrlInner = params?.request?.url;
-      const requestType = params?.type || 'other';
-      if (typeof requestUrlInner === 'string') {
-        recordApi(tabId, {
-          url: requestUrlInner,
-          type: requestType,
-          method: params.request.method,
-          headers: toFetchHeaders(params.request.headers),
-          postData: params.request.postData,
-        });
-      }
-      return;
-    }
-  });
-
-  function findOverride(
-    url: string,
-    method: string | undefined,
-    overrides: OverrideRule[],
-    postData?: string
-  ): { override: OverrideRule; captures: string[] } | null {
-    for (const test of overrides) {
-      if (test.enabled === false) continue;
-      if (!NetworkOverridesUtils.matchesMethod(test.method, method)) continue;
-      if (!NetworkOverridesUtils.matchesGraphQLOperation(test.graphqlOperation, postData)) continue;
-      const captures = matchPattern(test.pattern, url);
-      if (captures !== null) {
-        return { override: test, captures };
-      }
-    }
-    return null;
-  }
-
-  function handleRequestPaused(tabId: number, params: any): void {
-    const isRequestStage = typeof params.responseStatusCode !== 'number';
-    const url = params.request?.url || '';
-    const state = TabState.get(tabId);
-
-    const proceed = () => {
-      chrome.debugger.sendCommand(
-        { tabId },
-        'Fetch.continueRequest',
-        { requestId: params.requestId },
-        () => {
-          if (chrome.runtime.lastError) {
-            // InterceptionId may already be invalid if request completed; ignore
-          }
-        }
-      );
-    };
-
-    if (!state || !state.attached || !state.enabled) {
-      proceed();
-      return;
-    }
-
-    if (isRequestStage) {
-      recordApi(tabId, {
-        url,
-        type: params.resourceType || 'other',
-        method: params.request?.method,
-        headers: toFetchHeaders(params.request?.headers),
-        postData: params.request?.postData,
-      });
-
-      try {
-        const postData = params.request?.postData || state.recentApis.get(url)?.postData;
-        const match = findOverride(url, params.request?.method, state.overrides, postData);
-        if (match && match.override.failReason) {
-          const errorReason = match.override.failReason;
-          const fail = () => {
-            chrome.debugger.sendCommand(
-              { tabId },
-              'Fetch.failRequest',
-              { requestId: params.requestId, errorReason },
-              () => {
-                if (chrome.runtime.lastError) {
-                  // The request may already be gone; nothing to recover.
-                }
-              }
-            );
-          };
-          const delayMs = typeof match.override.delayMs === 'number' ? match.override.delayMs : 0;
-          if (delayMs > 0) {
-            setTimeout(fail, delayMs);
-          } else {
-            fail();
-          }
-          return;
-        }
-        if (match && match.override.redirectUrl) {
-          const newUrl = substituteWildcards(match.override.redirectUrl, match.captures);
-          if (newUrl.includes('*')) {
-            console.error('[NetworkOverrides] Unsubstituted * in redirect URL:', newUrl);
-            proceed();
-            return;
-          }
-          console.log('[NetworkOverrides] Redirect:', url, '→', newUrl);
-          chrome.debugger.sendCommand(
-            { tabId },
-            'Fetch.continueRequest',
-            { requestId: params.requestId, url: newUrl },
-            () => {
-              if (chrome.runtime.lastError) {
-                console.error('continueRequest redirect failed:', chrome.runtime.lastError.message);
-                proceed();
-              }
-            }
-          );
-          return;
-        }
-        if (
-          match &&
-          Array.isArray(match.override.requestHeaders) &&
-          match.override.requestHeaders.length > 0
-        ) {
-          const originalHeaders = toFetchHeaders(params.request?.headers);
-          const reqHeaderMap = new Map<string, string>();
-          for (const h of originalHeaders) {
-            reqHeaderMap.set(h.name.toLowerCase(), h.value);
-          }
-          for (const h of match.override.requestHeaders) {
-            if (h.name && h.name.trim()) {
-              reqHeaderMap.set(h.name.trim().toLowerCase(), h.value);
-            }
-          }
-          const updatedHeaders = Array.from(reqHeaderMap.entries()).map(([name, value]) => ({
-            name,
-            value,
-          }));
-          const doContinue = () => {
-            chrome.debugger.sendCommand(
-              { tabId },
-              'Fetch.continueRequest',
-              { requestId: params.requestId, headers: updatedHeaders },
-              () => {
-                if (chrome.runtime.lastError) {
-                  proceed();
-                }
-              }
-            );
-          };
-          const delayMs = typeof match.override.delayMs === 'number' ? match.override.delayMs : 0;
-          if (delayMs > 0) {
-            setTimeout(doContinue, delayMs);
-          } else {
-            doContinue();
-          }
-          return;
-        }
-      } catch (error) {
-        console.error(error);
-      }
-
-      proceed();
-      return;
-    }
-
-    // Response stage
-    console.log('[NetworkOverrides] Response:', url);
-
-    try {
-      recordApi(tabId, {
-        url,
-        type: params.resourceType || 'other',
-        method: params.request?.method,
-        headers: toFetchHeaders(params.request?.headers),
-        postData: params.request?.postData,
-        statusCode:
-          typeof params.responseStatusCode === 'number' ? params.responseStatusCode : undefined,
-      });
-
-      const postData = params.request?.postData || state.recentApis.get(url)?.postData;
-      const match = findOverride(url, params.request?.method, state.overrides, postData);
-      if (!match) {
-        const resourceType = (params.resourceType || '').toLowerCase();
-        if (capturedBodyTypes.includes(resourceType)) {
-          storeResponseBody(tabId, url, params.requestId, proceed);
-        } else {
-          proceed();
-        }
-        return;
-      }
-
-      // If the override has a failReason or redirectUrl, skip body fulfillment at response stage.
-      // The redirect was already handled at request stage; the server's response
-      // for the redirected URL should pass through without alteration.
-      // Fail rules are consumed at the request stage; seeing one here means a stale pause.
-      if (match.override.failReason || match.override.redirectUrl) {
-        proceed();
-        return;
-      }
-
-      console.log('[NetworkOverrides] Fulfill body:', match.override.pattern, '→', url);
-
-      const ov = match.override;
-      const captures = match.captures;
-
-      function bodyToValidBase64(): string {
-        const rawBody = ov.body || '';
-        const processedBody =
-          ov.mode !== 'file'
-            ? NetworkOverridesUtils.processResponseTemplate(rawBody, captures)
-            : rawBody;
-        if (ov.mode !== 'file') return stringToBase64Local(processedBody);
-        try {
-          atob(ov.body);
-          return ov.body;
-        } catch {
-          console.warn(
-            '[NetworkOverrides] Invalid base64 in file mode for',
-            ov.pattern,
-            '— encoding as text instead'
-          );
-          return stringToBase64Local(processedBody);
-        }
-      }
-
-      const responseBodyBase64 = bodyToValidBase64();
-
-      const headers = [...((params.responseHeaders as FetchHeader[]) || [])];
-      if (Array.isArray(ov.responseHeaders)) {
-        for (const extra of ov.responseHeaders) {
-          if (!extra || typeof extra.name !== 'string' || !extra.name.trim()) continue;
-          // Skip rule headers that conflict with marker headers; markers always win.
-          const trimmedLowerName = extra.name.toLowerCase().trim();
-          if (
-            trimmedLowerName === 'x-network-overrides' ||
-            trimmedLowerName === 'x-network-overrides-pattern'
-          ) {
-            continue;
-          }
-          const existingIndex = headers.findIndex(
-            header => header.name.toLowerCase() === extra.name.toLowerCase()
-          );
-          if (existingIndex >= 0) {
-            headers[existingIndex] = {
-              name: headers[existingIndex].name,
-              value: String(extra.value),
-            };
-          } else {
-            headers.push({ name: extra.name, value: String(extra.value) });
-          }
-        }
-      }
-      if (!headers.find(h => h.name.toLowerCase() === 'content-type')) {
-        headers.push({ name: 'Content-Type', value: 'application/json; charset=utf-8' });
-      }
-
-      // The markers always win and cannot be removed by rule headers.
-      headers.push({ name: 'x-network-overrides', value: 'true' });
-      headers.push({ name: 'x-network-overrides-pattern', value: ov.pattern });
-
-      const fallbackCode =
-        typeof params.responseStatusCode === 'number' &&
-        params.responseStatusCode >= 100 &&
-        params.responseStatusCode <= 599
-          ? params.responseStatusCode
-          : 200;
-      const responseCode =
-        typeof ov.statusCode === 'number' && ov.statusCode >= 100 && ov.statusCode <= 599
-          ? ov.statusCode
-          : fallbackCode;
-
-      const doFulfill = () => {
-        chrome.debugger.sendCommand(
-          { tabId },
-          'Fetch.fulfillRequest',
-          {
-            requestId: params.requestId,
-            responseCode,
-            responseHeaders: headers,
-            body: responseBodyBase64,
-          },
-          () => {
-            if (chrome.runtime.lastError) {
-              console.error('fulfillRequest failed:', chrome.runtime.lastError.message);
-              proceed();
-            }
-          }
-        );
-      };
-      const delayMs = typeof ov.delayMs === 'number' ? ov.delayMs : 0;
-      if (delayMs > 0) {
-        setTimeout(doFulfill, delayMs);
-      } else {
-        doFulfill();
-      }
-    } catch (error) {
-      console.error(error);
-      proceed();
-    }
-  }
-
-  async function migrateLegacyLocalKeys(): Promise<void> {
-    try {
-      const all: Record<string, unknown> = await Promise.resolve(chrome.storage.local.get(null));
-      const legacy = Object.keys(all || {}).filter(
-        key => key.startsWith('recentApis_') || key.startsWith('recentApiBodies_')
-      );
-      if (legacy.length > 0) {
-        await Promise.resolve(chrome.storage.local.remove(legacy));
-      }
-    } catch {
-      // Non-fatal: migration retries on the next worker start.
-    }
-  }
-
-  export const ready: Promise<void> = (async () => {
-    const reattach = await TabState.rehydrate();
-    for (const tabId of reattach) {
-      // attachDebugger's catch already records the error and disables the tab.
-      await attachDebugger(tabId).catch(error => {
-        console.error('[NetworkOverrides] Re-attach failed for tab', tabId, error);
-      });
-    }
-    await migrateLegacyLocalKeys();
-  })();
-}
+// The service worker is a small bootstrap; each classic script owns one
+// background responsibility and contributes to the shared namespace.
+importScripts(
+  'utils.js',
+  'tab-state.js',
+  'background/encoding.js',
+  'background/api-capture.js',
+  'background/interceptor.js',
+  'background/debugger-controller.js',
+  'background/message-router.js'
+);
diff --git a/src/background/api-capture.ts b/src/background/api-capture.ts
new file mode 100644
index 0000000..3218916
--- /dev/null
+++ b/src/background/api-capture.ts
@@ -0,0 +1,128 @@
+/// <reference types="chrome" />
+/// <reference path="../shared.ts" />
+/// <reference path="../utils.ts" />
+/// <reference path="../tab-state.ts" />
+namespace NetworkOverridesBackground {
+  import TabState = NetworkOverridesTabState;
+
+  type FetchHeader = NetworkOverridesShared.FetchHeader;
+  type ApiEntry = NetworkOverridesShared.ApiEntry;
+
+  export function toFetchHeaders(headers: Record<string, unknown> | undefined): FetchHeader[] {
+    if (!headers) return [];
+    return Object.entries(headers).map(([name, value]) => ({ name, value: String(value) }));
+  }
+
+  let capturedBodyTypes: string[] = ['xhr', 'fetch'];
+  try {
+    chrome.storage.local.get(['capturedBodyTypes'], (data: any) => {
+      if (Array.isArray(data?.capturedBodyTypes) && data.capturedBodyTypes.length > 0) {
+        capturedBodyTypes = data.capturedBodyTypes.map((t: any) => String(t).toLowerCase());
+      }
+    });
+  } catch {}
+
+  export function matchPattern(pattern: string, url: string): string[] | null {
+    return NetworkOverridesUtils.matchPattern(pattern, url);
+  }
+
+  export function patternMatches(pattern: string, url: string): boolean {
+    return NetworkOverridesUtils.patternMatches(pattern, url);
+  }
+
+  export function substituteWildcards(template: string, captures: string[]): string {
+    return NetworkOverridesUtils.substituteWildcards(template, captures);
+  }
+
+  export function normalizeBody(body: string, isBase64: boolean): string {
+    return NetworkOverridesNormalizeBodyLocal(body, isBase64);
+  }
+
+  export function recordApi(tabId: number, entry: ApiEntry): void {
+    TabState.setRecentApi(tabId, entry);
+    scheduleApiBroadcast(tabId, entry);
+  }
+
+  function scheduleApiBroadcast(tabId: number, entry: ApiEntry): void {
+    const rt = TabState.runtime(tabId);
+    if (rt.subscriberPorts.size === 0) return;
+    rt.broadcastQueue.set(entry.url, entry);
+    if (rt.broadcastTimer) return;
+    rt.broadcastTimer = setTimeout(() => {
+      rt.broadcastTimer = null;
+      const delta = Array.from(rt.broadcastQueue.values());
+      rt.broadcastQueue.clear();
+      if (delta.length === 0 || rt.subscriberPorts.size === 0) return;
+      rt.subscriberPorts.forEach(port => {
+        try {
+          port.postMessage({ type: 'apisDelta', apis: delta });
+        } catch {}
+      });
+    }, 150);
+  }
+
+  export function storeResponseBody(
+    tabId: number,
+    url: string,
+    requestId: string,
+    callback: () => void
+  ): void {
+    chrome.debugger.sendCommand(
+      { tabId },
+      'Fetch.getResponseBody',
+      { requestId },
+      (response: { body?: string; base64Encoded?: boolean } | undefined) => {
+        if (!chrome.runtime.lastError && response && typeof response.body === 'string') {
+          const rawBody = normalizeBody(response.body, response.base64Encoded ?? false);
+          TabState.setRecentApiBody(tabId, url, rawBody);
+        }
+        callback();
+      }
+    );
+  }
+
+  // Strongly-typed messaging surface
+
+  chrome.runtime.onConnect.addListener(port => {
+    if (!port || port.name !== 'network-overrides-ui') return;
+
+    let subscribedTabId: number | null = null;
+
+    function unsubscribe(): void {
+      if (subscribedTabId === null) return;
+      TabState.runtime(subscribedTabId).subscriberPorts.delete(port);
+      subscribedTabId = null;
+    }
+
+    port.onDisconnect.addListener(() => unsubscribe());
+
+    port.onMessage.addListener((raw: any) => {
+      if (!raw || typeof raw !== 'object') return;
+      if (raw.type !== 'subscribe') return;
+
+      const tabId = Number(raw.tabId);
+      if (Number.isNaN(tabId)) return;
+
+      if (subscribedTabId !== null && subscribedTabId !== tabId) {
+        unsubscribe();
+      }
+
+      subscribedTabId = tabId;
+      TabState.runtime(tabId).subscriberPorts.add(port);
+
+      const state = TabState.get(tabId);
+      const apis = state ? Array.from(state.recentApis.values()) : [];
+      try {
+        port.postMessage({ type: 'apis', apis });
+      } catch {}
+    });
+  });
+
+  export function setCapturedBodyTypes(types: unknown[]): void {
+    capturedBodyTypes = types.map(type => String(type).toLowerCase());
+  }
+
+  export function shouldCaptureBody(resourceType: string): boolean {
+    return capturedBodyTypes.includes(resourceType.toLowerCase());
+  }
+}
diff --git a/src/background/debugger-controller.ts b/src/background/debugger-controller.ts
new file mode 100644
index 0000000..7d487da
--- /dev/null
+++ b/src/background/debugger-controller.ts
@@ -0,0 +1,212 @@
+/// <reference types="chrome" />
+/// <reference path="../shared.ts" />
+/// <reference path="../utils.ts" />
+/// <reference path="../tab-state.ts" />
+namespace NetworkOverridesBackground {
+  import TabState = NetworkOverridesTabState;
+
+  async function enableInterception(tabId: number): Promise<void> {
+    await sendDebugCommand(tabId, 'Network.enable', {});
+    await sendDebugCommand(tabId, 'Fetch.enable', {
+      patterns: [{ requestStage: 'Request' }, { requestStage: 'Response' }],
+    });
+  }
+
+  function sendDebugCommand(tabId: number, method: string, params: object): Promise<void> {
+    return new Promise((resolve, reject) => {
+      chrome.debugger.sendCommand({ tabId }, method, params, () => {
+        if (chrome.runtime.lastError) {
+          reject(new Error(chrome.runtime.lastError.message));
+        } else {
+          resolve();
+        }
+      });
+    });
+  }
+
+  function broadcastStatus(tabId: number): void {
+    const state = TabState.get(tabId);
+    if (!state) return;
+    const payload: { type: string; tabId: number; attached: boolean; error?: string } = {
+      type: 'status',
+      tabId,
+      attached: state.attached,
+    };
+    if (state.attachError) payload.error = state.attachError;
+    TabState.runtime(tabId).subscriberPorts.forEach(port => {
+      try {
+        port.postMessage(payload);
+      } catch {}
+    });
+  }
+
+  export function attachDebugger(tabId: number): Promise<void> {
+    const state = TabState.ensure(tabId);
+    const rt = TabState.runtime(tabId);
+    if (state.attached) return Promise.resolve();
+    if (rt.attachPromise) return rt.attachPromise;
+
+    const attempt = new Promise<void>((resolve, reject) => {
+      try {
+        chrome.debugger.attach({ tabId }, '1.3', async () => {
+          if (chrome.runtime.lastError) {
+            const message = chrome.runtime.lastError.message || 'attach failed';
+            // Debugger sessions belong to the extension, not the worker
+            // instance, so our own session survives a worker restart and makes
+            // this attach fail. If commands still work, adopt that session;
+            // if they fail too, a foreign debugger (e.g. DevTools) owns the tab.
+            if (/already attached/i.test(message)) {
+              try {
+                await enableInterception(tabId);
+                return resolve();
+              } catch {
+                return reject(new Error(message));
+              }
+            }
+            return reject(new Error(message));
+          }
+          try {
+            await enableInterception(tabId);
+            resolve();
+          } catch (err) {
+            chrome.debugger.detach({ tabId }, () => {});
+            reject(err instanceof Error ? err : new Error(String(err)));
+          }
+        });
+      } catch (error) {
+        reject(error instanceof Error ? error : new Error(String(error)));
+      }
+    })
+      .then(() => {
+        state.attached = true;
+        state.attachError = undefined;
+        TabState.schedulePersist(tabId);
+        broadcastStatus(tabId);
+      })
+      .catch(error => {
+        state.attached = false;
+        state.attachError = error instanceof Error ? error.message : String(error);
+        state.enabled = false;
+        TabState.schedulePersist(tabId);
+        broadcastStatus(tabId);
+        throw error;
+      })
+      .finally(() => {
+        rt.attachPromise = null;
+      });
+
+    rt.attachPromise = attempt;
+    return attempt;
+  }
+
+  export async function detachDebugger(tabId: number): Promise<void> {
+    if (!TabState.get(tabId)?.attached) return;
+
+    return new Promise(resolve => {
+      try {
+        chrome.debugger.sendCommand({ tabId }, 'Fetch.disable', {}, () => {
+          chrome.debugger.detach({ tabId }, () => {
+            TabState.dispose(tabId);
+            resolve();
+          });
+        });
+      } catch (error) {
+        console.error(error);
+        resolve();
+      }
+    });
+  }
+
+  chrome.tabs.onRemoved.addListener(tabId => {
+    if (TabState.get(tabId)?.attached) {
+      detachDebugger(tabId).catch(console.error);
+    }
+    TabState.dispose(tabId);
+  });
+
+  chrome.tabs.onUpdated.addListener((tabId, changeInfo) => {
+    if (typeof changeInfo.url !== 'string') return;
+    const state = TabState.get(tabId);
+    if (!state) return;
+    const newOrigin = NetworkOverridesUtils.getOrigin(changeInfo.url);
+    if (!newOrigin || newOrigin === state.origin) return;
+
+    state.origin = newOrigin;
+    state.recentApis.clear();
+    state.recentApiBodies.clear();
+    const overridesKey = `overrides_${newOrigin}`;
+    chrome.storage.local.get([overridesKey], (data: any) => {
+      if (state.origin !== newOrigin) return;
+      const saved = data?.[overridesKey];
+      state.overrides = Array.isArray(saved) ? saved : [];
+      TabState.schedulePersist(tabId);
+    });
+  });
+
+  chrome.debugger.onDetach.addListener((source, reason) => {
+    const tabId = source.tabId;
+    if (typeof tabId !== 'number') return;
+    // The tab is still open (infobar Cancel, DevTools takeover, browser-side
+    // teardown) — keep captured data and rules, only record that interception
+    // stopped. enabled goes off so a worker restart honors the cancellation.
+    const state = TabState.get(tabId);
+    if (!state) return;
+    state.attached = false;
+    state.enabled = false;
+    state.attachError = `Debugger detached (${reason || 'unknown reason'})`;
+    TabState.schedulePersist(tabId);
+    broadcastStatus(tabId);
+  });
+
+  chrome.debugger.onEvent.addListener((source, method, params: any) => {
+    const tabId = source.tabId;
+    if (typeof tabId !== 'number') return;
+
+    if (method === 'Fetch.requestPaused') {
+      handleRequestPaused(tabId, params);
+      return;
+    }
+
+    if (!TabState.get(tabId)?.attached) return;
+
+    if (method === 'Network.requestWillBeSent') {
+      const requestUrlInner = params?.request?.url;
+      const requestType = params?.type || 'other';
+      if (typeof requestUrlInner === 'string') {
+        recordApi(tabId, {
+          url: requestUrlInner,
+          type: requestType,
+          method: params.request.method,
+          headers: toFetchHeaders(params.request.headers),
+          postData: params.request.postData,
+        });
+      }
+      return;
+    }
+  });
+
+  async function migrateLegacyLocalKeys(): Promise<void> {
+    try {
+      const all: Record<string, unknown> = await Promise.resolve(chrome.storage.local.get(null));
+      const legacy = Object.keys(all || {}).filter(
+        key => key.startsWith('recentApis_') || key.startsWith('recentApiBodies_')
+      );
+      if (legacy.length > 0) {
+        await Promise.resolve(chrome.storage.local.remove(legacy));
+      }
+    } catch {
+      // Non-fatal: migration retries on the next worker start.
+    }
+  }
+
+  export const ready: Promise<void> = (async () => {
+    const reattach = await TabState.rehydrate();
+    for (const tabId of reattach) {
+      // attachDebugger's catch already records the error and disables the tab.
+      await attachDebugger(tabId).catch(error => {
+        console.error('[NetworkOverrides] Re-attach failed for tab', tabId, error);
+      });
+    }
+    await migrateLegacyLocalKeys();
+  })();
+}
diff --git a/src/background/encoding.ts b/src/background/encoding.ts
new file mode 100644
index 0000000..ecea863
--- /dev/null
+++ b/src/background/encoding.ts
@@ -0,0 +1,32 @@
+declare const Buffer: any;
+
+function NetworkOverridesStringToBase64Local(str: string): string {
+  if (typeof Buffer !== 'undefined') {
+    try {
+      return Buffer.from(str, 'utf8').toString('base64');
+    } catch {}
+  }
+
+  const bytes = new TextEncoder().encode(str);
+  let binary = '';
+  const chunkSize = 0x8000;
+  for (let index = 0; index < bytes.length; index += chunkSize) {
+    binary += String.fromCharCode.apply(null, Array.from(bytes.subarray(index, index + chunkSize)));
+  }
+  return btoa(binary);
+}
+
+function NetworkOverridesNormalizeBodyLocal(body: string, isBase64: boolean): string {
+  try {
+    if (isBase64) {
+      if (typeof Buffer !== 'undefined') {
+        return Buffer.from(body, 'base64').toString('utf8');
+      }
+      const decoded = atob(body);
+      return decodeURIComponent(escape(decoded));
+    }
+    return body;
+  } catch {
+    return body;
+  }
+}
diff --git a/src/background/interceptor.ts b/src/background/interceptor.ts
new file mode 100644
index 0000000..5ad23b8
--- /dev/null
+++ b/src/background/interceptor.ts
@@ -0,0 +1,290 @@
+/// <reference types="chrome" />
+/// <reference path="../shared.ts" />
+/// <reference path="../utils.ts" />
+/// <reference path="../tab-state.ts" />
+
+namespace NetworkOverridesBackground {
+  import TabState = NetworkOverridesTabState;
+
+  type OverrideRule = NetworkOverridesShared.OverrideRule;
+  type FetchHeader = NetworkOverridesShared.FetchHeader;
+
+  function findOverride(
+    url: string,
+    method: string | undefined,
+    overrides: OverrideRule[],
+    postData?: string
+  ): { override: OverrideRule; captures: string[] } | null {
+    for (const test of overrides) {
+      if (test.enabled === false) continue;
+      if (!NetworkOverridesUtils.matchesMethod(test.method, method)) continue;
+      if (!NetworkOverridesUtils.matchesGraphQLOperation(test.graphqlOperation, postData)) continue;
+      const captures = matchPattern(test.pattern, url);
+      if (captures !== null) {
+        return { override: test, captures };
+      }
+    }
+    return null;
+  }
+
+  export function handleRequestPaused(tabId: number, params: any): void {
+    const isRequestStage = typeof params.responseStatusCode !== 'number';
+    const url = params.request?.url || '';
+    const state = TabState.get(tabId);
+
+    const proceed = () => {
+      chrome.debugger.sendCommand(
+        { tabId },
+        'Fetch.continueRequest',
+        { requestId: params.requestId },
+        () => {
+          if (chrome.runtime.lastError) {
+            // InterceptionId may already be invalid if request completed; ignore
+          }
+        }
+      );
+    };
+
+    if (!state || !state.attached || !state.enabled) {
+      proceed();
+      return;
+    }
+
+    if (isRequestStage) {
+      recordApi(tabId, {
+        url,
+        type: params.resourceType || 'other',
+        method: params.request?.method,
+        headers: toFetchHeaders(params.request?.headers),
+        postData: params.request?.postData,
+      });
+
+      try {
+        const postData = params.request?.postData || state.recentApis.get(url)?.postData;
+        const match = findOverride(url, params.request?.method, state.overrides, postData);
+        if (match && match.override.failReason) {
+          const errorReason = match.override.failReason;
+          const fail = () => {
+            chrome.debugger.sendCommand(
+              { tabId },
+              'Fetch.failRequest',
+              { requestId: params.requestId, errorReason },
+              () => {
+                if (chrome.runtime.lastError) {
+                  // The request may already be gone; nothing to recover.
+                }
+              }
+            );
+          };
+          const delayMs = typeof match.override.delayMs === 'number' ? match.override.delayMs : 0;
+          if (delayMs > 0) {
+            setTimeout(fail, delayMs);
+          } else {
+            fail();
+          }
+          return;
+        }
+        if (match && match.override.redirectUrl) {
+          const newUrl = substituteWildcards(match.override.redirectUrl, match.captures);
+          if (newUrl.includes('*')) {
+            console.error('[NetworkOverrides] Unsubstituted * in redirect URL:', newUrl);
+            proceed();
+            return;
+          }
+          console.log('[NetworkOverrides] Redirect:', url, '→', newUrl);
+          chrome.debugger.sendCommand(
+            { tabId },
+            'Fetch.continueRequest',
+            { requestId: params.requestId, url: newUrl },
+            () => {
+              if (chrome.runtime.lastError) {
+                console.error('continueRequest redirect failed:', chrome.runtime.lastError.message);
+                proceed();
+              }
+            }
+          );
+          return;
+        }
+        if (
+          match &&
+          Array.isArray(match.override.requestHeaders) &&
+          match.override.requestHeaders.length > 0
+        ) {
+          const originalHeaders = toFetchHeaders(params.request?.headers);
+          const reqHeaderMap = new Map<string, string>();
+          for (const h of originalHeaders) {
+            reqHeaderMap.set(h.name.toLowerCase(), h.value);
+          }
+          for (const h of match.override.requestHeaders) {
+            if (h.name && h.name.trim()) {
+              reqHeaderMap.set(h.name.trim().toLowerCase(), h.value);
+            }
+          }
+          const updatedHeaders = Array.from(reqHeaderMap.entries()).map(([name, value]) => ({
+            name,
+            value,
+          }));
+          const doContinue = () => {
+            chrome.debugger.sendCommand(
+              { tabId },
+              'Fetch.continueRequest',
+              { requestId: params.requestId, headers: updatedHeaders },
+              () => {
+                if (chrome.runtime.lastError) {
+                  proceed();
+                }
+              }
+            );
+          };
+          const delayMs = typeof match.override.delayMs === 'number' ? match.override.delayMs : 0;
+          if (delayMs > 0) {
+            setTimeout(doContinue, delayMs);
+          } else {
+            doContinue();
+          }
+          return;
+        }
+      } catch (error) {
+        console.error(error);
+      }
+
+      proceed();
+      return;
+    }
+
+    // Response stage
+    console.log('[NetworkOverrides] Response:', url);
+
+    try {
+      recordApi(tabId, {
+        url,
+        type: params.resourceType || 'other',
+        method: params.request?.method,
+        headers: toFetchHeaders(params.request?.headers),
+        postData: params.request?.postData,
+        statusCode:
+          typeof params.responseStatusCode === 'number' ? params.responseStatusCode : undefined,
+      });
+
+      const postData = params.request?.postData || state.recentApis.get(url)?.postData;
+      const match = findOverride(url, params.request?.method, state.overrides, postData);
+      if (!match) {
+        const resourceType = (params.resourceType || '').toLowerCase();
+        if (shouldCaptureBody(resourceType)) {
+          storeResponseBody(tabId, url, params.requestId, proceed);
+        } else {
+          proceed();
+        }
+        return;
+      }
+
+      // If the override has a failReason or redirectUrl, skip body fulfillment at response stage.
+      // The redirect was already handled at request stage; the server's response
+      // for the redirected URL should pass through without alteration.
+      // Fail rules are consumed at the request stage; seeing one here means a stale pause.
+      if (match.override.failReason || match.override.redirectUrl) {
+        proceed();
+        return;
+      }
+
+      console.log('[NetworkOverrides] Fulfill body:', match.override.pattern, '→', url);
+
+      const ov = match.override;
+      const captures = match.captures;
+
+      function bodyToValidBase64(): string {
+        const rawBody = ov.body || '';
+        const processedBody =
+          ov.mode !== 'file'
+            ? NetworkOverridesUtils.processResponseTemplate(rawBody, captures)
+            : rawBody;
+        if (ov.mode !== 'file') return NetworkOverridesStringToBase64Local(processedBody);
+        try {
+          atob(ov.body);
+          return ov.body;
+        } catch {
+          console.warn(
+            '[NetworkOverrides] Invalid base64 in file mode for',
+            ov.pattern,
+            '— encoding as text instead'
+          );
+          return NetworkOverridesStringToBase64Local(processedBody);
+        }
+      }
+
+      const responseBodyBase64 = bodyToValidBase64();
+
+      const headers = [...((params.responseHeaders as FetchHeader[]) || [])];
+      if (Array.isArray(ov.responseHeaders)) {
+        for (const extra of ov.responseHeaders) {
+          if (!extra || typeof extra.name !== 'string' || !extra.name.trim()) continue;
+          // Skip rule headers that conflict with marker headers; markers always win.
+          const trimmedLowerName = extra.name.toLowerCase().trim();
+          if (
+            trimmedLowerName === 'x-network-overrides' ||
+            trimmedLowerName === 'x-network-overrides-pattern'
+          ) {
+            continue;
+          }
+          const existingIndex = headers.findIndex(
+            header => header.name.toLowerCase() === extra.name.toLowerCase()
+          );
+          if (existingIndex >= 0) {
+            headers[existingIndex] = {
+              name: headers[existingIndex].name,
+              value: String(extra.value),
+            };
+          } else {
+            headers.push({ name: extra.name, value: String(extra.value) });
+          }
+        }
+      }
+      if (!headers.find(h => h.name.toLowerCase() === 'content-type')) {
+        headers.push({ name: 'Content-Type', value: 'application/json; charset=utf-8' });
+      }
+
+      // The markers always win and cannot be removed by rule headers.
+      headers.push({ name: 'x-network-overrides', value: 'true' });
+      headers.push({ name: 'x-network-overrides-pattern', value: ov.pattern });
+
+      const fallbackCode =
+        typeof params.responseStatusCode === 'number' &&
+        params.responseStatusCode >= 100 &&
+        params.responseStatusCode <= 599
+          ? params.responseStatusCode
+          : 200;
+      const responseCode =
+        typeof ov.statusCode === 'number' && ov.statusCode >= 100 && ov.statusCode <= 599
+          ? ov.statusCode
+          : fallbackCode;
+
+      const doFulfill = () => {
+        chrome.debugger.sendCommand(
+          { tabId },
+          'Fetch.fulfillRequest',
+          {
+            requestId: params.requestId,
+            responseCode,
+            responseHeaders: headers,
+            body: responseBodyBase64,
+          },
+          () => {
+            if (chrome.runtime.lastError) {
+              console.error('fulfillRequest failed:', chrome.runtime.lastError.message);
+              proceed();
+            }
+          }
+        );
+      };
+      const delayMs = typeof ov.delayMs === 'number' ? ov.delayMs : 0;
+      if (delayMs > 0) {
+        setTimeout(doFulfill, delayMs);
+      } else {
+        doFulfill();
+      }
+    } catch (error) {
+      console.error(error);
+      proceed();
+    }
+  }
+}
diff --git a/src/background/message-router.ts b/src/background/message-router.ts
new file mode 100644
index 0000000..9249f7a
--- /dev/null
+++ b/src/background/message-router.ts
@@ -0,0 +1,165 @@
+/// <reference types="chrome" />
+/// <reference path="../shared.ts" />
+/// <reference path="../utils.ts" />
+/// <reference path="../tab-state.ts" />
+namespace NetworkOverridesBackground {
+  import TabState = NetworkOverridesTabState;
+
+  type OverrideRule = NetworkOverridesShared.OverrideRule;
+
+  type Msg =
+    | {
+        type: 'update';
+        tabId: number;
+        enabled: boolean;
+        overrides?: OverrideRule[];
+        tabUrl?: string;
+      }
+    | { type: 'getApis'; tabId: number }
+    | { type: 'getApiData'; tabId: number; url?: string }
+    | { type: 'clearApis'; tabId: number }
+    | { type: 'getStatus'; tabId: number }
+    | { type: 'updateCapturedBodyTypes'; types: string[] };
+
+  chrome.runtime.onMessage.addListener((msg: Msg, sender, sendResponse) => {
+    if (!msg || typeof msg !== 'object' || typeof msg.type !== 'string') {
+      return;
+    }
+    switch (msg.type) {
+      case 'update': {
+        const tabId = Number(msg.tabId);
+        if (Number.isNaN(tabId)) return;
+
+        const enabled = Boolean(msg.enabled);
+        const overrides = Array.isArray(msg.overrides) ? msg.overrides : [];
+        const tabUrl = typeof msg.tabUrl === 'string' ? msg.tabUrl : '';
+
+        const state = TabState.ensure(tabId);
+        state.enabled = enabled;
+        state.overrides = overrides;
+        if (tabUrl) state.origin = NetworkOverridesUtils.getOrigin(tabUrl);
+        TabState.schedulePersist(tabId);
+        const update = enabled ? attachDebugger(tabId) : detachDebugger(tabId);
+        void update
+          .then(() => {
+            sendResponse({
+              type: 'updateResponse',
+              success: true,
+              attached: !!TabState.get(tabId)?.attached,
+            });
+          })
+          .catch(error => {
+            console.error(error);
+            sendResponse({
+              type: 'updateResponse',
+              success: false,
+              attached: false,
+              error: error instanceof Error ? error.message : String(error),
+            });
+          });
+        return true;
+      }
+      case 'getApis': {
+        const tabId = Number(msg.tabId);
+        if (Number.isNaN(tabId)) return;
+        const state = TabState.get(tabId);
+        if (state && typeof sendResponse === 'function') {
+          sendResponse({ type: 'apisResponse', apis: Array.from(state.recentApis.values()) });
+          return true;
+        }
+
+        void Promise.resolve(chrome.storage.session.get(TabState.stateKey(tabId))).then(
+          (data: any) => {
+            const snapshot = data?.[TabState.stateKey(tabId)];
+            const apis = snapshot?.recentApis ? Object.values(snapshot.recentApis) : [];
+            if (typeof sendResponse === 'function') {
+              sendResponse({ type: 'apisResponse', apis });
+            }
+          }
+        );
+        return true;
+      }
+      case 'clearApis': {
+        const clearTabId = Number(msg.tabId);
+        if (!Number.isNaN(clearTabId)) {
+          const state = TabState.get(clearTabId);
+          if (state) {
+            state.recentApis.clear();
+            state.recentApiBodies.clear();
+            TabState.schedulePersist(clearTabId);
+          }
+        }
+        if (typeof sendResponse === 'function') {
+          sendResponse({ type: 'clearApisResponse', success: true });
+        }
+        return;
+      }
+      case 'getStatus': {
+        const tabId = Number(msg.tabId);
+        if (Number.isNaN(tabId)) return;
+        const respond = () => {
+          const state = TabState.get(tabId);
+          if (typeof sendResponse === 'function') {
+            const payload: { type: string; attached: boolean; error?: string } = {
+              type: 'statusResponse',
+              attached: !!state?.attached,
+            };
+            if (state?.attachError) payload.error = state.attachError;
+            sendResponse(payload);
+          }
+        };
+        // Answering mid-attach would report a stale { attached: false } with no
+        // error; wait for the in-flight attempt so the UI sees the real outcome.
+        const pending = TabState.runtime(tabId).attachPromise;
+        if (pending) {
+          void pending.catch(() => {}).then(respond);
+        } else {
+          respond();
+        }
+        return true;
+      }
+      case 'getApiData': {
+        const tabId = Number(msg.tabId);
+        const url = String(msg.url || '');
+        if (Number.isNaN(tabId) || !url) return;
+
+        const state = TabState.get(tabId);
+        if (state?.recentApiBodies.has(url)) {
+          if (typeof sendResponse === 'function') {
+            sendResponse({
+              type: 'apiDataResponse',
+              url,
+              body: state.recentApiBodies.get(url) || '',
+            });
+          }
+          return true;
+        }
+
+        void Promise.resolve(chrome.storage.session.get(TabState.stateKey(tabId))).then(
+          (data: any) => {
+            const snapshot = data?.[TabState.stateKey(tabId)];
+            const body = snapshot?.recentApiBodies?.[url] ?? '';
+            if (typeof sendResponse === 'function') {
+              sendResponse({ type: 'apiDataResponse', url, body });
+            }
+          }
+        );
+        return true;
+      }
+      case 'updateCapturedBodyTypes': {
+        if (Array.isArray((msg as any).types)) {
+          setCapturedBodyTypes((msg as any).types);
+        }
+        if (typeof sendResponse === 'function') {
+          sendResponse({ success: true });
+        }
+        return;
+      }
+      default:
+        if (typeof sendResponse === 'function') {
+          sendResponse({ success: true });
+        }
+        break;
+    }
+  });
+}
diff --git a/src/ui.ts b/src/ui.ts
index d89600a..40115bf 100644
--- a/src/ui.ts
+++ b/src/ui.ts
@@ -1,45 +1,27 @@
 /// <reference types="chrome" />
 /// <reference path="./shared.ts" />
 /// <reference path="./utils.ts" />
+/// <reference path="./ui/types.ts" />
+/// <reference path="./ui/view-utils.ts" />
+/// <reference path="./ui/primitives.ts" />
+/// <reference path="./ui/notifications.ts" />
+/// <reference path="./ui/dialogs.ts" />
+/// <reference path="./ui/persistence.ts" />
+/// <reference path="./ui/attach-status.ts" />
+/// <reference path="./ui/headers-editor.ts" />
+/// <reference path="./ui/curl.ts" />
+/// <reference path="./ui/swagger.ts" />
+/// <reference path="./ui/modal.ts" />
+/// <reference path="./ui/rules-list.ts" />
+/// <reference path="./ui/api-list.ts" />
+/// <reference path="./ui/profiles.ts" />
+/// <reference path="./ui/modal-controller.ts" />
+/// <reference path="./ui/rules-io-controller.ts" />
+/// <reference path="./ui/toolbar-controller.ts" />
 
 namespace NetworkOverridesUi {
-  type OverrideMode = NetworkOverridesShared.OverrideMode;
-  type OverrideRule = NetworkOverridesShared.OverrideRule;
-  type ApiEntry = NetworkOverridesShared.ApiEntry;
-
   let currentDomain = '';
 
-  const TYPE_ORDER = [
-    'xhr',
-    'fetch',
-    'script',
-    'stylesheet',
-    'image',
-    'media',
-    'font',
-    'document',
-    'websocket',
-    'manifest',
-    'eventsource',
-    'texttrack',
-    'other',
-  ];
-  const TYPE_LABELS: Record<string, string> = {
-    xhr: 'XHR',
-    fetch: 'Fetch',
-    script: 'JS',
-    stylesheet: 'CSS',
-    image: 'Img',
-    media: 'Media',
-    font: 'Font',
-    document: 'Doc',
-    websocket: 'WS',
-    manifest: 'Manifest',
-    eventsource: 'EventSource',
-    texttrack: 'TextTrack',
-    other: 'Other',
-  };
-
   export function matchPattern(pattern: string, url: string): string[] | null {
     return NetworkOverridesUtils.matchPattern(pattern, url);
   }
@@ -52,1385 +34,10 @@ namespace NetworkOverridesUi {
     return NetworkOverridesUtils.patternMatches(pattern, url);
   }
 
-  function wouldApply(override: OverrideRule, api: ApiEntry): boolean {
-    return (
-      NetworkOverridesUtils.matchesMethod(override.method, api.method) &&
-      patternMatches(override.pattern, api.url)
-    );
-  }
-
-  const KNOWN_METHODS = ['ANY', 'GET', 'POST', 'PUT', 'PATCH', 'DELETE'];
-
-  const FAIL_REASONS = [
-    'Failed',
-    'TimedOut',
-    'ConnectionRefused',
-    'NameNotResolved',
-    'InternetDisconnected',
-  ];
-
-  type ModalOverrideType = 'body' | 'redirect' | 'fail';
-
-  // Parses "Header-Name: value" lines; returns null when any non-empty line is malformed.
-  function parseHeaderLines(text: string): NetworkOverridesShared.FetchHeader[] | null {
-    const headers: NetworkOverridesShared.FetchHeader[] = [];
-    for (const rawLine of text.split('\n')) {
-      const line = rawLine.trim();
-      if (!line) continue;
-      const colon = line.indexOf(':');
-      if (colon <= 0) return null;
-      headers.push({ name: line.slice(0, colon).trim(), value: line.slice(colon + 1).trim() });
-    }
-    return headers;
-  }
-
-  function resolveModalMethodValue(method: string | undefined): string {
-    return method && KNOWN_METHODS.includes(method) ? method : 'ANY';
-  }
-
-  function isValidPattern(pattern: string): boolean {
-    const trimmed = pattern.trim();
-    if (trimmed === '*' || trimmed.toLowerCase() === 'all') {
-      return true;
-    }
-    if (NetworkOverridesUtils.isRegexPattern(trimmed)) {
-      const lastSlash = trimmed.lastIndexOf('/');
-      const source = trimmed.slice(1, lastSlash);
-      const flags = trimmed.slice(lastSlash + 1);
-      try {
-        new RegExp(source, flags);
-        return true;
-      } catch {
-        return false;
-      }
-    }
-    if (trimmed.includes('*')) {
-      const parts = trimmed.split('*').map(NetworkOverridesUtils.escapeRegex);
-      try {
-        new RegExp('^' + parts.join('(.*)') + '$');
-        return true;
-      } catch {
-        return false;
-      }
-    }
-    return trimmed.length > 0;
-  }
-
-  function domainKey(suffix: string): string {
+  export function getStorageKey(suffix: string): string {
     return currentDomain ? `${suffix}_${currentDomain}` : suffix;
   }
 
-  interface Elements {
-    enableCheckbox: HTMLInputElement;
-    attachStatus: HTMLElement;
-    patternInput: HTMLInputElement;
-    bodyInput: HTMLTextAreaElement;
-    addBtn: HTMLButtonElement;
-    listEl: HTMLUListElement;
-    modeSelect: HTMLSelectElement;
-    apisSection: HTMLDivElement;
-    apiSearchInput: HTMLInputElement;
-    apisList: HTMLDivElement;
-    tabsContainer: HTMLDivElement;
-    overridesSection: HTMLDivElement;
-    modal: HTMLDivElement;
-    modalUrl: HTMLElement;
-    modalTitleText: HTMLElement;
-    modalPattern: HTMLInputElement;
-    modalMethod: HTMLSelectElement;
-    modalMode: HTMLSelectElement;
-    modalBody: HTMLTextAreaElement;
-    modalRedirectUrl: HTMLInputElement;
-    modalBodyFields: HTMLDivElement;
-    modalRedirectFields: HTMLDivElement;
-    modalStatus: HTMLInputElement;
-    modalDelay: HTMLInputElement;
-    modalHeaders: HTMLTextAreaElement;
-    modalFailFields: HTMLDivElement;
-    modalFailReason: HTMLSelectElement;
-    modalAdvancedFields: HTMLDivElement;
-    modalStatusField: HTMLElement;
-    modalHeadersField: HTMLElement;
-    saveOverrideBtn: HTMLButtonElement;
-    formatJsonBtn: HTMLButtonElement;
-    bodyTypeBadge: HTMLElement;
-    closeModal: HTMLElement;
-    newRow: HTMLDivElement;
-    refreshBtn: HTMLButtonElement;
-    infoBtn: HTMLButtonElement;
-    redirectUrlInput: HTMLInputElement;
-    addApiBtn: HTMLButtonElement;
-    exportRulesBtn: HTMLButtonElement;
-    importRulesBtn: HTMLButtonElement;
-    importRulesInput: HTMLInputElement;
-    modalRequestHeaders?: HTMLTextAreaElement;
-    modalRequestHeadersField?: HTMLElement;
-    modalGraphqlOp?: HTMLInputElement;
-    modalPreviewContainer?: HTMLDivElement;
-    profilesSelect?: HTMLSelectElement;
-    saveProfileBtn?: HTMLButtonElement;
-    deleteProfileBtn?: HTMLButtonElement;
-  }
-
-  export interface AppOptions {
-    autoFillOnOpen: boolean;
-    showManualEditor: boolean;
-  }
-
-  export interface UiApi {
-    addApis: (newApis: ApiEntry[]) => void;
-  }
-
-  export function init(options: AppOptions): UiApi {
-    const elements = getElements();
-    const state = {
-      overrides: [] as OverrideRule[],
-      apis: [] as ApiEntry[],
-      apiSearchTerm: '',
-      currentTab: 'other' as 'overridden' | 'other' | 'overrides',
-      collapsedTypes: {} as Record<string, boolean>,
-      selectedApi: null as string | null,
-      currentEditIndex: null as number | null,
-      autoFillFromPayload: true,
-    };
-    elements.overridesSection.style.display = 'none';
-
-    elements.newRow.style.display = options.showManualEditor ? '' : 'none';
-
-    const apiByUrl = new Map<string, ApiEntry>();
-    let apiStreamPort: chrome.runtime.Port | null = null;
-    let subscribedTabId: number | null = null;
-
-    async function persistApiUiState(): Promise<void> {
-      await chrome.storage.local.set({
-        apiSearchTerm: state.apiSearchTerm,
-      });
-    }
-
-    function renderAttachStatus(attached: boolean, error?: string): void {
-      const el = elements.attachStatus;
-      if (!el) return;
-      el.classList.remove('attach-status--on', 'attach-status--error');
-      if (error) {
-        el.classList.add('attach-status--error');
-        el.textContent = `Attach failed: ${error}`;
-        el.style.display = '';
-      } else if (attached) {
-        el.classList.add('attach-status--on');
-        el.textContent = 'Intercepting requests';
-        el.style.display = '';
-      } else {
-        el.textContent = '';
-        el.style.display = 'none';
-      }
-    }
-
-    async function refreshAttachStatus(): Promise<void> {
-      const tab = await getActiveTab();
-      if (typeof tab?.id !== 'number') return;
-      const response = await new Promise<any>(resolve => {
-        chrome.runtime.sendMessage({ type: 'getStatus', tabId: tab.id }, resolve);
-      });
-      if (response?.type === 'statusResponse') {
-        renderAttachStatus(!!response.attached, response.error);
-        // Same behavior as the port 'status' push: a failed attach means
-        // nothing is intercepted, so the toggle must not stay checked.
-        if (response.error) {
-          elements.enableCheckbox.checked = false;
-          void chrome.storage.local.set({ enabled: false });
-        }
-      }
-    }
-
-    function addApisToState(newApis: ApiEntry[]): void {
-      let changed = false;
-      newApis.forEach(entry => {
-        const { url } = entry;
-        const existing = apiByUrl.get(url);
-        if (existing) {
-          if (entry.body && !existing.body) {
-            existing.body = entry.body;
-            changed = true;
-          }
-        } else {
-          state.apis.push(entry);
-          apiByUrl.set(url, entry);
-          changed = true;
-        }
-      });
-      if (changed) {
-        renderApis();
-      }
-    }
-
-    async function startApiStream(): Promise<void> {
-      const tab = await getActiveTab();
-      const tabId = tab?.id;
-      if (typeof tabId !== 'number') return;
-
-      if (apiStreamPort && subscribedTabId === tabId) {
-        return;
-      }
-
-      try {
-        if (apiStreamPort) {
-          try {
-            apiStreamPort.disconnect();
-          } catch {}
-        }
-
-        const port = chrome.runtime.connect({ name: 'network-overrides-ui' });
-        apiStreamPort = port;
-        subscribedTabId = tabId;
-        port.onDisconnect.addListener(() => {
-          if (apiStreamPort === port) {
-            apiStreamPort = null;
-            subscribedTabId = null;
-          }
-        });
-        port.onMessage.addListener((msg: any) => {
-          if (!msg || typeof msg !== 'object') return;
-          if (msg.type === 'status') {
-            renderAttachStatus(!!msg.attached, msg.error);
-            if (msg.error) {
-              elements.enableCheckbox.checked = false;
-              void chrome.storage.local.set({ enabled: false });
-            }
-            return;
-          }
-          if (msg.type === 'apis' && Array.isArray(msg.apis)) {
-            addApisToState(msg.apis as ApiEntry[]);
-            return;
-          }
-          if (msg.type === 'apisDelta' && Array.isArray(msg.apis)) {
-            addApisToState(msg.apis as ApiEntry[]);
-            return;
-          }
-          if (msg.type === 'api' && msg.api && typeof msg.api.url === 'string') {
-            addApisToState([msg.api as ApiEntry]);
-            return;
-          }
-        });
-        port.postMessage({ type: 'subscribe', tabId });
-      } catch {
-        // Port is optional; keep manual refresh working.
-      }
-    }
-
-    function renderList(): void {
-      elements.listEl.innerHTML = '';
-      state.overrides.forEach((override, index) => {
-        const li = document.createElement('li');
-        li.className = 'override-item';
-        if (override.enabled === false) {
-          li.classList.add('override-item--disabled');
-        }
-        const methodBadge =
-          override.method && override.method !== 'ANY'
-            ? `<span class="override-method-badge">${escapeHtml(override.method)}</span> `
-            : '';
-        const gqlBadge = override.graphqlOperation
-          ? `<span class="graphql-badge">GQL: ${escapeHtml(override.graphqlOperation)}</span> `
-          : '';
-        const statusBadge =
-          typeof override.statusCode === 'number'
-            ? `<span class="override-status-badge">${override.statusCode}</span> `
-            : '';
-        const delayBadge =
-          typeof override.delayMs === 'number' && override.delayMs > 0
-            ? `<span class="override-delay-badge">⏱ ${override.delayMs}ms</span> `
-            : '';
-        const failBadge = override.failReason
-          ? `<span class="override-fail-badge" title="${escapeHtml(override.failReason)}">FAIL</span> `
-          : '';
-        li.innerHTML = `
-          <div class="override-item-main">
-            <input
-              type="checkbox"
-              class="override-enabled-toggle"
-              data-index="${index}"
-              ${override.enabled === false ? '' : 'checked'}
-              title="Enable/disable this rule"
-            />
-            <div class="override-item-info">
-              <b class="override-pattern">${escapeHtml(override.pattern)}</b>
-              ${override.redirectUrl ? `<div class="override-redirect">→ ${escapeHtml(override.redirectUrl)}</div>` : ''}
-              <div class="override-meta">${methodBadge}${gqlBadge}${failBadge}${statusBadge}${delayBadge}${escapeHtml(override.mode)}${override.body ? ` · ${escapeHtml(override.body.substring(0, 80))}${override.body.length > 80 ? '…' : ''}` : ''}</div>
-            </div>
-            <div class="override-item-actions">
-              <button data-index="${index}" class="edit-btn" title="Edit">✎</button>
-              <button data-index="${index}" class="duplicate-btn" title="Duplicate rule">📋</button>
-              <button data-index="${index}" class="del-btn" title="Delete">✕</button>
-            </div>
-          </div>
-        `;
-        elements.listEl.appendChild(li);
-      });
-      updateTabLabels();
-    }
-
-    function setModalOverrideType(type: ModalOverrideType): void {
-      document
-        .querySelectorAll<HTMLInputElement>('input[name="modal-override-type"]')
-        .forEach(radio => {
-          radio.checked = radio.value === type;
-        });
-      elements.modalBodyFields.style.display = type === 'body' ? '' : 'none';
-      elements.modalRedirectFields.style.display = type === 'redirect' ? '' : 'none';
-      elements.modalFailFields.style.display = type === 'fail' ? '' : 'none';
-      // Advanced row: delay applies to body and fail; status/headers to body only.
-      elements.modalAdvancedFields.style.display = type === 'redirect' ? 'none' : '';
-      elements.modalStatusField.style.display = type === 'body' ? '' : 'none';
-      elements.modalHeadersField.style.display = type === 'body' ? '' : 'none';
-      if (elements.modalRequestHeadersField) {
-        elements.modalRequestHeadersField.style.display = type === 'fail' ? 'none' : '';
-      }
-      elements.modalPattern.disabled = type === 'body';
-    }
-
-    function updateImagePreview(body: string): void {
-      if (!elements.modalPreviewContainer) return;
-      const trimmed = body.trim();
-      if (!trimmed) {
-        elements.modalPreviewContainer.style.display = 'none';
-        elements.modalPreviewContainer.innerHTML = '';
-        return;
-      }
-      if (
-        trimmed.startsWith('data:image/') ||
-        (trimmed.startsWith('<svg') && trimmed.endsWith('</svg>'))
-      ) {
-        elements.modalPreviewContainer.style.display = 'block';
-        elements.modalPreviewContainer.innerHTML = `<img src="${escapeHtml(trimmed)}" alt="Preview" />`;
-      } else if (elements.modalMode && elements.modalMode.value === 'file') {
-        elements.modalPreviewContainer.style.display = 'block';
-        elements.modalPreviewContainer.innerHTML = `<img src="data:image/png;base64,${escapeHtml(trimmed)}" alt="Image Preview" onerror="this.parentElement.style.display='none'" />`;
-      } else {
-        elements.modalPreviewContainer.style.display = 'none';
-        elements.modalPreviewContainer.innerHTML = '';
-      }
-    }
-
-    function prefillAdvancedFields(existing: OverrideRule | null): void {
-      if (elements.modalGraphqlOp) {
-        elements.modalGraphqlOp.value = existing?.graphqlOperation || '';
-      }
-      elements.modalStatus.value =
-        existing && typeof existing.statusCode === 'number' ? String(existing.statusCode) : '';
-      elements.modalDelay.value =
-        existing && typeof existing.delayMs === 'number' ? String(existing.delayMs) : '';
-      elements.modalHeaders.value = (existing?.responseHeaders || [])
-        .map(header => `${header.name}: ${header.value}`)
-        .join('\n');
-      if (elements.modalRequestHeaders) {
-        elements.modalRequestHeaders.value = (existing?.requestHeaders || [])
-          .map(header => `${header.name}: ${header.value}`)
-          .join('\n');
-      }
-      elements.modalFailReason.value =
-        existing?.failReason && FAIL_REASONS.includes(existing.failReason)
-          ? existing.failReason
-          : 'Failed';
-    }
-
-    function updateBodyTypeBadge(): void {
-      const val = elements.modalBody.value.trim();
-      if (!val) {
-        elements.bodyTypeBadge.textContent = 'text';
-        elements.bodyTypeBadge.classList.remove('json');
-        return;
-      }
-      try {
-        JSON.parse(val);
-        elements.bodyTypeBadge.textContent = 'json';
-        elements.bodyTypeBadge.classList.add('json');
-      } catch {
-        elements.bodyTypeBadge.textContent = 'text';
-        elements.bodyTypeBadge.classList.remove('json');
-      }
-    }
-
-    function openOverrideModalForIndex(index: number): void {
-      const existing = state.overrides[index];
-      if (!existing) {
-        return;
-      }
-
-      state.selectedApi = existing.pattern;
-      state.currentEditIndex = index;
-      elements.modalUrl.textContent = formatApiLabel(existing.pattern);
-      elements.modalUrl.title = existing.pattern;
-      elements.modalTitleText.textContent = 'Edit override';
-      elements.modalPattern.value = existing.pattern;
-      elements.modalMethod.value = resolveModalMethodValue(existing.method);
-      elements.modalMode.value = existing.mode || 'text';
-      elements.modalBody.value = formatJsonIfPossible(existing.body || '');
-      elements.modalRedirectUrl.value = existing.redirectUrl || '';
-      prefillAdvancedFields(existing);
-      setModalOverrideType(
-        existing.failReason ? 'fail' : existing.redirectUrl ? 'redirect' : 'body'
-      );
-      elements.modal.style.display = 'block';
-      updateBodyTypeBadge();
-      updateImagePreview(elements.modalBody.value);
-      elements.modalBody.focus();
-    }
-
-    async function openOverrideModal(url: string): Promise<void> {
-      state.selectedApi = url;
-      elements.modalUrl.textContent = formatApiLabel(url);
-      elements.modalUrl.title = url;
-
-      let existingIndex = state.overrides.findIndex(override => override.pattern === url);
-      if (existingIndex === -1) {
-        existingIndex = state.overrides.findIndex(override =>
-          patternMatches(override.pattern, url)
-        );
-      }
-
-      state.currentEditIndex = existingIndex !== -1 ? existingIndex : null;
-      const existing =
-        state.currentEditIndex !== null ? state.overrides[state.currentEditIndex] : null;
-
-      elements.modalPattern.value = existing ? existing.pattern : url;
-
-      if (existing) {
-        elements.modalTitleText.textContent = 'Edit override';
-        elements.modalBody.value = formatJsonIfPossible(existing.body || '');
-        elements.modalMode.value = existing.mode || 'text';
-        elements.modalMethod.value = resolveModalMethodValue(existing.method);
-        elements.modalRedirectUrl.value = existing.redirectUrl || '';
-        prefillAdvancedFields(existing);
-        setModalOverrideType(
-          existing.failReason ? 'fail' : existing.redirectUrl ? 'redirect' : 'body'
-        );
-      } else {
-        elements.modalTitleText.textContent = 'New override';
-        elements.modalMode.value = 'text';
-        elements.modalRedirectUrl.value = '';
-        prefillAdvancedFields(null);
-        setModalOverrideType('body');
-
-        const capturedMethod = apiByUrl.get(url)?.method?.toUpperCase();
-        elements.modalMethod.value = resolveModalMethodValue(capturedMethod);
-
-        const apiEntry = apiByUrl.get(url);
-        if (apiEntry?.body) {
-          elements.modalBody.value = formatJsonIfPossible(apiEntry.body);
-        } else {
-          elements.modalBody.value = '';
-        }
-
-        if (!apiEntry?.body && options.autoFillOnOpen && state.autoFillFromPayload) {
-          await fillModalWithCurrentBody(url, elements.modalBody);
-        }
-      }
-
-      elements.modal.style.display = 'block';
-      updateBodyTypeBadge();
-      updateImagePreview(elements.modalBody.value);
-      elements.modalBody.focus();
-    }
-
-    function closeOverrideModal(): void {
-      elements.modal.style.display = 'none';
-      state.selectedApi = null;
-      state.currentEditIndex = null;
-      elements.modalTitleText.textContent = '';
-      elements.modalUrl.title = '';
-      renderApis();
-    }
-
-    function renderApis(): void {
-      elements.apisList.innerHTML = '';
-      const searchTerm = state.apiSearchTerm.trim().toLowerCase();
-
-      const visibleApis = state.apis.filter(
-        api => !searchTerm || api.url.toLowerCase().includes(searchTerm)
-      );
-      const overriddenApis = visibleApis.filter(api =>
-        state.overrides.some(override => wouldApply(override, api))
-      );
-      const otherApis = visibleApis.filter(
-        api => !state.overrides.some(override => wouldApply(override, api))
-      );
-
-      if (state.currentTab === 'overridden') {
-        appendApiBucket(overriddenApis, searchTerm);
-      } else {
-        appendApiBucket(otherApis, searchTerm);
-      }
-
-      if (elements.apisList.childElementCount === 0) {
-        const emptyState = document.createElement('div');
-        emptyState.className = 'api-empty-state';
-        emptyState.textContent = searchTerm
-          ? `No APIs match "${state.apiSearchTerm}".`
-          : 'No captured APIs yet.';
-        elements.apisList.appendChild(emptyState);
-      }
-      updateTabLabels();
-    }
-
-    function switchTab(tab: 'overridden' | 'other' | 'overrides'): void {
-      state.currentTab = tab;
-
-      elements.tabsContainer
-        .querySelectorAll('.tab-btn')
-        .forEach(btn => btn.classList.toggle('active', (btn as HTMLElement).dataset.tab === tab));
-
-      elements.apisSection.style.display = 'none';
-      elements.overridesSection.style.display = 'none';
-
-      if (tab === 'overrides') {
-        elements.overridesSection.style.display = 'block';
-        renderList();
-      } else {
-        elements.apisSection.style.display = 'block';
-        renderApis();
-      }
-    }
-
-    function updateTabLabels(): void {
-      const overriddenCount = state.apis.filter(api =>
-        state.overrides.some(override => wouldApply(override, api))
-      ).length;
-      const otherCount = state.apis.length - overriddenCount;
-
-      elements.tabsContainer.querySelectorAll('.tab-btn').forEach(btn => {
-        const tab = (btn as HTMLElement).dataset.tab;
-        if (tab === 'other') btn.textContent = `Captured APIs (${otherCount})`;
-        else if (tab === 'overridden') btn.textContent = `Overridden (${overriddenCount})`;
-        else if (tab === 'overrides') btn.textContent = `Rules (${state.overrides.length})`;
-      });
-    }
-
-    function renderApiSection(type: string, apis: ApiEntry[], searchTerm: string): HTMLDivElement {
-      const collKey = `${state.currentTab}_${type}`;
-      const isCollapsed = !!state.collapsedTypes[collKey];
-
-      const section = document.createElement('div');
-      section.className = 'api-section';
-
-      const ul = document.createElement('ul');
-      ul.style.display = isCollapsed ? 'none' : '';
-
-      const h4 = document.createElement('h4');
-      h4.style.cursor = 'pointer';
-      h4.style.userSelect = 'none';
-      h4.appendChild(document.createTextNode(`${TYPE_LABELS[type] || type.toUpperCase()} `));
-      const count = document.createElement('span');
-      count.className = 'api-count';
-      count.textContent = String(apis.length);
-      h4.appendChild(count);
-      h4.appendChild(document.createTextNode(' '));
-      const chevron = document.createElement('span');
-      chevron.className = 'type-chevron';
-      chevron.textContent = isCollapsed ? '▶' : '▼';
-      h4.appendChild(chevron);
-      h4.addEventListener('click', () => {
-        state.collapsedTypes[collKey] = !state.collapsedTypes[collKey];
-        void persistApiUiState();
-        ul.style.display = state.collapsedTypes[collKey] ? 'none' : '';
-        chevron.textContent = state.collapsedTypes[collKey] ? '▶' : '▼';
-      });
-      section.appendChild(h4);
-
-      apis.forEach(api => {
-        const li = document.createElement('li');
-        li.className = 'api-item';
-        const matchingOverrides = state.overrides.filter(override => wouldApply(override, api));
-        const matchedOverride =
-          matchingOverrides.find(override => override.enabled !== false) ?? matchingOverrides[0];
-        const isOverridden = matchingOverrides.length > 0;
-        const isSelected = state.selectedApi ? patternMatches(state.selectedApi, api.url) : false;
-        if (isOverridden) li.classList.add('active');
-        if (matchedOverride?.enabled === false) li.classList.add('api-item--rule-disabled');
-        if (isSelected) li.classList.add('selected');
-        li.dataset.url = api.url;
-        const statusLabel =
-          typeof api.statusCode === 'number'
-            ? `<span class="api-status">${api.statusCode}</span> `
-            : '';
-        li.innerHTML = `
-          <div class="api-item-content">
-            <b title="${escapeHtml(api.url)}">${highlightApiLabel(api.url, searchTerm)} ${statusLabel}</b>
-          </div>
-          <div class="api-item-controls">
-            <button class="copy-curl-btn" title="Copy cURL">cURL</button>
-          </div>
-        `;
-        li.addEventListener('click', event => {
-          const target = event.target as HTMLElement;
-          if (target.classList.contains('copy-curl-btn')) {
-            event.stopPropagation();
-            void copyCurl(api);
-            return;
-          }
-          void openOverrideModal(api.url);
-        });
-        ul.appendChild(li);
-      });
-
-      section.appendChild(ul);
-      return section;
-    }
-
-    function appendApiBucket(apis: ApiEntry[], searchTerm: string): void {
-      if (apis.length === 0) return;
-
-      const grouped: Record<string, ApiEntry[]> = {};
-
-      apis.forEach(api => {
-        const t = normalizeApiType(api.type);
-        if (!grouped[t]) grouped[t] = [];
-        grouped[t].push(api);
-      });
-
-      const bucket = document.createElement('div');
-      bucket.className = 'api-bucket';
-
-      TYPE_ORDER.forEach(type => {
-        if (!grouped[type]?.length) return;
-        bucket.appendChild(renderApiSection(type, grouped[type], searchTerm));
-      });
-
-      elements.apisList.appendChild(bucket);
-    }
-
-    async function loadApis(): Promise<number> {
-      const tab = await getActiveTab();
-      const tabId = tab?.id;
-      if (typeof tabId !== 'number') {
-        return 0;
-      }
-
-      const newDomain = tab?.url ? NetworkOverridesUtils.getOrigin(tab.url) : '';
-      if (newDomain && newDomain !== currentDomain) {
-        currentDomain = newDomain;
-        const data = await chrome.storage.local.get([domainKey('overrides')]);
-        state.overrides = data[domainKey('overrides')] || [];
-        renderList();
-        updateTabLabels();
-        await notifyBackground();
-      }
-
-      return new Promise(resolve => {
-        chrome.runtime.sendMessage({ type: 'getApis', tabId }, (response: any) => {
-          const apisResponse = response?.apis;
-          if (Array.isArray(apisResponse)) {
-            const existingBodies = new Map<string, string>();
-            state.apis.forEach(api => {
-              if (api.body) existingBodies.set(api.url, api.body);
-            });
-
-            state.apis = apisResponse;
-            apiByUrl.clear();
-            state.apis.forEach(api => apiByUrl.set(api.url, api));
-
-            state.apis.forEach(api => {
-              if (!api.body && existingBodies.has(api.url)) {
-                api.body = existingBodies.get(api.url);
-              }
-            });
-
-            renderApis();
-            resolve(apisResponse.length);
-            return;
-          }
-
-          resolve(0);
-        });
-      });
-    }
-
-    async function refreshApisWithRetry(): Promise<void> {
-      elements.refreshBtn.classList.add('loading');
-      const attempts = 5;
-      try {
-        for (let attempt = 0; attempt < attempts; attempt += 1) {
-          const count = await loadApis();
-          if (count > 0) {
-            return;
-          }
-          if (attempt < attempts - 1) {
-            await delay(250);
-          }
-        }
-      } finally {
-        elements.refreshBtn.classList.remove('loading');
-      }
-    }
-
-    async function notifyBackground(): Promise<void> {
-      const tab = await getActiveTab();
-      if (typeof tab?.id !== 'number') {
-        return;
-      }
-
-      const overridesKey = domainKey('overrides');
-      const data = await chrome.storage.local.get(['enabled', overridesKey, 'overrides']);
-      const domainOverrides = data[overridesKey];
-      const flatOverrides = data['overrides'];
-      chrome.runtime.sendMessage({
-        type: 'update',
-        tabId: tab.id,
-        tabUrl: tab.url,
-        enabled: !!data['enabled'],
-        overrides: domainOverrides !== undefined ? domainOverrides : flatOverrides || [],
-      });
-    }
-
-    async function persistOverrides(): Promise<void> {
-      await chrome.storage.local.set({ [domainKey('overrides')]: state.overrides });
-      renderList();
-      renderApis();
-      await notifyBackground();
-    }
-
-    elements.addBtn.addEventListener('click', async () => {
-      const pattern = elements.patternInput.value.trim();
-      if (!pattern) {
-        alert('Pattern is required');
-        return;
-      }
-      if (!isValidPattern(pattern)) {
-        alert('Invalid pattern format');
-        return;
-      }
-
-      const mode = elements.modeSelect.value as OverrideMode;
-      const body = elements.bodyInput.value || '';
-      const redirectUrl = elements.redirectUrlInput.value.trim() || undefined;
-
-      const override: OverrideRule = { pattern, body, mode };
-      if (redirectUrl) {
-        override.redirectUrl = redirectUrl;
-      }
-
-      state.overrides.push(override);
-      try {
-        await chrome.storage.local.set({ [domainKey('overrides')]: state.overrides });
-      } catch (e) {
-        state.overrides.pop();
-        alert(`Failed to save override: ${e instanceof Error ? e.message : String(e)}`);
-        return;
-      }
-
-      elements.patternInput.value = '';
-      elements.bodyInput.value = '';
-      elements.redirectUrlInput.value = '';
-
-      renderList();
-      renderApis();
-      await notifyBackground();
-    });
-
-    elements.listEl.addEventListener('click', async event => {
-      const target = event.target as HTMLElement;
-      const index = Number(target.dataset.index);
-      if (Number.isNaN(index)) {
-        return;
-      }
-
-      if (target.classList.contains('edit-btn')) {
-        openOverrideModalForIndex(index);
-        return;
-      }
-
-      if (target.classList.contains('duplicate-btn')) {
-        if (state.overrides[index]) {
-          const original = state.overrides[index];
-          const clone: OverrideRule = JSON.parse(JSON.stringify(original));
-          state.overrides.splice(index + 1, 0, clone);
-          await persistOverrides();
-        }
-        return;
-      }
-
-      if (!target.classList.contains('del-btn')) {
-        return;
-      }
-
-      state.overrides.splice(index, 1);
-      await chrome.storage.local.set({ [domainKey('overrides')]: state.overrides });
-      renderList();
-      renderApis();
-      await notifyBackground();
-    });
-
-    elements.listEl.addEventListener('change', async event => {
-      const target = event.target as HTMLElement;
-      if (!target.classList.contains('override-enabled-toggle')) {
-        return;
-      }
-      const index = Number(target.dataset.index);
-      if (Number.isNaN(index) || !state.overrides[index]) {
-        return;
-      }
-      state.overrides[index].enabled = (target as HTMLInputElement).checked;
-      await persistOverrides();
-    });
-
-    elements.closeModal.addEventListener('click', closeOverrideModal);
-    window.addEventListener('click', event => {
-      if (event.target === elements.modal) {
-        closeOverrideModal();
-      }
-    });
-
-    elements.saveOverrideBtn.addEventListener('click', async () => {
-      if (!state.selectedApi) {
-        return;
-      }
-
-      const pattern = elements.modalPattern.value.trim() || state.selectedApi;
-      if (!isValidPattern(pattern)) {
-        alert('Invalid pattern format');
-        return;
-      }
-
-      const overrideType =
-        ((document.querySelector('input[name="modal-override-type"]:checked') as HTMLInputElement)
-          ?.value as ModalOverrideType) || 'body';
-
-      const mode = overrideType === 'body' ? (elements.modalMode.value as OverrideMode) : 'text';
-      const body = overrideType === 'body' ? elements.modalBody.value || '' : '';
-      const redirectUrl =
-        overrideType === 'redirect'
-          ? elements.modalRedirectUrl.value.trim() || undefined
-          : undefined;
-      const method = elements.modalMethod.value;
-
-      let statusCode: number | undefined;
-      let delayMs: number | undefined;
-      let responseHeaders: NetworkOverridesShared.FetchHeader[] | undefined;
-      let requestHeaders: NetworkOverridesShared.FetchHeader[] | undefined;
-
-      if (elements.modalRequestHeaders && elements.modalRequestHeaders.value.trim()) {
-        const parsedReq = parseHeaderLines(elements.modalRequestHeaders.value);
-        if (!parsedReq) {
-          alert('Request headers must be one "Header-Name: value" per line');
-          return;
-        }
-        if (parsedReq.length > 0) requestHeaders = parsedReq;
-      }
-
-      if (overrideType !== 'redirect') {
-        const delayRaw = elements.modalDelay.value.trim();
-        if (delayRaw) {
-          const parsedDelay = Number(delayRaw);
-          if (!Number.isFinite(parsedDelay) || parsedDelay < 0 || parsedDelay > 120000) {
-            alert('Delay must be a number between 0 and 120000 ms');
-            return;
-          }
-          delayMs = parsedDelay;
-        }
-      }
-      if (overrideType === 'body') {
-        const statusRaw = elements.modalStatus.value.trim();
-        if (statusRaw) {
-          const parsedStatus = Number(statusRaw);
-          if (!Number.isInteger(parsedStatus) || parsedStatus < 100 || parsedStatus > 599) {
-            alert('Status must be an integer between 100 and 599');
-            return;
-          }
-          statusCode = parsedStatus;
-        }
-        if (elements.modalHeaders.value.trim()) {
-          const parsedHeaders = parseHeaderLines(elements.modalHeaders.value);
-          if (!parsedHeaders) {
-            alert('Extra headers must be one "Header-Name: value" per line');
-            return;
-          }
-          if (parsedHeaders.length > 0) responseHeaders = parsedHeaders;
-        }
-      }
-
-      const oldOverride =
-        state.currentEditIndex !== null && state.overrides[state.currentEditIndex]
-          ? { ...state.overrides[state.currentEditIndex] }
-          : null;
-
-      const override: OverrideRule = { pattern, body, mode };
-      if (redirectUrl) {
-        override.redirectUrl = redirectUrl;
-      }
-      if (method && method !== 'ANY') {
-        override.method = method;
-      }
-      if (elements.modalGraphqlOp && elements.modalGraphqlOp.value.trim()) {
-        override.graphqlOperation = elements.modalGraphqlOp.value.trim();
-      }
-      if (oldOverride?.enabled === false) {
-        override.enabled = false;
-      }
-      if (overrideType === 'fail') {
-        override.failReason = FAIL_REASONS.includes(elements.modalFailReason.value)
-          ? elements.modalFailReason.value
-          : 'Failed';
-      }
-      if (statusCode !== undefined) override.statusCode = statusCode;
-      if (delayMs !== undefined) override.delayMs = delayMs;
-      if (responseHeaders !== undefined) override.responseHeaders = responseHeaders;
-      if (requestHeaders !== undefined) override.requestHeaders = requestHeaders;
-
-      if (state.currentEditIndex !== null && state.overrides[state.currentEditIndex]) {
-        state.overrides[state.currentEditIndex] = override;
-      } else {
-        state.overrides.unshift(override);
-      }
-
-      try {
-        await persistOverrides();
-      } catch (e) {
-        if (oldOverride) {
-          state.overrides[state.currentEditIndex!] = oldOverride;
-        } else {
-          state.overrides.shift();
-        }
-        alert(`Failed to save override: ${e instanceof Error ? e.message : String(e)}`);
-        return;
-      }
-      closeOverrideModal();
-    });
-
-    elements.formatJsonBtn.addEventListener('click', () => {
-      const current = elements.modalBody.value;
-      const formatted = formatJsonIfPossible(current);
-      if (formatted !== current) {
-        elements.modalBody.value = formatted;
-        updateBodyTypeBadge();
-      }
-    });
-
-    elements.modalBody.addEventListener('input', () => {
-      updateBodyTypeBadge();
-      updateImagePreview(elements.modalBody.value);
-    });
-
-    document.querySelectorAll('input[name="modal-override-type"]').forEach(radio => {
-      radio.addEventListener('change', () => {
-        setModalOverrideType((radio as HTMLInputElement).value as ModalOverrideType);
-      });
-    });
-
-    elements.enableCheckbox.addEventListener('change', async () => {
-      await chrome.storage.local.set({ enabled: elements.enableCheckbox.checked });
-      await notifyBackground();
-      // The port broadcast corrects this moments later if attach is still in flight.
-      await refreshAttachStatus();
-    });
-
-    elements.refreshBtn.addEventListener('click', async () => {
-      await refreshApisWithRetry();
-    });
-
-    elements.infoBtn.addEventListener('click', () => {
-      window.open('guide.html', '_blank');
-    });
-
-    elements.addApiBtn.addEventListener('click', () => {
-      state.selectedApi = '__new__';
-      state.currentEditIndex = null;
-      elements.modalUrl.textContent = '';
-      elements.modalUrl.title = '';
-      elements.modalTitleText.textContent = 'New override';
-      elements.modalPattern.value = '';
-      elements.modalMethod.value = 'ANY';
-      elements.modalMode.value = 'text';
-      elements.modalBody.value = '';
-      elements.modalRedirectUrl.value = '';
-      prefillAdvancedFields(null);
-      setModalOverrideType('body');
-      elements.modalPattern.disabled = false;
-      elements.modal.style.display = 'block';
-      updateBodyTypeBadge();
-      elements.modalPattern.focus();
-    });
-
-    elements.exportRulesBtn.addEventListener('click', () => {
-      let blob: Blob;
-      try {
-        // Bodies that hold JSON objects/arrays are exported as real nested
-        // JSON (pretty-printed with the envelope, no escaped-string noise);
-        // import converts them back to string bodies.
-        const compactRules = state.overrides.map(override => {
-          if (!override.body) return override;
-          try {
-            const parsed = JSON.parse(override.body);
-            if (parsed !== null && typeof parsed === 'object') {
-              return { ...override, body: parsed as unknown as string };
-            }
-            return override;
-          } catch {
-            return override;
-          }
-        });
-        const payload = {
-          version: 1,
-          domain: currentDomain,
-          exportedAt: new Date().toISOString(),
-          overrides: compactRules,
-        };
-        blob = new Blob([JSON.stringify(payload, null, 2)], { type: 'application/json' });
-      } catch (e) {
-        alert(`Failed to export rules: ${e instanceof Error ? e.message : String(e)}`);
-        return;
-      }
-      const url = URL.createObjectURL(blob);
-      const safeDomain = currentDomain.replace(/[^a-z0-9.-]+/gi, '_') || 'rules';
-      const a = document.createElement('a');
-      a.href = url;
-      a.download = `network-overrides-${safeDomain}-${Date.now()}.json`;
-      document.body.appendChild(a);
-      a.click();
-      a.remove();
-      URL.revokeObjectURL(url);
-    });
-
-    elements.importRulesBtn.addEventListener('click', () => {
-      elements.importRulesInput.value = '';
-      elements.importRulesInput.click();
-    });
-
-    elements.importRulesInput.addEventListener('change', async () => {
-      const file = elements.importRulesInput.files?.[0];
-      if (!file) {
-        return;
-      }
-
-      let parsed: any;
-      try {
-        parsed = JSON.parse(await file.text());
-      } catch (e) {
-        alert(`Invalid file: ${e instanceof Error ? e.message : String(e)}`);
-        return;
-      }
-
-      if (!parsed || !Array.isArray(parsed.overrides)) {
-        alert('Invalid file: missing "overrides" list.');
-        return;
-      }
-
-      const isValidImportHeader = (header: any): boolean =>
-        !!header &&
-        typeof header.name === 'string' &&
-        header.name.trim() !== '' &&
-        typeof header.value === 'string';
-      const isValidRule = (rule: any): boolean =>
-        !!rule &&
-        typeof rule.pattern === 'string' &&
-        (rule.mode === 'text' || rule.mode === 'file') &&
-        (rule.method === undefined ||
-          (typeof rule.method === 'string' && KNOWN_METHODS.includes(rule.method.toUpperCase()))) &&
-        (rule.body === undefined ||
-          typeof rule.body === 'string' ||
-          (typeof rule.body === 'object' && rule.body !== null)) &&
-        (rule.redirectUrl === undefined || typeof rule.redirectUrl === 'string') &&
-        (rule.statusCode === undefined ||
-          (Number.isInteger(rule.statusCode) &&
-            rule.statusCode >= 100 &&
-            rule.statusCode <= 599)) &&
-        (rule.delayMs === undefined ||
-          (typeof rule.delayMs === 'number' && rule.delayMs >= 0 && rule.delayMs <= 120000)) &&
-        (rule.responseHeaders === undefined ||
-          (Array.isArray(rule.responseHeaders) &&
-            rule.responseHeaders.every(isValidImportHeader))) &&
-        (rule.requestHeaders === undefined ||
-          (Array.isArray(rule.requestHeaders) && rule.requestHeaders.every(isValidImportHeader))) &&
-        (rule.graphqlOperation === undefined || typeof rule.graphqlOperation === 'string') &&
-        (rule.processTemplates === undefined || typeof rule.processTemplates === 'boolean') &&
-        (rule.failReason === undefined ||
-          (typeof rule.failReason === 'string' &&
-            FAIL_REASONS.includes(rule.failReason) &&
-            rule.redirectUrl === undefined)) &&
-        (rule.enabled === undefined || typeof rule.enabled === 'boolean');
-      if (!parsed.overrides.every(isValidRule)) {
-        alert(
-          'Invalid file: a rule has a missing/invalid "pattern", "mode", "method", mock field, or field type.'
-        );
-        return;
-      }
-
-      if (typeof parsed.domain === 'string' && parsed.domain && parsed.domain !== currentDomain) {
-        const proceedDespiteDomainMismatch = confirm(
-          `This file was exported from "${parsed.domain}", but you are on "${currentDomain}". Import into "${currentDomain}" anyway?`
-        );
-        if (!proceedDespiteDomainMismatch) {
-          return;
-        }
-      }
-
-      // Only carry over known OverrideRule fields; drop anything else an
-      // untrusted file might have included so it never reaches storage/background.
-      const importedRules: OverrideRule[] = parsed.overrides.map((rule: any): OverrideRule => {
-        const clean = { pattern: rule.pattern, mode: rule.mode } as OverrideRule;
-        if (rule.body !== undefined) {
-          // Nested-JSON bodies (the export format) become string bodies again.
-          clean.body = typeof rule.body === 'string' ? rule.body : JSON.stringify(rule.body);
-        }
-        if (rule.redirectUrl !== undefined) clean.redirectUrl = rule.redirectUrl;
-        if (rule.enabled !== undefined) clean.enabled = rule.enabled;
-        if (rule.method !== undefined) clean.method = rule.method.toUpperCase();
-        if (rule.graphqlOperation !== undefined) clean.graphqlOperation = rule.graphqlOperation;
-        if (rule.processTemplates !== undefined) clean.processTemplates = rule.processTemplates;
-        if (rule.statusCode !== undefined) clean.statusCode = rule.statusCode;
-        if (rule.delayMs !== undefined) clean.delayMs = rule.delayMs;
-        if (rule.responseHeaders !== undefined) {
-          clean.responseHeaders = rule.responseHeaders.map((header: any) => ({
-            name: header.name,
-            value: header.value,
-          }));
-        }
-        if (rule.requestHeaders !== undefined) {
-          clean.requestHeaders = rule.requestHeaders.map((header: any) => ({
-            name: header.name,
-            value: header.value,
-          }));
-        }
-        if (rule.failReason !== undefined) clean.failReason = rule.failReason;
-        return clean;
-      });
-
-      if (state.overrides.length > 0) {
-        const merge = confirm(
-          'Rules already exist for this domain.\nOK = append the imported rules to the end of the list.\nCancel = delete the existing rules and replace them with the imported file.'
-        );
-        state.overrides = merge ? [...state.overrides, ...importedRules] : importedRules;
-      } else {
-        state.overrides = importedRules;
-      }
-
-      await persistOverrides();
-    });
-
-    elements.tabsContainer.addEventListener('click', event => {
-      const btn = (event.target as HTMLElement).closest('.tab-btn') as HTMLElement;
-      if (btn?.dataset.tab) {
-        switchTab(btn.dataset.tab as 'overridden' | 'other' | 'overrides');
-      }
-    });
-
-    elements.apiSearchInput.addEventListener('input', () => {
-      state.apiSearchTerm = elements.apiSearchInput.value;
-      void persistApiUiState();
-      renderApis();
-    });
-
-    function loadProfiles(): void {
-      if (!elements.profilesSelect) return;
-      const key = domainKey('profiles');
-      chrome.storage.local.get([key], (data: any) => {
-        const list: NetworkOverridesShared.RuleProfile[] = Array.isArray(data?.[key])
-          ? data[key]
-          : [];
-        elements.profilesSelect!.innerHTML = '<option value="">-- Rule Profiles --</option>';
-        list.forEach(p => {
-          const opt = document.createElement('option');
-          opt.value = p.id;
-          opt.textContent = `${p.name} (${p.rules.length} rules)`;
-          elements.profilesSelect!.appendChild(opt);
-        });
-      });
-    }
-
-    if (elements.saveProfileBtn) {
-      elements.saveProfileBtn.addEventListener('click', async () => {
-        if (state.overrides.length === 0) {
-          alert('No rules to save into a profile.');
-          return;
-        }
-        const name = prompt('Enter a name for this Rule Profile:');
-        if (!name || !name.trim()) return;
-        const key = domainKey('profiles');
-        const data = await chrome.storage.local.get([key]);
-        const list: NetworkOverridesShared.RuleProfile[] = Array.isArray(data?.[key])
-          ? data[key]
-          : [];
-        const newProfile: NetworkOverridesShared.RuleProfile = {
-          id: 'profile_' + Date.now(),
-          name: name.trim(),
-          createdAt: Date.now(),
-          rules: JSON.parse(JSON.stringify(state.overrides)),
-        };
-        list.push(newProfile);
-        await chrome.storage.local.set({ [key]: list });
-        loadProfiles();
-        alert(`Saved profile "${newProfile.name}"!`);
-      });
-    }
-
-    if (elements.profilesSelect) {
-      elements.profilesSelect.addEventListener('change', async () => {
-        const id = elements.profilesSelect!.value;
-        if (!id) return;
-        const key = domainKey('profiles');
-        const data = await chrome.storage.local.get([key]);
-        const list: NetworkOverridesShared.RuleProfile[] = Array.isArray(data?.[key])
-          ? data[key]
-          : [];
-        const selected = list.find(p => p.id === id);
-        if (!selected) return;
-        const replace = confirm(
-          `Apply profile "${selected.name}"?\n\nOK = Replace existing rules\nCancel = Merge with existing rules`
-        );
-        if (replace) {
-          state.overrides = JSON.parse(JSON.stringify(selected.rules));
-        } else {
-          state.overrides = [...state.overrides, ...JSON.parse(JSON.stringify(selected.rules))];
-        }
-        await persistOverrides();
-        elements.profilesSelect!.value = '';
-      });
-    }
-
-    if (elements.deleteProfileBtn) {
-      elements.deleteProfileBtn.addEventListener('click', async () => {
-        const id = elements.profilesSelect?.value;
-        if (!id) {
-          alert('Please select a profile to delete.');
-          return;
-        }
-        const key = domainKey('profiles');
-        const data = await chrome.storage.local.get([key]);
-        let list: NetworkOverridesShared.RuleProfile[] = Array.isArray(data?.[key])
-          ? data[key]
-          : [];
-        list = list.filter(p => p.id !== id);
-        await chrome.storage.local.set({ [key]: list });
-        loadProfiles();
-      });
-    }
-
-    function initCapturedTypes(): void {
-      const cbs = document.querySelectorAll<HTMLInputElement>('.capture-type-cb');
-      if (cbs.length === 0) return;
-      chrome.storage.local.get(['capturedBodyTypes'], (data: any) => {
-        const saved: string[] = Array.isArray(data?.capturedBodyTypes)
-          ? data.capturedBodyTypes
-          : ['xhr', 'fetch'];
-        cbs.forEach(cb => {
-          cb.checked = saved.includes(cb.value);
-          cb.addEventListener('change', () => {
-            const types = Array.from(cbs)
-              .filter(c => c.checked)
-              .map(c => c.value);
-            void chrome.storage.local.set({ capturedBodyTypes: types });
-            chrome.runtime.sendMessage({ type: 'updateCapturedBodyTypes', types });
-          });
-        });
-      });
-    }
-
-    void (async () => {
-      const tab = await getActiveTab();
-      if (tab?.url) {
-        currentDomain = NetworkOverridesUtils.getOrigin(tab.url);
-      }
-
-      const data = await chrome.storage.local.get(
-        [
-          'enabled',
-          currentDomain && domainKey('enabled'),
-          currentDomain && domainKey('overrides'),
-          'overrides',
-          'apiSearchTerm',
-        ].filter(Boolean)
-      );
-
-      let savedEnabled = data['enabled'];
-      if (savedEnabled === undefined) {
-        savedEnabled = data[domainKey('enabled')];
-        if (savedEnabled !== undefined) {
-          await chrome.storage.local.set({ enabled: !!savedEnabled });
-        }
-      }
-      elements.enableCheckbox.checked = !!savedEnabled;
-
-      const domainOverrides = data[domainKey('overrides')];
-      const flatOverrides = data['overrides'];
-      state.overrides = domainOverrides !== undefined ? domainOverrides : flatOverrides || [];
-
-      if (flatOverrides?.length && domainOverrides === undefined && currentDomain) {
-        await chrome.storage.local.set({ [domainKey('overrides')]: flatOverrides });
-      }
-
-      state.apiSearchTerm = typeof data.apiSearchTerm === 'string' ? data.apiSearchTerm : '';
-      elements.apiSearchInput.value = state.apiSearchTerm;
-
-      loadProfiles();
-      initCapturedTypes();
-
-      await notifyBackground();
-      await refreshAttachStatus();
-      await refreshApisWithRetry();
-      await startApiStream();
-      switchTab('other');
-    })();
-
-    window.addEventListener('focus', () => void startApiStream());
-    // onDisconnect already triggers a reconnect as soon as the port dies; this is
-    // just a low-frequency safety net in case a disconnect event is ever missed.
-    window.setInterval(() => void startApiStream(), 15000);
-
-    let scrollTimer: ReturnType<typeof setTimeout> | null = null;
-    const scrollContainers = [
-      document.body,
-      ...Array.from(document.querySelectorAll<HTMLElement>('.modal, .modal-content')),
-    ].filter(Boolean);
-    document.addEventListener(
-      'scroll',
-      () => {
-        scrollContainers.forEach(el => el.classList.add('scrolling'));
-        if (scrollTimer) clearTimeout(scrollTimer);
-        scrollTimer = setTimeout(() => {
-          scrollContainers.forEach(el => el.classList.remove('scrolling'));
-        }, 500);
-      },
-      { passive: true }
-    );
-
-    return {
-      addApis: addApisToState,
-    };
-  }
-
-  async function fillModalWithCurrentBody(url: string, target: HTMLTextAreaElement): Promise<void> {
-    const tab = await getActiveTab();
-    const tabId = tab?.id;
-    if (typeof tabId !== 'number') {
-      return;
-    }
-
-    const response = await new Promise<any>(resolve => {
-      chrome.runtime.sendMessage({ type: 'getApiData', tabId, url }, resolve);
-    });
-
-    if (response?.body) {
-      target.value = formatJsonIfPossible(response.body);
-    }
-  }
-
-  async function getActiveTab(): Promise<chrome.tabs.Tab | undefined> {
-    if (typeof chrome.devtools !== 'undefined' && chrome.devtools?.inspectedWindow?.tabId) {
-      return new Promise(resolve => {
-        chrome.tabs.get(chrome.devtools.inspectedWindow.tabId, tab => resolve(tab));
-      });
-    }
-    return new Promise(resolve => {
-      chrome.tabs.query({ active: true, currentWindow: true }, tabs => {
-        resolve(tabs[0]);
-      });
-    });
-  }
-
-  function delay(ms: number): Promise<void> {
-    return new Promise(resolve => {
-      window.setTimeout(resolve, ms);
-    });
-  }
-
   function getElements(): Elements {
     return {
       enableCheckbox: document.getElementById('enable') as HTMLInputElement,
@@ -1463,9 +70,9 @@ namespace NetworkOverridesUi {
       modalAdvancedFields: document.getElementById('modal-advanced-fields') as HTMLDivElement,
       modalStatusField: document.getElementById('modal-status-field') as HTMLElement,
       modalHeadersField: document.getElementById('modal-headers-field') as HTMLElement,
+      modalFeedback: document.getElementById('modal-feedback') as HTMLElement,
       saveOverrideBtn: document.getElementById('save-override') as HTMLButtonElement,
       formatJsonBtn: document.getElementById('format-json-btn') as HTMLButtonElement,
-      bodyTypeBadge: document.getElementById('body-type-badge') as HTMLElement,
       closeModal: document.querySelector('.close') as HTMLElement,
       newRow: document.getElementById('new-row') as HTMLDivElement,
       refreshBtn: document.getElementById('refresh-apis') as HTMLButtonElement,
@@ -1484,96 +91,399 @@ namespace NetworkOverridesUi {
       profilesSelect: document.getElementById('profiles-select') as HTMLSelectElement,
       saveProfileBtn: document.getElementById('save-profile-btn') as HTMLButtonElement,
       deleteProfileBtn: document.getElementById('delete-profile-btn') as HTMLButtonElement,
+      importCurlSwaggerBtn: document.getElementById('import-curl-swagger-btn') as HTMLButtonElement,
+      curlSwaggerModal: document.getElementById('curl-swagger-modal') as HTMLDivElement,
+      curlSwaggerTextarea: document.getElementById('curl-swagger-textarea') as HTMLTextAreaElement,
+      curlSwaggerFileInput: document.getElementById('curl-swagger-file-input') as HTMLInputElement,
+      curlSwaggerImportBtn: document.getElementById('curl-swagger-import-btn') as HTMLButtonElement,
+      curlSwaggerCloseModal: document.getElementById('curl-swagger-close') as HTMLElement,
+      modalRequestHeadersTable: document.getElementById(
+        'modal-request-headers-table'
+      ) as HTMLDivElement,
+      modalResponseHeadersTable: document.getElementById(
+        'modal-response-headers-table'
+      ) as HTMLDivElement,
     };
   }
 
-  export function escapeHtml(value: string): string {
-    const replacements: Record<string, string> = {
-      '&': '&amp;',
-      '<': '&lt;',
-      '>': '&gt;',
-      '"': '&quot;',
-      "'": '&#39;',
+  export function init(options: AppOptions = { autoFillOnOpen: true, showManualEditor: false }): {
+    addApis: (apis: ApiEntry[]) => void;
+  } {
+    const elements = getElements();
+    upgradeUiPrimitives();
+    const state: UiState = {
+      overrides: [],
+      currentEditIndex: null,
+      capturedApis: [],
+      apiFilter: '',
+      activeTab: 'other',
+      attached: false,
+      enabled: false,
+      attachError: null,
     };
 
-    return value.replace(/[&<>"']/g, char => replacements[char] || char);
-  }
+    let activeTabId: number | null = null;
+    let activeTabUrl = '';
+    let port: chrome.runtime.Port | null = null;
+
+    if (elements.newRow) {
+      elements.newRow.style.display = options.showManualEditor ? '' : 'none';
+    }
+    elements.apisSection.style.display = 'block';
+    elements.overridesSection.style.display = 'none';
 
-  export function highlightApiLabel(url: string, rawSearchTerm: string): string {
-    const label = formatApiLabel(url);
-    const searchTerm = rawSearchTerm.trim().toLowerCase();
-    if (!searchTerm) {
-      return escapeHtml(label);
+    function renderRules(): void {
+      renderRulesList(
+        elements,
+        state,
+        index => openEditModal(index),
+        (index, enabled) => toggleRule(index, enabled),
+        index => deleteRule(index),
+        index => duplicateRule(index)
+      );
+      renderApis();
     }
 
-    const lowerLabel = label.toLowerCase();
-    const matchIndex = lowerLabel.indexOf(searchTerm);
-    if (matchIndex === -1) {
-      return escapeHtml(label);
+    function renderApis(): void {
+      renderCapturedApis(elements, state, api => handleApiClick(api));
     }
 
-    const before = escapeHtml(label.slice(0, matchIndex));
-    const match = escapeHtml(label.slice(matchIndex, matchIndex + searchTerm.length));
-    const after = escapeHtml(label.slice(matchIndex + searchTerm.length));
-    return `${before}<mark class="api-match">${match}</mark>${after}`;
-  }
+    let persistenceQueue: Promise<void> = Promise.resolve();
 
-  export function formatApiLabel(url: string): string {
-    if (!url.startsWith('data:')) {
-      return url;
+    function saveState(newOverrides: OverrideRule[]): Promise<PersistenceResult> {
+      const previousOverrides = state.overrides;
+      const snapshot = newOverrides.map(rule => ({ ...rule }));
+      state.overrides = snapshot;
+
+      const operation = persistenceQueue.then(async () => {
+        const overridesKey = getStorageKey('overrides');
+        try {
+          await Promise.resolve(chrome.storage.local.set({ [overridesKey]: snapshot }));
+        } catch (error) {
+          if (state.overrides === snapshot) state.overrides = previousOverrides;
+          throw error;
+        }
+        try {
+          await notifyBackground(snapshot);
+          return { applied: true };
+        } catch (error) {
+          return {
+            applied: false,
+            warning: errorMessage(error),
+            retry: () => notifyBackground(),
+          };
+        }
+      });
+      persistenceQueue = operation.then(
+        () => undefined,
+        () => undefined
+      );
+      return operation;
+    }
+
+    function notifyBackground(overrides = state.overrides): Promise<void> {
+      if (activeTabId === null) return Promise.reject(new Error('No active tab is available'));
+      return new Promise((resolve, reject) => {
+        try {
+          chrome.runtime.sendMessage(
+            {
+              type: 'update',
+              tabId: activeTabId,
+              tabUrl: activeTabUrl,
+              enabled: state.enabled,
+              overrides,
+            },
+            (response: { success?: boolean; error?: string } | undefined) => {
+              if (chrome.runtime.lastError) {
+                reject(new Error(chrome.runtime.lastError.message));
+                return;
+              }
+              if (!response || response.success === false) {
+                reject(new Error(response?.error || 'Background did not confirm the update'));
+                return;
+              }
+              resolve();
+            }
+          );
+        } catch (error) {
+          reject(error instanceof Error ? error : new Error(String(error)));
+        }
+      });
     }
 
-    const commaIndex = url.indexOf(',');
-    const prefix = commaIndex === -1 ? url : url.slice(0, commaIndex);
-    const mediaType = prefix.slice(5) || 'unknown';
-    return `[data URL: ${mediaType}]`;
-  }
+    function toggleRule(index: number, enabled: boolean): void {
+      if (index < 0 || index >= state.overrides.length) return;
+      const nextOverrides = state.overrides.map((rule, ruleIndex) =>
+        ruleIndex === index ? { ...rule, enabled } : rule
+      );
+      void persistRuleChange(
+        saveState,
+        nextOverrides,
+        enabled ? 'Rule enabled' : 'Rule disabled',
+        renderRules
+      );
+    }
 
-  export function formatJsonIfPossible(value: string): string {
-    try {
-      const parsed = JSON.parse(value);
-      return JSON.stringify(parsed, null, 2);
-    } catch {
-      return value;
+    function deleteRule(index: number): void {
+      if (index < 0 || index >= state.overrides.length) return;
+      const nextOverrides = state.overrides.filter((_, ruleIndex) => ruleIndex !== index);
+      void persistRuleChange(saveState, nextOverrides, 'Rule deleted', renderRules);
     }
-  }
 
-  export function normalizeApiType(type: any): string {
-    const rawType = typeof type === 'string' ? type : 'other';
-    const normalized = rawType.toLowerCase();
-    if (normalized === 'xmlhttprequest') {
-      return 'xhr';
+    function duplicateRule(index: number): void {
+      if (index < 0 || index >= state.overrides.length) return;
+      const copy = JSON.parse(JSON.stringify(state.overrides[index]));
+      const nextOverrides = [...state.overrides];
+      nextOverrides.splice(index + 1, 0, copy);
+      void persistRuleChange(saveState, nextOverrides, 'Rule duplicated', renderRules);
     }
-    return normalized;
-  }
 
-  async function copyCurl(api: ApiEntry): Promise<void> {
-    const curl = generateCurl(api);
-    await copyToClipboard(curl);
-  }
+    function openEditModal(index: number): void {
+      const rule = state.overrides[index];
+      if (!rule) return;
+
+      state.currentEditIndex = index;
+      elements.modalTitleText.textContent = 'Edit override';
+      elements.modalUrl.textContent = rule.pattern;
+      elements.modalPattern.value = rule.pattern;
+      const storedMethod = (rule.method || 'ANY').toUpperCase();
+      elements.modalMethod.value = KNOWN_METHODS.includes(storedMethod) ? storedMethod : 'ANY';
+
+      let type: 'body' | 'redirect' | 'fail' = 'body';
+      if (rule.failReason) type = 'fail';
+      else if (rule.redirectUrl) type = 'redirect';
+
+      const typeRadio = elements.modal.querySelector(
+        `input[name="modal-override-type"][value="${type}"]`
+      ) as HTMLInputElement;
+      if (typeRadio) typeRadio.checked = true;
+
+      updateModalVisibility(elements, type);
+      elements.modalMode.value = rule.mode || 'text';
+      elements.modalBody.value = formatJsonIfPossible(rule.body || '');
+      elements.modalRedirectUrl.value = rule.redirectUrl || '';
 
-  function generateCurl(api: ApiEntry): string {
-    const method = (api.method || 'GET').toUpperCase();
-    let curl = `curl '${api.url}' \\\n  -X '${method}'`;
+      prefillAdvancedFields(elements, rule);
+      updateBodyFormatAction(elements);
+      updateImagePreview(elements, elements.modalBody.value);
+      openModal(elements);
+    }
 
-    if (api.headers && api.headers.length > 0) {
-      api.headers.forEach(h => {
-        curl += ` \\\n  -H '${h.name}: ${h.value}'`;
+    async function fillModalBody(url: string): Promise<void> {
+      if (!options.autoFillOnOpen || activeTabId === null) return;
+      const response = await new Promise<any>(resolve => {
+        chrome.runtime.sendMessage({ type: 'getApiData', tabId: activeTabId, url }, resolve);
       });
+      if (typeof response?.body === 'string' && response.body) {
+        elements.modalBody.value = formatJsonIfPossible(response.body);
+        updateBodyFormatAction(elements);
+        updateImagePreview(elements, elements.modalBody.value);
+      }
     }
 
-    if (api.postData) {
-      curl += ` \\\n  --data-raw '${api.postData.replace(/'/g, "'\\''")}'`;
+    function handleApiClick(api: UiApi): void {
+      const match = getMatchingRuleStatus(api, state.overrides);
+      if (match) {
+        openEditModal(match.index);
+        void fillModalBody(api.url);
+        return;
+      }
+
+      state.currentEditIndex = null;
+      elements.modalTitleText.textContent = 'Add override';
+      elements.modalUrl.textContent = api.url;
+
+      try {
+        const u = new URL(api.url);
+        elements.modalPattern.value = u.pathname + u.search;
+      } catch {
+        elements.modalPattern.value = api.url;
+      }
+
+      elements.modalMethod.value = (api.method || 'ANY').toUpperCase();
+      const bodyRadio = elements.modal.querySelector(
+        'input[name="modal-override-type"][value="body"]'
+      ) as HTMLInputElement;
+      if (bodyRadio) bodyRadio.checked = true;
+
+      updateModalVisibility(elements, 'body');
+      elements.modalMode.value = 'text';
+      elements.modalBody.value = formatJsonIfPossible(api.body || '');
+      elements.modalRedirectUrl.value = '';
+
+      prefillAdvancedFields(elements, null);
+      updateBodyFormatAction(elements);
+      updateImagePreview(elements, elements.modalBody.value);
+      openModal(elements);
+      void fillModalBody(api.url);
     }
 
-    return curl;
-  }
+    bindModalController({ elements, state, saveState, renderRules });
+    bindRulesIoController({
+      elements,
+      state,
+      getCurrentDomain: () => currentDomain,
+      saveState,
+      renderRules,
+    });
+    bindToolbarController({
+      elements,
+      state,
+      getStorageKey,
+      saveState,
+      renderRules,
+      renderApis,
+      loadApis: () => loadApisWithRetry(),
+      notifyBackground,
+    });
 
-  async function copyToClipboard(text: string): Promise<void> {
-    try {
-      await navigator.clipboard.writeText(text);
-    } catch (err) {
-      console.error('Failed to copy: ', err);
+    async function loadApisWithRetry(attempt = 0): Promise<void> {
+      if (activeTabId === null) return;
+      const response = await new Promise<any>(resolve => {
+        chrome.runtime.sendMessage({ type: 'getApis', tabId: activeTabId }, resolve);
+      });
+      const apis = Array.isArray(response?.apis) ? response.apis : [];
+      state.capturedApis = apis.map((api: ApiEntry) => ({
+        ...api,
+        type: normalizeApiType(api.type),
+      }));
+      renderApis();
+      if (apis.length === 0 && attempt < 4) {
+        window.setTimeout(() => void loadApisWithRetry(attempt + 1), 200);
+      }
     }
+
+    async function handleActiveTab(tab: chrome.tabs.Tab | undefined): Promise<void> {
+      if (!tab || typeof tab.id !== 'number') return;
+      activeTabId = tab.id;
+      activeTabUrl = tab.url || '';
+
+      if (tab.url) {
+        try {
+          currentDomain = NetworkOverridesUtils.getOrigin(tab.url);
+        } catch {}
+      }
+
+      const overridesKey = getStorageKey('overrides');
+      const enabledKey = getStorageKey('enabled');
+
+      const data = await chrome.storage.local.get([
+        overridesKey,
+        enabledKey,
+        'overrides',
+        'enabled',
+      ]);
+      state.overrides = Array.isArray(data[overridesKey])
+        ? data[overridesKey]
+        : Array.isArray(data.overrides)
+          ? data.overrides
+          : [];
+      state.enabled =
+        typeof data[enabledKey] === 'boolean'
+          ? data[enabledKey]
+          : typeof data.enabled === 'boolean'
+            ? data.enabled
+            : false;
+      elements.enableCheckbox.checked = state.enabled;
+      renderRules();
+      void notifyBackground().catch(error => {
+        if (state.enabled) {
+          showNotification(`Interception could not start: ${errorMessage(error)}`, 'error');
+        }
+      });
+
+      if (!port) {
+        port = chrome.runtime.connect({ name: 'network-overrides-ui' });
+        port.onMessage.addListener((msg: any) => {
+          if (msg.type === 'apis' && Array.isArray(msg.apis)) {
+            state.capturedApis = msg.apis.map((api: ApiEntry) => ({
+              ...api,
+              type: normalizeApiType(api.type),
+            }));
+            renderApis();
+          } else if (msg.type === 'apisDelta' && Array.isArray(msg.apis)) {
+            const byUrl = new Map(state.capturedApis.map(api => [api.url, api]));
+            msg.apis.forEach((api: ApiEntry) => {
+              byUrl.set(api.url, { ...api, type: normalizeApiType(api.type) });
+            });
+            state.capturedApis = Array.from(byUrl.values());
+            renderApis();
+          } else if (msg.type === 'status') {
+            updateAttachStatus(
+              elements,
+              state,
+              getStorageKey('enabled'),
+              !!msg.attached,
+              msg.error
+            );
+          }
+        });
+        port.onDisconnect.addListener(() => {
+          port = null;
+          window.setTimeout(() => {
+            if (activeTabId === null) return;
+            void handleActiveTab({ id: activeTabId, url: activeTabUrl } as chrome.tabs.Tab);
+          }, 100);
+        });
+      }
+      port.postMessage({ type: 'subscribe', tabId: activeTabId });
+
+      chrome.runtime.sendMessage({ type: 'getStatus', tabId: activeTabId }, resp => {
+        if (resp) {
+          updateAttachStatus(
+            elements,
+            state,
+            getStorageKey('enabled'),
+            !!resp.attached,
+            resp.error
+          );
+        }
+      });
+      void loadApisWithRetry();
+      loadProfiles(elements.profilesSelect, currentDomain);
+    }
+
+    function refreshActiveTab(): Promise<void> {
+      return new Promise(resolve => {
+        const finish = (tab: chrome.tabs.Tab | undefined) => {
+          if (
+            tab?.url?.startsWith('chrome-extension://') &&
+            activeTabUrl &&
+            !activeTabUrl.startsWith('chrome-extension://')
+          ) {
+            resolve();
+            return;
+          }
+          void handleActiveTab(tab).finally(resolve);
+        };
+        // DevTools must target the inspected tab, which is not necessarily the
+        // browser window's active tab.
+        if (typeof chrome.devtools !== 'undefined' && chrome.devtools?.inspectedWindow?.tabId) {
+          chrome.tabs.get(chrome.devtools.inspectedWindow.tabId, finish);
+        } else {
+          chrome.tabs.query({ active: true, currentWindow: true }, tabs => finish(tabs[0]));
+        }
+      });
+    }
+
+    void refreshActiveTab();
+    window.addEventListener('focus', () => void refreshActiveTab());
+
+    function addApis(newApis: ApiEntry[]): void {
+      state.capturedApis.push(
+        ...newApis.map(a => ({
+          url: a.url,
+          type: normalizeApiType(a.type),
+          method: a.method,
+          headers: a.headers,
+          postData: a.postData,
+          body: a.body,
+          statusCode: a.statusCode,
+        }))
+      );
+      renderApis();
+    }
+
+    return { addApis };
   }
 }
diff --git a/src/ui/api-list.ts b/src/ui/api-list.ts
new file mode 100644
index 0000000..40c29e3
--- /dev/null
+++ b/src/ui/api-list.ts
@@ -0,0 +1,186 @@
+/// <reference path="./types.ts" />
+/// <reference path="./primitives.ts" />
+/// <reference path="./curl.ts" />
+
+namespace NetworkOverridesUi {
+  export const TYPE_ORDER = [
+    'xhr',
+    'fetch',
+    'script',
+    'stylesheet',
+    'image',
+    'media',
+    'font',
+    'document',
+    'websocket',
+    'manifest',
+    'eventsource',
+    'texttrack',
+    'other',
+  ];
+
+  export const TYPE_LABELS: Record<string, string> = {
+    xhr: 'XHR',
+    fetch: 'Fetch',
+    script: 'JS',
+    stylesheet: 'CSS',
+    image: 'Img',
+    media: 'Media',
+    font: 'Font',
+    document: 'Doc',
+    websocket: 'WS',
+    manifest: 'Manifest',
+    eventsource: 'EventSource',
+    texttrack: 'TextTrack',
+    other: 'Other',
+  };
+
+  export function matchesMethod(
+    ruleMethod: string | undefined,
+    requestMethod: string | undefined
+  ): boolean {
+    return NetworkOverridesUtils.matchesMethod(ruleMethod, requestMethod);
+  }
+
+  export function getMatchingRuleStatus(
+    api: UiApi,
+    overrides: OverrideRule[]
+  ): { rule: OverrideRule; index: number; isDisabledOnly: boolean } | null {
+    let firstMatch: { rule: OverrideRule; index: number } | null = null;
+    for (let i = 0; i < overrides.length; i++) {
+      const rule = overrides[i];
+      if (!matchesMethod(rule.method, api.method)) continue;
+      if (NetworkOverridesUtils.patternMatches(rule.pattern, api.url)) {
+        if (!firstMatch) firstMatch = { rule, index: i };
+        if (rule.enabled !== false) {
+          return { rule, index: i, isDisabledOnly: false };
+        }
+      }
+    }
+    if (firstMatch) {
+      return { rule: firstMatch.rule, index: firstMatch.index, isDisabledOnly: true };
+    }
+    return null;
+  }
+
+  export function renderCapturedApis(
+    elements: Elements,
+    state: UiState,
+    onApiClick: (api: UiApi) => void
+  ): void {
+    elements.apisList.innerHTML = '';
+
+    const filterText = state.apiFilter.toLowerCase().trim();
+    const typeInputs = Array.from(document.querySelectorAll<HTMLInputElement>('.capture-type-cb'));
+    const visibleTypes = typeInputs
+      .filter(input => input.checked)
+      .map(input => input.value.toLowerCase());
+    const apisToRender = state.capturedApis.filter(api => {
+      if (typeInputs.length > 0 && !visibleTypes.includes(api.type.toLowerCase())) return false;
+      if (filterText && !api.url.toLowerCase().includes(filterText)) {
+        return false;
+      }
+      const match = getMatchingRuleStatus(api, state.overrides);
+      if (state.activeTab === 'overridden') {
+        return match !== null;
+      }
+      return match === null;
+    });
+
+    apisToRender.sort((a, b) => {
+      const idxA = TYPE_ORDER.indexOf(a.type);
+      const idxB = TYPE_ORDER.indexOf(b.type);
+      const orderA = idxA === -1 ? 999 : idxA;
+      const orderB = idxB === -1 ? 999 : idxB;
+      if (orderA !== orderB) return orderA - orderB;
+      return a.url.localeCompare(b.url);
+    });
+
+    if (apisToRender.length === 0) {
+      const emptyDiv = document.createElement('div');
+      emptyDiv.className = 'empty-state';
+      emptyDiv.textContent =
+        state.activeTab === 'overridden'
+          ? 'No captured requests match active overrides.'
+          : filterText
+            ? 'No requests match search filter.'
+            : 'No network requests captured yet. Refresh page or trigger APIs.';
+      elements.apisList.appendChild(emptyDiv);
+      return;
+    }
+
+    apisToRender.forEach(api => {
+      const item = document.createElement('li');
+      item.className = 'api-item';
+
+      const match = getMatchingRuleStatus(api, state.overrides);
+      const isOverridden = match !== null && !match.isDisabledOnly;
+      const isDisabledOverridden = match !== null && match.isDisabledOnly;
+
+      if (isOverridden) {
+        item.classList.add('overridden', 'active');
+      } else if (isDisabledOverridden) {
+        item.classList.add('overridden-disabled', 'api-item--rule-disabled');
+      }
+
+      const infoDiv = document.createElement('div');
+      infoDiv.className = 'api-info';
+
+      const methodBadge = document.createElement('span');
+      const methodStr = (api.method || 'GET').toUpperCase();
+      methodBadge.className = `method-badge method-${methodStr.toLowerCase()}`;
+      methodBadge.textContent = methodStr;
+
+      const typeBadge = document.createElement('span');
+      typeBadge.className = `type-badge type-${api.type.toLowerCase()}`;
+      typeBadge.textContent = TYPE_LABELS[api.type.toLowerCase()] || api.type.toUpperCase();
+
+      const urlSpan = document.createElement('b');
+      urlSpan.className = 'api-url';
+      urlSpan.innerHTML = highlightApiLabel(api.url, state.apiFilter);
+      urlSpan.title = api.url;
+
+      infoDiv.appendChild(methodBadge);
+      infoDiv.appendChild(typeBadge);
+      infoDiv.appendChild(urlSpan);
+
+      if (isOverridden) {
+        const badge = document.createElement('span');
+        badge.className = 'overridden-badge';
+        badge.textContent = 'Overridden';
+        infoDiv.appendChild(badge);
+      } else if (isDisabledOverridden) {
+        const badge = document.createElement('span');
+        badge.className = 'overridden-badge overridden-badge-disabled';
+        badge.textContent = 'Disabled';
+        infoDiv.appendChild(badge);
+      }
+
+      const actionsDiv = document.createElement('div');
+      actionsDiv.className = 'api-actions';
+
+      const copyCurlBtn = createUiButton('cURL', {
+        className: 'curl-btn',
+        variant: 'ghost',
+        size: 'small',
+        title: 'Copy cURL command',
+      });
+      copyCurlBtn.addEventListener('click', e => {
+        e.stopPropagation();
+        const cmd = generateCurlCommand(api);
+        navigator.clipboard.writeText(cmd).then(() => {
+          copyCurlBtn.innerText = 'Copied!';
+          setTimeout(() => (copyCurlBtn.innerText = 'cURL'), 1500);
+        });
+      });
+
+      actionsDiv.appendChild(copyCurlBtn);
+
+      item.appendChild(infoDiv);
+      item.appendChild(actionsDiv);
+
+      item.addEventListener('click', () => onApiClick(api));
+      elements.apisList.appendChild(item);
+    });
+  }
+}
diff --git a/src/ui/attach-status.ts b/src/ui/attach-status.ts
new file mode 100644
index 0000000..1f6a035
--- /dev/null
+++ b/src/ui/attach-status.ts
@@ -0,0 +1,34 @@
+/// <reference path="./types.ts" />
+/// <reference path="./notifications.ts" />
+
+namespace NetworkOverridesUi {
+  export function updateAttachStatus(
+    elements: Elements,
+    state: UiState,
+    enabledStorageKey: string,
+    attached: boolean,
+    error?: string
+  ): void {
+    state.attached = attached;
+    elements.attachStatus.classList.toggle('attach-status--on', attached && !error);
+    elements.attachStatus.classList.toggle('attach-status--error', !!error);
+    elements.attachStatus.style.display = '';
+    elements.attachStatus.textContent = error
+      ? `Attach failed: ${error}`
+      : attached
+        ? 'Intercepting requests'
+        : 'Inactive';
+    elements.enableCheckbox.checked = attached;
+    if (!error) return;
+
+    state.enabled = false;
+    void Promise.resolve(chrome.storage.local.set({ [enabledStorageKey]: false })).catch(
+      storageError => {
+        showNotification(
+          `Could not persist the disabled interception state: ${errorMessage(storageError)}`,
+          'error'
+        );
+      }
+    );
+  }
+}
diff --git a/src/ui/curl.ts b/src/ui/curl.ts
new file mode 100644
index 0000000..796213d
--- /dev/null
+++ b/src/ui/curl.ts
@@ -0,0 +1,128 @@
+/// <reference path="./types.ts" />
+
+namespace NetworkOverridesUi {
+  export function generateCurlCommand(api: {
+    url: string;
+    method?: string;
+    headers?: HeaderField[];
+    postData?: string;
+  }): string {
+    const method = (api.method || 'GET').toUpperCase();
+    const parts = ['curl'];
+
+    if (method !== 'GET') {
+      parts.push(`-X ${method}`);
+    }
+
+    parts.push(`"${api.url.replace(/"/g, '\\"')}"`);
+
+    if (Array.isArray(api.headers)) {
+      for (const h of api.headers) {
+        if (!h.name) continue;
+        parts.push(`-H "${h.name}: ${h.value.replace(/"/g, '\\"')}"`);
+      }
+    }
+
+    if (api.postData) {
+      parts.push(`--data-raw '${api.postData.replace(/'/g, "'\\''")}'`);
+    }
+
+    return parts.join(' \\\n  ');
+  }
+
+  export function parseCurlToRule(curlStr: string): OverrideRule | null {
+    const trimmed = curlStr.trim();
+    if (!trimmed || !/^curl/i.test(trimmed)) return null;
+
+    let method = 'ANY';
+    let url = '';
+    const requestHeaders: HeaderField[] = [];
+    let body: string | undefined;
+
+    // Simple shell tokenizer for quotes and args
+    const tokens: string[] = [];
+    let current = '';
+    let inSingle = false;
+    let inDouble = false;
+    let escaped = false;
+
+    for (let i = 0; i < trimmed.length; i++) {
+      const char = trimmed[i];
+      if (escaped) {
+        current += char;
+        escaped = false;
+        continue;
+      }
+      if (char === '\\' && !inSingle) {
+        escaped = true;
+        continue;
+      }
+      if (char === "'" && !inDouble) {
+        inSingle = !inSingle;
+        continue;
+      }
+      if (char === '"' && !inSingle) {
+        inDouble = !inDouble;
+        continue;
+      }
+      if (/\s/.test(char) && !inSingle && !inDouble) {
+        if (current) {
+          tokens.push(current);
+          current = '';
+        }
+        continue;
+      }
+      current += char;
+    }
+    if (current) tokens.push(current);
+
+    for (let i = 1; i < tokens.length; i++) {
+      const token = tokens[i];
+      if (token === '-X' || token === '--request') {
+        method = (tokens[i + 1] || 'ANY').toUpperCase();
+        i++;
+      } else if (token === '-H' || token === '--header') {
+        const headerLine = tokens[i + 1] || '';
+        const colonIdx = headerLine.indexOf(':');
+        if (colonIdx > 0) {
+          requestHeaders.push({
+            name: headerLine.slice(0, colonIdx).trim(),
+            value: headerLine.slice(colonIdx + 1).trim(),
+          });
+        }
+        i++;
+      } else if (
+        token === '-d' ||
+        token === '--data' ||
+        token === '--data-raw' ||
+        token === '--data-binary'
+      ) {
+        body = tokens[i + 1];
+        if (method === 'ANY') method = 'POST';
+        i++;
+      } else if (token.startsWith('http://') || token.startsWith('https://')) {
+        url = token;
+      }
+    }
+
+    if (!url) return null;
+
+    // Convert full URL to pattern (e.g. pathname)
+    let pattern = url;
+    try {
+      const parsedUrl = new URL(url);
+      pattern = parsedUrl.pathname + parsedUrl.search;
+    } catch {}
+
+    const rule: OverrideRule = {
+      pattern,
+      mode: 'text',
+      body: body !== undefined ? body : '',
+      method: method !== 'ANY' ? method : undefined,
+    };
+
+    if (requestHeaders.length > 0) rule.requestHeaders = requestHeaders;
+
+    return rule;
+  }
+}
diff --git a/src/ui/dialogs.ts b/src/ui/dialogs.ts
new file mode 100644
index 0000000..e97eb4f
--- /dev/null
+++ b/src/ui/dialogs.ts
@@ -0,0 +1,148 @@
+namespace NetworkOverridesUi {
+  let dialogQueue: Promise<void> = Promise.resolve();
+
+  interface DialogOptions {
+    title: string;
+    message: string;
+    primaryLabel: string;
+    secondaryLabel?: string;
+    inputLabel?: string;
+    inputPlaceholder?: string;
+    danger?: boolean;
+  }
+
+  function presentDialog(options: DialogOptions): Promise<boolean | string | null> {
+    return new Promise(resolve => {
+      const previousFocus = document.activeElement as HTMLElement | null;
+      const backdrop = document.createElement('div');
+      backdrop.className = 'ui-dialog-backdrop';
+
+      const dialog = document.createElement('section');
+      dialog.className = 'ui-dialog';
+      dialog.setAttribute('role', 'dialog');
+      dialog.setAttribute('aria-modal', 'true');
+      dialog.setAttribute('aria-labelledby', 'shared-dialog-title');
+
+      const title = document.createElement('h3');
+      title.id = 'shared-dialog-title';
+      title.className = 'ui-dialog__title';
+      title.textContent = options.title;
+
+      const message = document.createElement('p');
+      message.className = 'ui-dialog__message';
+      message.textContent = options.message;
+      dialog.append(title, message);
+
+      let input: HTMLInputElement | undefined;
+      if (options.inputLabel) {
+        const field = document.createElement('label');
+        field.className = 'modal-field';
+        const label = document.createElement('span');
+        label.textContent = options.inputLabel;
+        input = document.createElement('input');
+        input.type = 'text';
+        input.placeholder = options.inputPlaceholder || '';
+        field.append(label, input);
+        dialog.appendChild(field);
+      }
+
+      const actions = document.createElement('div');
+      actions.className = 'ui-dialog__actions';
+      const cancel = document.createElement('button');
+      cancel.type = 'button';
+      cancel.className = 'ui-btn ui-btn--secondary';
+      cancel.textContent = 'Cancel';
+      actions.appendChild(cancel);
+
+      if (options.secondaryLabel) {
+        const secondary = document.createElement('button');
+        secondary.type = 'button';
+        secondary.className = 'ui-btn ui-btn--outline';
+        secondary.textContent = options.secondaryLabel;
+        secondary.dataset.dialogAction = 'secondary';
+        actions.appendChild(secondary);
+      }
+
+      const primary = document.createElement('button');
+      primary.type = 'button';
+      primary.className = options.danger ? 'ui-btn ui-btn--danger' : 'ui-btn ui-btn--primary';
+      primary.textContent = options.primaryLabel;
+      primary.dataset.dialogAction = 'primary';
+      actions.appendChild(primary);
+      dialog.appendChild(actions);
+      backdrop.appendChild(dialog);
+      document.body.appendChild(backdrop);
+
+      const finish = (value: boolean | string | null): void => {
+        document.removeEventListener('keydown', onKeyDown);
+        backdrop.remove();
+        previousFocus?.focus();
+        resolve(value);
+      };
+      const submit = (): void => {
+        if (!input) {
+          finish(true);
+          return;
+        }
+        const value = input.value.trim();
+        if (!value) {
+          input.setAttribute('aria-invalid', 'true');
+          input.focus();
+          return;
+        }
+        finish(value);
+      };
+      const onKeyDown = (event: KeyboardEvent): void => {
+        if (event.key === 'Escape') finish(null);
+        if (event.key === 'Enter' && document.activeElement !== cancel) submit();
+      };
+      cancel.addEventListener('click', () => finish(null));
+      actions
+        .querySelector<HTMLElement>('[data-dialog-action="secondary"]')
+        ?.addEventListener('click', () => finish(false));
+      primary.addEventListener('click', submit);
+      document.addEventListener('keydown', onKeyDown);
+      window.setTimeout(() => (input || primary).focus(), 0);
+    });
+  }
+
+  function openDialog(options: DialogOptions): Promise<boolean | string | null> {
+    const operation = dialogQueue.then(() => presentDialog(options));
+    dialogQueue = operation.then(
+      () => undefined,
+      () => undefined
+    );
+    return operation;
+  }
+
+  export async function showConfirmDialog(
+    title: string,
+    message: string,
+    primaryLabel = 'Confirm',
+    secondaryLabel?: string,
+    danger = false
+  ): Promise<boolean | null> {
+    return (await openDialog({
+      title,
+      message,
+      primaryLabel,
+      secondaryLabel,
+      danger,
+    })) as boolean | null;
+  }
+
+  export async function showPromptDialog(
+    title: string,
+    message: string,
+    inputLabel: string,
+    inputPlaceholder = ''
+  ): Promise<string | null> {
+    return (await openDialog({
+      title,
+      message,
+      primaryLabel: 'Save',
+      inputLabel,
+      inputPlaceholder,
+    })) as string | null;
+  }
+}
diff --git a/src/ui/headers-editor.ts b/src/ui/headers-editor.ts
new file mode 100644
index 0000000..42968e7
--- /dev/null
+++ b/src/ui/headers-editor.ts
@@ -0,0 +1,134 @@
+/// <reference path="./types.ts" />
+/// <reference path="./primitives.ts" />
+
+namespace NetworkOverridesUi {
+  export function parseHeadersText(text: string): HeaderField[] {
+    const lines = text.split('\n');
+    const headers: HeaderField[] = [];
+    for (const line of lines) {
+      const trimmed = line.trim();
+      if (!trimmed) continue;
+      const colonIdx = trimmed.indexOf(':');
+      if (colonIdx > 0) {
+        headers.push({
+          name: trimmed.slice(0, colonIdx).trim(),
+          value: trimmed.slice(colonIdx + 1).trim(),
+        });
+      }
+    }
+    return headers;
+  }
+
+  export function formatHeadersText(headers: HeaderField[]): string {
+    return headers.map(h => `${h.name}: ${h.value}`).join('\n');
+  }
+
+  export function renderHeaderTable(
+    tableContainer: HTMLDivElement,
+    textarea: HTMLTextAreaElement
+  ): void {
+    const initialMode = tableContainer.dataset.editorMode === 'raw' ? 'raw' : 'table';
+    tableContainer.innerHTML = '';
+    const headers = parseHeadersText(textarea.value);
+
+    const tableWrapper = document.createElement('div');
+    tableWrapper.className = 'headers-table-wrapper';
+
+    const modeToggle = document.createElement('div');
+    modeToggle.className = 'headers-editor-mode';
+    const tableModeBtn = createUiButton('Key-Value', {
+      variant: 'ghost',
+      size: 'small',
+    });
+    const rawModeBtn = createUiButton('Raw', { variant: 'ghost', size: 'small' });
+    modeToggle.appendChild(tableModeBtn);
+    modeToggle.appendChild(rawModeBtn);
+
+    const rowsContainer = document.createElement('div');
+    rowsContainer.className = 'headers-table-rows';
+
+    function addRow(name = '', value = '') {
+      const row = document.createElement('div');
+      row.className = 'header-table-row';
+
+      const keyInput = createUiInput({
+        className: 'header-row-key',
+        placeholder: 'Header name',
+        value: name,
+        ariaLabel: 'Header name',
+      });
+
+      const valInput = createUiInput({
+        className: 'header-row-value',
+        placeholder: 'Header value',
+        value,
+        ariaLabel: 'Header value',
+      });
+
+      const deleteBtn = createUiButton('×', {
+        className: 'header-row-delete',
+        variant: 'danger',
+        size: 'small',
+        title: 'Delete header',
+        ariaLabel: 'Delete header',
+      });
+
+      const syncToTextarea = () => {
+        const rows = Array.from(rowsContainer.querySelectorAll('.header-table-row'));
+        const fields: HeaderField[] = [];
+        rows.forEach(r => {
+          const k = (r.querySelector('.header-row-key') as HTMLInputElement)?.value.trim();
+          const v = (r.querySelector('.header-row-value') as HTMLInputElement)?.value.trim();
+          if (k) fields.push({ name: k, value: v });
+        });
+        textarea.value = formatHeadersText(fields);
+      };
+
+      keyInput.addEventListener('input', syncToTextarea);
+      valInput.addEventListener('input', syncToTextarea);
+      deleteBtn.addEventListener('click', () => {
+        row.remove();
+        syncToTextarea();
+      });
+
+      row.appendChild(keyInput);
+      row.appendChild(valInput);
+      row.appendChild(deleteBtn);
+      rowsContainer.appendChild(row);
+    }
+
+    headers.forEach(h => addRow(h.name, h.value));
+
+    const addBtn = createUiButton('+ Add Header', {
+      className: 'add-header-row-btn',
+      variant: 'outline',
+      size: 'small',
+    });
+    addBtn.addEventListener('click', () => addRow());
+
+    const setMode = (mode: 'table' | 'raw') => {
+      tableContainer.dataset.editorMode = mode;
+      const tableMode = mode === 'table';
+      rowsContainer.style.display = tableMode ? '' : 'none';
+      addBtn.style.display = tableMode ? '' : 'none';
+      textarea.style.display = tableMode ? 'none' : '';
+      tableModeBtn.classList.toggle('active', tableMode);
+      rawModeBtn.classList.toggle('active', !tableMode);
+    };
+    tableModeBtn.addEventListener('click', () => setMode('table'));
+    rawModeBtn.addEventListener('click', () => setMode('raw'));
+
+    tableWrapper.appendChild(modeToggle);
+    tableWrapper.appendChild(rowsContainer);
+    tableWrapper.appendChild(addBtn);
+    tableContainer.appendChild(tableWrapper);
+    setMode(initialMode);
+
+    // Sync when textarea is edited directly
+    textarea.oninput = () => {
+      const newHeaders = parseHeadersText(textarea.value);
+      rowsContainer.innerHTML = '';
+      newHeaders.forEach(h => addRow(h.name, h.value));
+    };
+  }
+}
diff --git a/src/ui/modal-controller.ts b/src/ui/modal-controller.ts
new file mode 100644
index 0000000..27440e4
--- /dev/null
+++ b/src/ui/modal-controller.ts
@@ -0,0 +1,217 @@
+/// <reference path="./types.ts" />
+/// <reference path="./headers-editor.ts" />
+/// <reference path="./modal.ts" />
+/// <reference path="./notifications.ts" />
+
+namespace NetworkOverridesUi {
+  export interface ModalControllerOptions {
+    elements: Elements;
+    state: UiState;
+    saveState: (rules: OverrideRule[]) => Promise<PersistenceResult>;
+    renderRules: () => void;
+  }
+
+  function hasMalformedHeaderLine(value: string): boolean {
+    return value.split('\n').some(line => {
+      const trimmed = line.trim();
+      return !!trimmed && trimmed.indexOf(':') <= 0;
+    });
+  }
+
+  function showModalFeedback(
+    elements: Elements,
+    message: string,
+    kind: 'error' | 'info',
+    field?: HTMLElement
+  ): void {
+    elements.modalFeedback.textContent = message;
+    elements.modalFeedback.className = `modal-feedback is-${kind}`;
+    if (field) {
+      field.setAttribute('aria-invalid', 'true');
+      field.focus();
+      field.scrollIntoView?.({ block: 'center', behavior: 'smooth' });
+    }
+  }
+
+  function clearModalFeedback(elements: Elements): void {
+    elements.modalFeedback.textContent = '';
+    elements.modalFeedback.className = 'modal-feedback';
+    elements.modal
+      .querySelectorAll('[aria-invalid="true"]')
+      .forEach(field => field.removeAttribute('aria-invalid'));
+  }
+
+  export function bindModalController(options: ModalControllerOptions): void {
+    const { elements, state, saveState, renderRules } = options;
+
+    elements.closeModal?.addEventListener('click', () => closeModal(elements));
+    elements.modal?.addEventListener('click', event => {
+      if (event.target === elements.modal) closeModal(elements);
+    });
+    elements.modal?.addEventListener('input', event => {
+      (event.target as HTMLElement).removeAttribute?.('aria-invalid');
+      if (elements.modalFeedback.classList.contains('is-error')) clearModalFeedback(elements);
+    });
+    elements.modalMode?.addEventListener('change', () => {
+      updateImagePreview(elements, elements.modalBody.value);
+    });
+    elements.modalBody?.addEventListener('input', () => {
+      updateBodyFormatAction(elements);
+      updateImagePreview(elements, elements.modalBody.value);
+    });
+    elements.formatJsonBtn?.addEventListener('click', () => {
+      try {
+        const parsed = JSON.parse(elements.modalBody.value);
+        elements.modalBody.value = JSON.stringify(parsed, null, 2);
+        updateBodyFormatAction(elements);
+        updateImagePreview(elements, elements.modalBody.value);
+      } catch {
+        showModalFeedback(
+          elements,
+          'Response body is not valid JSON.',
+          'error',
+          elements.modalBody
+        );
+      }
+    });
+
+    const typeRadios = elements.modal?.querySelectorAll('input[name="modal-override-type"]') || [];
+    typeRadios.forEach(radio => {
+      radio.addEventListener('change', event => {
+        const value = (event.target as HTMLInputElement).value as 'body' | 'redirect' | 'fail';
+        updateModalVisibility(elements, value);
+      });
+    });
+
+    elements.saveOverrideBtn?.addEventListener('click', async () => {
+      clearModalFeedback(elements);
+      const pattern = elements.modalPattern.value.trim();
+      if (!pattern) {
+        showModalFeedback(elements, 'Pattern is required.', 'error', elements.modalPattern);
+        return;
+      }
+
+      const method = elements.modalMethod.value;
+      const selectedType = elements.modal.querySelector(
+        'input[name="modal-override-type"]:checked'
+      ) as HTMLInputElement;
+      const overrideType = selectedType ? selectedType.value : 'body';
+
+      let body = '';
+      let mode: OverrideMode = 'text';
+      let redirectUrl: string | undefined;
+      if (overrideType === 'body') {
+        body = elements.modalBody.value;
+        mode = elements.modalMode.value as OverrideMode;
+      } else if (overrideType === 'redirect') {
+        redirectUrl = elements.modalRedirectUrl.value.trim();
+        if (!redirectUrl) {
+          showModalFeedback(
+            elements,
+            'Redirect URL is required for a redirect override.',
+            'error',
+            elements.modalRedirectUrl
+          );
+          return;
+        }
+      }
+
+      let statusCode: number | undefined;
+      if (elements.modalStatus.value.trim()) {
+        statusCode = parseInt(elements.modalStatus.value.trim(), 10);
+        if (isNaN(statusCode) || statusCode < 100 || statusCode > 599) {
+          showModalFeedback(
+            elements,
+            'Status code must be between 100 and 599.',
+            'error',
+            elements.modalStatus
+          );
+          return;
+        }
+      }
+
+      let delayMs: number | undefined;
+      if (elements.modalDelay.value.trim()) {
+        delayMs = parseInt(elements.modalDelay.value.trim(), 10);
+        if (isNaN(delayMs) || delayMs < 0 || delayMs > 120000) {
+          showModalFeedback(
+            elements,
+            'Delay must be between 0 and 120000 ms.',
+            'error',
+            elements.modalDelay
+          );
+          return;
+        }
+      }
+
+      if (hasMalformedHeaderLine(elements.modalHeaders.value)) {
+        showModalFeedback(
+          elements,
+          'Extra response headers must use one “Header-Name: value” per line.',
+          'error',
+          elements.modalHeaders
+        );
+        return;
+      }
+      if (
+        elements.modalRequestHeaders &&
+        hasMalformedHeaderLine(elements.modalRequestHeaders.value)
+      ) {
+        showModalFeedback(
+          elements,
+          'Request headers must use one “Header-Name: value” per line.',
+          'error',
+          elements.modalRequestHeaders
+        );
+        return;
+      }
+
+      const responseHeaders = parseHeadersText(elements.modalHeaders.value);
+      const requestHeaders = elements.modalRequestHeaders
+        ? parseHeadersText(elements.modalRequestHeaders.value)
+        : undefined;
+      const rule: OverrideRule = { pattern, body, mode };
+      if (redirectUrl) rule.redirectUrl = redirectUrl;
+      if (method && method !== 'ANY') rule.method = method;
+      if (elements.modalGraphqlOp?.value.trim()) {
+        rule.graphqlOperation = elements.modalGraphqlOp.value.trim();
+      }
+      if (overrideType === 'fail') {
+        rule.failReason = FAIL_REASONS.includes(elements.modalFailReason.value)
+          ? elements.modalFailReason.value
+          : 'Failed';
+      }
+      if (statusCode !== undefined) rule.statusCode = statusCode;
+      if (delayMs !== undefined) rule.delayMs = delayMs;
+      if (responseHeaders.length > 0) rule.responseHeaders = responseHeaders;
+      if (requestHeaders && requestHeaders.length > 0) rule.requestHeaders = requestHeaders;
+
+      const previousOverrides = state.overrides;
+      const nextOverrides = [...state.overrides];
+      if (state.currentEditIndex !== null) nextOverrides[state.currentEditIndex] = rule;
+      else nextOverrides.push(rule);
+
+      const originalButtonText = elements.saveOverrideBtn.textContent || 'Save Override';
+      elements.saveOverrideBtn.disabled = true;
+      elements.saveOverrideBtn.textContent = 'Saving…';
+      showModalFeedback(elements, 'Saving override…', 'info');
+      try {
+        const result = await saveState(nextOverrides);
+        renderRules();
+        closeModal(elements);
+        showPersistenceNotification('Override saved', result);
+      } catch (error) {
+        state.overrides = previousOverrides;
+        const reason = error instanceof Error ? error.message : String(error);
+        showModalFeedback(
+          elements,
+          `Could not save override${reason ? `: ${reason}` : '.'}`,
+          'error'
+        );
+      } finally {
+        elements.saveOverrideBtn.disabled = false;
+        elements.saveOverrideBtn.textContent = originalButtonText;
+      }
+    });
+  }
+}
diff --git a/src/ui/modal.ts b/src/ui/modal.ts
new file mode 100644
index 0000000..4897782
--- /dev/null
+++ b/src/ui/modal.ts
@@ -0,0 +1,125 @@
+/// <reference path="./types.ts" />
+/// <reference path="./headers-editor.ts" />
+
+namespace NetworkOverridesUi {
+  export const FAIL_REASONS = [
+    'Failed',
+    'Aborted',
+    'TimedOut',
+    'AccessDenied',
+    'ConnectionRefused',
+    'ConnectionReset',
+    'ConnectionClosed',
+    'ConnectionFailed',
+    'NameNotResolved',
+    'InternetDisconnected',
+    'AddressUnreachable',
+    'BlockedByClient',
+    'BlockedByResponse',
+  ];
+
+  export function escapeHtml(str: string): string {
+    return str
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#039;');
+  }
+
+  export function updateModalVisibility(
+    elements: Elements,
+    type: 'body' | 'redirect' | 'fail'
+  ): void {
+    elements.modalBodyFields.style.display = type === 'body' ? '' : 'none';
+    elements.modalRedirectFields.style.display = type === 'redirect' ? '' : 'none';
+    elements.modalFailFields.style.display = type === 'fail' ? '' : 'none';
+    elements.modalAdvancedFields.style.display = type === 'redirect' ? 'none' : '';
+    elements.modalStatusField.style.display = type === 'body' ? '' : 'none';
+    elements.modalHeadersField.style.display = type === 'body' ? '' : 'none';
+    if (elements.modalRequestHeadersField) {
+      elements.modalRequestHeadersField.style.display = type === 'fail' ? 'none' : '';
+    }
+    elements.modalPattern.disabled = type === 'body';
+  }
+
+  export function updateImagePreview(elements: Elements, body: string): void {
+    if (!elements.modalPreviewContainer) return;
+    const trimmed = body.trim();
+    if (!trimmed) {
+      elements.modalPreviewContainer.style.display = 'none';
+      elements.modalPreviewContainer.innerHTML = '';
+      return;
+    }
+    if (
+      trimmed.startsWith('data:image/') ||
+      (trimmed.startsWith('<svg') && trimmed.endsWith('</svg>'))
+    ) {
+      elements.modalPreviewContainer.style.display = 'block';
+      elements.modalPreviewContainer.innerHTML = `<img src="${escapeHtml(trimmed)}" alt="Preview" />`;
+    } else if (elements.modalMode && elements.modalMode.value === 'file') {
+      elements.modalPreviewContainer.style.display = 'block';
+      elements.modalPreviewContainer.innerHTML = `<img src="data:image/png;base64,${escapeHtml(trimmed)}" alt="Image Preview" onerror="this.parentElement.style.display='none'" />`;
+    } else {
+      elements.modalPreviewContainer.style.display = 'none';
+      elements.modalPreviewContainer.innerHTML = '';
+    }
+  }
+
+  export function updateBodyFormatAction(elements: Elements): void {
+    const val = elements.modalBody.value.trim();
+    if (!val) {
+      elements.formatJsonBtn.style.display = 'none';
+      return;
+    }
+    try {
+      JSON.parse(val);
+      elements.formatJsonBtn.style.display = 'inline-flex';
+    } catch {
+      elements.formatJsonBtn.style.display = 'none';
+    }
+  }
+
+  export function prefillAdvancedFields(elements: Elements, existing: OverrideRule | null): void {
+    if (elements.modalGraphqlOp) {
+      elements.modalGraphqlOp.value = existing?.graphqlOperation || '';
+    }
+    elements.modalStatus.value =
+      existing && typeof existing.statusCode === 'number' ? String(existing.statusCode) : '';
+    elements.modalDelay.value =
+      existing && typeof existing.delayMs === 'number' ? String(existing.delayMs) : '';
+    elements.modalHeaders.value = (existing?.responseHeaders || [])
+      .map(header => `${header.name}: ${header.value}`)
+      .join('\n');
+    if (elements.modalRequestHeaders) {
+      elements.modalRequestHeaders.value = (existing?.requestHeaders || [])
+        .map(header => `${header.name}: ${header.value}`)
+        .join('\n');
+    }
+    elements.modalFailReason.value =
+      existing?.failReason && FAIL_REASONS.includes(existing.failReason)
+        ? existing.failReason
+        : 'Failed';
+
+    // Render visual header tables if present
+    if (elements.modalResponseHeadersTable) {
+      renderHeaderTable(elements.modalResponseHeadersTable, elements.modalHeaders);
+    }
+    if (elements.modalRequestHeadersTable && elements.modalRequestHeaders) {
+      renderHeaderTable(elements.modalRequestHeadersTable, elements.modalRequestHeaders);
+    }
+  }
+
+  export function openModal(elements: Elements): void {
+    elements.modalFeedback.textContent = '';
+    elements.modalFeedback.className = 'modal-feedback';
+    elements.modal
+      .querySelectorAll('[aria-invalid="true"]')
+      .forEach(field => field.removeAttribute('aria-invalid'));
+    elements.modal.style.display = 'block';
+  }
+
+  export function closeModal(elements: Elements): void {
+    elements.modal.style.display = 'none';
+  }
+}
diff --git a/src/ui/notifications.ts b/src/ui/notifications.ts
new file mode 100644
index 0000000..b707c6f
--- /dev/null
+++ b/src/ui/notifications.ts
@@ -0,0 +1,109 @@
+/// <reference path="./types.ts" />
+
+namespace NetworkOverridesUi {
+  export type NotificationKind = 'success' | 'warning' | 'error' | 'info';
+
+  export interface NotificationAction {
+    label: string;
+    run: () => void | Promise<void>;
+  }
+
+  const MAX_VISIBLE_NOTIFICATIONS = 3;
+
+  function getNotificationRegion(): HTMLElement {
+    let region = document.getElementById('notification-region');
+    if (region) return region;
+
+    region = document.createElement('div');
+    region.id = 'notification-region';
+    region.className = 'notification-region';
+    region.setAttribute('aria-live', 'polite');
+    region.setAttribute('aria-relevant', 'additions');
+    document.body.appendChild(region);
+    return region;
+  }
+
+  export function showNotification(
+    message: string,
+    kind: NotificationKind = 'info',
+    durationMs = kind === 'error' ? 7000 : 4000,
+    action?: NotificationAction
+  ): HTMLElement {
+    const region = getNotificationRegion();
+    const duplicate = Array.from(region.querySelectorAll<HTMLElement>('.notification-toast')).find(
+      item => item.dataset.kind === kind && item.dataset.message === message
+    );
+    duplicate?.remove();
+
+    const toast = document.createElement('div');
+    toast.className = `notification-toast notification-toast--${kind}`;
+    toast.dataset.kind = kind;
+    toast.dataset.message = message;
+    toast.setAttribute('role', kind === 'error' ? 'alert' : 'status');
+
+    const text = document.createElement('span');
+    text.className = 'notification-toast__message';
+    text.textContent = message;
+    toast.appendChild(text);
+
+    if (action) {
+      const actionButton = document.createElement('button');
+      actionButton.type = 'button';
+      actionButton.className = 'notification-toast__action';
+      actionButton.textContent = action.label;
+      actionButton.addEventListener('click', async () => {
+        if (actionButton.disabled) return;
+        actionButton.disabled = true;
+        try {
+          await action.run();
+          toast.remove();
+        } catch (error) {
+          actionButton.disabled = false;
+          showNotification(`Retry failed: ${errorMessage(error)}`, 'error', 7000);
+        }
+      });
+      toast.appendChild(actionButton);
+    }
+
+    const close = document.createElement('button');
+    close.type = 'button';
+    close.className = 'notification-toast__close';
+    close.setAttribute('aria-label', 'Dismiss notification');
+    close.textContent = '\u00d7';
+    close.addEventListener('click', () => toast.remove());
+    toast.appendChild(close);
+
+    region.appendChild(toast);
+    while (region.children.length > MAX_VISIBLE_NOTIFICATIONS) {
+      region.firstElementChild?.remove();
+    }
+
+    if (durationMs > 0) window.setTimeout(() => toast.remove(), durationMs);
+    return toast;
+  }
+
+  export function showPersistenceNotification(action: string, result: PersistenceResult): void {
+    if (result.applied) {
+      showNotification(`${action} and applied to the active tab.`, 'success');
+      return;
+    }
+    showNotification(
+      `${action}, but interception was not updated${result.warning ? `: ${result.warning}` : '.'}`,
+      'warning',
+      7000,
+      result.retry
+        ? {
+            label: 'Retry',
+            run: async () => {
+              await result.retry!();
+              showNotification('Interception updated for the active tab.', 'success');
+            },
+          }
+        : undefined
+    );
+  }
+
+  export function errorMessage(error: unknown): string {
+    return error instanceof Error ? error.message : String(error || 'Unknown error');
+  }
+}
diff --git a/src/ui/persistence.ts b/src/ui/persistence.ts
new file mode 100644
index 0000000..5a2fe8b
--- /dev/null
+++ b/src/ui/persistence.ts
@@ -0,0 +1,20 @@
+/// <reference path="./types.ts" />
+/// <reference path="./notifications.ts" />
+
+namespace NetworkOverridesUi {
+  export async function persistRuleChange(
+    saveState: (rules: OverrideRule[]) => Promise<PersistenceResult>,
+    nextOverrides: OverrideRule[],
+    successMessage: string,
+    renderRules: () => void
+  ): Promise<void> {
+    try {
+      const result = await saveState(nextOverrides);
+      renderRules();
+      showPersistenceNotification(successMessage, result);
+    } catch (error) {
+      renderRules();
+      showNotification(`Could not update rules: ${errorMessage(error)}`, 'error');
+    }
+  }
+}
diff --git a/src/ui/primitives.ts b/src/ui/primitives.ts
new file mode 100644
index 0000000..eaccc07
--- /dev/null
+++ b/src/ui/primitives.ts
@@ -0,0 +1,96 @@
+namespace NetworkOverridesUi {
+  export type UiButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger' | 'outline';
+  export type UiControlSize = 'small' | 'medium';
+
+  export interface UiButtonOptions {
+    className?: string;
+    variant?: UiButtonVariant;
+    size?: UiControlSize;
+    title?: string;
+    ariaLabel?: string;
+  }
+
+  export interface UiInputOptions {
+    className?: string;
+    placeholder?: string;
+    value?: string;
+    type?: string;
+    ariaLabel?: string;
+  }
+
+  function addClasses(element: Element, classNames: Array<string | undefined>): void {
+    classNames
+      .flatMap(value => (value || '').split(/\s+/))
+      .filter(Boolean)
+      .forEach(className => element.classList.add(className));
+  }
+
+  export function createUiButton(text: string, options: UiButtonOptions = {}): HTMLButtonElement {
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.textContent = text;
+    addClasses(button, [
+      'ui-btn',
+      `ui-btn--${options.variant || 'secondary'}`,
+      `ui-btn--${options.size || 'medium'}`,
+      options.className,
+    ]);
+    if (options.title) button.title = options.title;
+    if (options.ariaLabel) button.setAttribute('aria-label', options.ariaLabel);
+    return button;
+  }
+
+  export function createUiInput(options: UiInputOptions = {}): HTMLInputElement {
+    const input = document.createElement('input');
+    input.type = options.type || 'text';
+    input.className = 'ui-control';
+    addClasses(input, [options.className]);
+    if (options.placeholder) input.placeholder = options.placeholder;
+    if (options.value !== undefined) input.value = options.value;
+    if (options.ariaLabel) input.setAttribute('aria-label', options.ariaLabel);
+    return input;
+  }
+
+  function inferButtonVariant(button: HTMLButtonElement): UiButtonVariant {
+    if (
+      button.id === 'save-override' ||
+      button.id === 'curl-swagger-import-btn' ||
+      button.id === 'add'
+    ) {
+      return 'primary';
+    }
+    if (button.matches('.delete-btn, .header-row-delete, #delete-profile-btn')) return 'danger';
+    if (button.matches('.header-btn, .action-btn, .modal-action-btn, .curl-btn')) return 'ghost';
+    if (button.matches('.add-api-btn, .add-header-row-btn')) return 'outline';
+    return 'secondary';
+  }
+
+  export function upgradeUiPrimitives(root: ParentNode = document): void {
+    root.querySelectorAll<HTMLElement>('.modal-field').forEach(field => {
+      field.classList.add('ui-field');
+      const label = field.querySelector<HTMLElement>(':scope > span');
+      label?.classList.add('ui-label');
+    });
+
+    root
+      .querySelectorAll<
+        HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
+      >('input:not([type="checkbox"]):not([type="radio"]), select, textarea')
+      .forEach(control => {
+        control.classList.add('ui-control');
+        if (control instanceof HTMLInputElement && control.type === 'file') {
+          control.classList.add('ui-control--file');
+        }
+      });
+
+    root.querySelectorAll<HTMLButtonElement>('button').forEach(button => {
+      button.type = 'button';
+      button.classList.add('ui-btn', `ui-btn--${inferButtonVariant(button)}`);
+      if (button.matches('.header-btn, .action-btn, .add-api-btn, .header-row-delete')) {
+        button.classList.add('ui-btn--small');
+      } else {
+        button.classList.add('ui-btn--medium');
+      }
+    });
+  }
+}
diff --git a/src/ui/profiles.ts b/src/ui/profiles.ts
new file mode 100644
index 0000000..9d83c36
--- /dev/null
+++ b/src/ui/profiles.ts
@@ -0,0 +1,87 @@
+/// <reference path="./types.ts" />
+/// <reference path="./notifications.ts" />
+/// <reference path="./dialogs.ts" />
+
+namespace NetworkOverridesUi {
+  export async function loadProfiles(
+    selectEl: HTMLSelectElement | undefined,
+    domain: string
+  ): Promise<void> {
+    if (!selectEl || !domain) return;
+    const key = `rule_profiles_${domain}`;
+    try {
+      const data = await Promise.resolve(chrome.storage.local.get([key]));
+      const profiles: Record<string, OverrideRule[]> = data[key] || {};
+      selectEl.innerHTML = '<option value="">-- Rule Profiles --</option>';
+      Object.keys(profiles).forEach(name => {
+        const option = document.createElement('option');
+        option.value = name;
+        option.textContent = name;
+        selectEl.appendChild(option);
+      });
+    } catch (error) {
+      showNotification(`Could not load rule profiles: ${errorMessage(error)}`, 'error');
+    }
+  }
+
+  export async function saveProfile(
+    selectEl: HTMLSelectElement | undefined,
+    domain: string,
+    currentRules: OverrideRule[]
+  ): Promise<void> {
+    if (!domain) {
+      showNotification('A page domain is required before saving a profile.', 'error');
+      return;
+    }
+    const profileName = await showPromptDialog(
+      'Save rule profile',
+      'Save the current rules as a reusable profile for this domain.',
+      'Profile name',
+      'e.g. Staging Mock or Error Flow'
+    );
+    if (!profileName) return;
+    const key = `rule_profiles_${domain}`;
+    try {
+      const data = await Promise.resolve(chrome.storage.local.get([key]));
+      const profiles: Record<string, OverrideRule[]> = data[key] || {};
+      profiles[profileName] = JSON.parse(JSON.stringify(currentRules));
+      await Promise.resolve(chrome.storage.local.set({ [key]: profiles }));
+      await loadProfiles(selectEl, domain);
+      if (selectEl) selectEl.value = profileName;
+      showNotification(`Profile “${profileName}” saved.`, 'success');
+    } catch (error) {
+      showNotification(`Could not save profile: ${errorMessage(error)}`, 'error');
+    }
+  }
+
+  export async function deleteProfile(
+    selectEl: HTMLSelectElement | undefined,
+    domain: string
+  ): Promise<void> {
+    if (!selectEl || !selectEl.value || !domain) {
+      showNotification('Select a profile to delete.', 'error');
+      return;
+    }
+    const name = selectEl.value;
+    const confirmed = await showConfirmDialog(
+      'Delete rule profile',
+      `Delete profile “${name}”? This cannot be undone.`,
+      'Delete',
+      undefined,
+      true
+    );
+    if (!confirmed) return;
+
+    const key = `rule_profiles_${domain}`;
+    try {
+      const data = await Promise.resolve(chrome.storage.local.get([key]));
+      const profiles: Record<string, OverrideRule[]> = data[key] || {};
+      delete profiles[name];
+      await Promise.resolve(chrome.storage.local.set({ [key]: profiles }));
+      await loadProfiles(selectEl, domain);
+      showNotification(`Profile “${name}” deleted.`, 'success');
+    } catch (error) {
+      showNotification(`Could not delete profile: ${errorMessage(error)}`, 'error');
+    }
+  }
+}
diff --git a/src/ui/rules-io-controller.ts b/src/ui/rules-io-controller.ts
new file mode 100644
index 0000000..12b7165
--- /dev/null
+++ b/src/ui/rules-io-controller.ts
@@ -0,0 +1,251 @@
+/// <reference path="./types.ts" />
+/// <reference path="./curl.ts" />
+/// <reference path="./swagger.ts" />
+/// <reference path="./profiles.ts" />
+/// <reference path="./notifications.ts" />
+/// <reference path="./dialogs.ts" />
+
+namespace NetworkOverridesUi {
+  export interface RulesIoControllerOptions {
+    elements: Elements;
+    state: UiState;
+    getCurrentDomain: () => string;
+    saveState: (rules: OverrideRule[]) => Promise<PersistenceResult>;
+    renderRules: () => void;
+  }
+
+  function isValidImportHeader(header: any): boolean {
+    return (
+      !!header &&
+      typeof header.name === 'string' &&
+      header.name.trim() !== '' &&
+      typeof header.value === 'string'
+    );
+  }
+
+  function isValidImportedRule(rule: any): boolean {
+    return (
+      !!rule &&
+      typeof rule === 'object' &&
+      typeof rule.pattern === 'string' &&
+      (rule.mode === 'text' || rule.mode === 'file') &&
+      (rule.method === undefined ||
+        (typeof rule.method === 'string' && KNOWN_METHODS.includes(rule.method.toUpperCase()))) &&
+      (rule.body === undefined ||
+        typeof rule.body === 'string' ||
+        (typeof rule.body === 'object' && rule.body !== null)) &&
+      (rule.redirectUrl === undefined || typeof rule.redirectUrl === 'string') &&
+      (rule.statusCode === undefined ||
+        (Number.isInteger(rule.statusCode) && rule.statusCode >= 100 && rule.statusCode <= 599)) &&
+      (rule.delayMs === undefined ||
+        (typeof rule.delayMs === 'number' && rule.delayMs >= 0 && rule.delayMs <= 120000)) &&
+      (rule.responseHeaders === undefined ||
+        (Array.isArray(rule.responseHeaders) && rule.responseHeaders.every(isValidImportHeader))) &&
+      (rule.requestHeaders === undefined ||
+        (Array.isArray(rule.requestHeaders) && rule.requestHeaders.every(isValidImportHeader))) &&
+      (rule.graphqlOperation === undefined || typeof rule.graphqlOperation === 'string') &&
+      (rule.processTemplates === undefined || typeof rule.processTemplates === 'boolean') &&
+      (rule.failReason === undefined ||
+        (typeof rule.failReason === 'string' &&
+          FAIL_REASONS.includes(rule.failReason) &&
+          rule.redirectUrl === undefined)) &&
+      (rule.enabled === undefined || typeof rule.enabled === 'boolean')
+    );
+  }
+
+  function cleanImportedRule(source: any): OverrideRule {
+    const clean = { pattern: source.pattern, mode: source.mode } as OverrideRule;
+    if (source.body !== undefined) {
+      clean.body = typeof source.body === 'string' ? source.body : JSON.stringify(source.body);
+    }
+    if (source.redirectUrl !== undefined) clean.redirectUrl = source.redirectUrl;
+    if (source.enabled !== undefined) clean.enabled = source.enabled;
+    if (source.method !== undefined) clean.method = source.method.toUpperCase();
+    if (source.graphqlOperation !== undefined) clean.graphqlOperation = source.graphqlOperation;
+    if (source.processTemplates !== undefined) clean.processTemplates = source.processTemplates;
+    if (source.statusCode !== undefined) clean.statusCode = source.statusCode;
+    if (source.delayMs !== undefined) clean.delayMs = source.delayMs;
+    if (source.responseHeaders !== undefined) {
+      clean.responseHeaders = source.responseHeaders.map((header: any) => ({
+        name: header.name,
+        value: header.value,
+      }));
+    }
+    if (source.requestHeaders !== undefined) {
+      clean.requestHeaders = source.requestHeaders.map((header: any) => ({
+        name: header.name,
+        value: header.value,
+      }));
+    }
+    if (source.failReason !== undefined) clean.failReason = source.failReason;
+    return clean;
+  }
+
+  function exportRules(state: UiState, currentDomain: string): void {
+    let blob: Blob;
+    try {
+      const compactRules = state.overrides.map(rule => {
+        if (!rule.body) return rule;
+        try {
+          const body = JSON.parse(rule.body);
+          return body !== null && typeof body === 'object'
+            ? { ...rule, body: body as unknown as string }
+            : rule;
+        } catch {
+          return rule;
+        }
+      });
+      blob = new Blob(
+        [
+          JSON.stringify(
+            {
+              version: 1,
+              domain: currentDomain,
+              exportedAt: new Date().toISOString(),
+              overrides: compactRules,
+            },
+            null,
+            2
+          ),
+        ],
+        { type: 'application/json' }
+      );
+    } catch (error) {
+      showNotification(`Failed to export rules: ${errorMessage(error)}`, 'error');
+      return;
+    }
+    const url = URL.createObjectURL(blob);
+    const safeDomain = currentDomain.replace(/[^a-z0-9.-]+/gi, '_') || 'rules';
+    const anchor = document.createElement('a');
+    anchor.href = url;
+    anchor.download = `network-overrides-${safeDomain}-${Date.now()}.json`;
+    document.body.appendChild(anchor);
+    anchor.click();
+    anchor.remove();
+    URL.revokeObjectURL(url);
+    showNotification('Rules exported.', 'success');
+  }
+
+  export function bindRulesIoController(options: RulesIoControllerOptions): void {
+    const { elements, state, getCurrentDomain, saveState, renderRules } = options;
+    elements.exportRulesBtn?.addEventListener('click', () => {
+      exportRules(state, getCurrentDomain());
+    });
+    elements.importRulesBtn?.addEventListener('click', () => elements.importRulesInput?.click());
+    elements.importRulesInput?.addEventListener('change', async event => {
+      const file = (event.target as HTMLInputElement).files?.[0];
+      if (!file) return;
+      let parsed: any;
+      try {
+        parsed = JSON.parse(await file.text());
+      } catch (error) {
+        showNotification(`Invalid file: ${errorMessage(error)}`, 'error');
+        elements.importRulesInput.value = '';
+        return;
+      }
+      if (!parsed || !Array.isArray(parsed.overrides)) {
+        showNotification('Invalid file: missing “overrides” list.', 'error');
+        elements.importRulesInput.value = '';
+        return;
+      }
+      if (!parsed.overrides.every(isValidImportedRule)) {
+        showNotification('Invalid file: a rule has a missing or invalid field.', 'error');
+        elements.importRulesInput.value = '';
+        return;
+      }
+
+      const currentDomain = getCurrentDomain();
+      if (typeof parsed.domain === 'string' && parsed.domain && parsed.domain !== currentDomain) {
+        const continueImport = await showConfirmDialog(
+          'Import rules from another domain?',
+          `This file was exported from “${parsed.domain}”, but the active domain is “${currentDomain}”.`,
+          'Import anyway'
+        );
+        if (!continueImport) return;
+      }
+
+      const importedRules = parsed.overrides.map(cleanImportedRule);
+      let nextOverrides: OverrideRule[];
+      if (state.overrides.length > 0) {
+        const merge = await showConfirmDialog(
+          'Import rules',
+          'Rules already exist for this domain. Choose how the imported rules should be added.',
+          'Append rules',
+          'Replace rules'
+        );
+        if (merge === null) return;
+        nextOverrides = merge ? [...state.overrides, ...importedRules] : importedRules;
+      } else {
+        nextOverrides = importedRules;
+      }
+      try {
+        const result = await saveState(nextOverrides);
+        renderRules();
+        showPersistenceNotification(
+          `${importedRules.length} rule${importedRules.length === 1 ? '' : 's'} imported`,
+          result
+        );
+      } catch (error) {
+        showNotification(`Could not import rules: ${errorMessage(error)}`, 'error');
+      } finally {
+        elements.importRulesInput.value = '';
+      }
+    });
+
+    if (elements.importCurlSwaggerBtn && elements.curlSwaggerModal) {
+      elements.importCurlSwaggerBtn.addEventListener('click', () => {
+        elements.curlSwaggerModal!.style.display = 'flex';
+      });
+      elements.curlSwaggerCloseModal?.addEventListener('click', () => {
+        elements.curlSwaggerModal!.style.display = 'none';
+      });
+      elements.curlSwaggerImportBtn?.addEventListener('click', async () => {
+        const text = elements.curlSwaggerTextarea?.value || '';
+        const curlRule = parseCurlToRule(text);
+        const newRules = curlRule ? [curlRule] : parseSwaggerToRules(text);
+        if (newRules.length === 0) {
+          showNotification(
+            'Could not parse any rules from the cURL command or Swagger/OpenAPI specification.',
+            'error'
+          );
+          return;
+        }
+        try {
+          const result = await saveState([...state.overrides, ...newRules]);
+          renderRules();
+          elements.curlSwaggerModal!.style.display = 'none';
+          if (elements.curlSwaggerTextarea) elements.curlSwaggerTextarea.value = '';
+          showPersistenceNotification(
+            `${newRules.length} rule${newRules.length === 1 ? '' : 's'} imported`,
+            result
+          );
+        } catch (error) {
+          showNotification(`Could not import rules: ${errorMessage(error)}`, 'error');
+        }
+      });
+      elements.curlSwaggerFileInput?.addEventListener('change', event => {
+        const file = (event.target as HTMLInputElement).files?.[0];
+        if (!file) return;
+        const reader = new FileReader();
+        reader.onload = loadEvent => {
+          if (elements.curlSwaggerTextarea) {
+            elements.curlSwaggerTextarea.value = loadEvent.target?.result as string;
+          }
+        };
+        reader.onerror = () => {
+          showNotification('Could not read the selected import file.', 'error');
+        };
+        reader.readAsText(file);
+        elements.curlSwaggerFileInput!.value = '';
+      });
+    }
+
+    if (elements.profilesSelect) loadProfiles(elements.profilesSelect, getCurrentDomain());
+    elements.saveProfileBtn?.addEventListener('click', () => {
+      saveProfile(elements.profilesSelect, getCurrentDomain(), state.overrides);
+    });
+    elements.deleteProfileBtn?.addEventListener('click', () => {
+      deleteProfile(elements.profilesSelect, getCurrentDomain());
+    });
+  }
+}
diff --git a/src/ui/rules-list.ts b/src/ui/rules-list.ts
new file mode 100644
index 0000000..0fb46ba
--- /dev/null
+++ b/src/ui/rules-list.ts
@@ -0,0 +1,144 @@
+/// <reference path="./types.ts" />
+/// <reference path="./modal.ts" />
+/// <reference path="./primitives.ts" />
+
+namespace NetworkOverridesUi {
+  export function renderRulesList(
+    elements: Elements,
+    state: UiState,
+    onEdit: (index: number) => void,
+    onToggle: (index: number, enabled: boolean) => void,
+    onDelete: (index: number) => void,
+    onDuplicate: (index: number) => void
+  ): void {
+    elements.listEl.innerHTML = '';
+    state.overrides.forEach((rule, index) => {
+      const li = document.createElement('li');
+      li.className = 'override-item';
+
+      const isEnabled = rule.enabled !== false;
+      if (!isEnabled) {
+        li.classList.add('disabled-rule', 'override-item--disabled');
+      }
+
+      const cb = document.createElement('input');
+      cb.type = 'checkbox';
+      cb.checked = isEnabled;
+      cb.classList.add('rule-toggle', 'override-enabled-toggle');
+      cb.title = isEnabled ? 'Disable rule' : 'Enable rule';
+      cb.addEventListener('change', e => {
+        e.stopPropagation();
+        onToggle(index, cb.checked);
+      });
+
+      const span = document.createElement('span');
+      span.className = 'rule-pattern';
+
+      const methodText = rule.method && rule.method !== 'ANY' ? rule.method : null;
+      if (methodText) {
+        const methodBadge = document.createElement('span');
+        methodBadge.className = `rule-method-badge method-${methodText.toLowerCase()}`;
+        methodBadge.textContent = methodText;
+        span.appendChild(methodBadge);
+      }
+
+      if (rule.graphqlOperation) {
+        const gqlBadge = document.createElement('span');
+        gqlBadge.className = 'graphql-badge';
+        gqlBadge.textContent = `GQL: ${rule.graphqlOperation}`;
+        span.appendChild(gqlBadge);
+      }
+
+      const patternText = document.createTextNode(` ${rule.pattern} `);
+      span.appendChild(patternText);
+
+      if (rule.failReason) {
+        const failBadge = document.createElement('span');
+        failBadge.className = 'fail-badge override-fail-badge';
+        failBadge.textContent = 'FAIL';
+        failBadge.title = rule.failReason;
+        span.appendChild(failBadge);
+      } else if (rule.redirectUrl) {
+        const redirSpan = document.createElement('span');
+        redirSpan.className = 'redirect-text';
+        redirSpan.textContent = ` ➔ ${rule.redirectUrl}`;
+        span.appendChild(redirSpan);
+      }
+
+      if (typeof rule.statusCode === 'number') {
+        const statusBadge = document.createElement('span');
+        statusBadge.className = 'status-badge override-status-badge';
+        statusBadge.textContent = `${rule.statusCode}`;
+        span.appendChild(statusBadge);
+      }
+
+      if (typeof rule.delayMs === 'number' && rule.delayMs > 0) {
+        const delayBadge = document.createElement('span');
+        delayBadge.className = 'delay-badge override-delay-badge';
+        delayBadge.textContent = `⏱ ${rule.delayMs}ms`;
+        span.appendChild(delayBadge);
+      }
+
+      if (Array.isArray(rule.responseHeaders) && rule.responseHeaders.length > 0) {
+        const headerBadge = document.createElement('span');
+        headerBadge.className = 'header-badge';
+        headerBadge.textContent = `+${rule.responseHeaders.length} res headers`;
+        span.appendChild(headerBadge);
+      }
+
+      if (Array.isArray(rule.requestHeaders) && rule.requestHeaders.length > 0) {
+        const reqHeaderBadge = document.createElement('span');
+        reqHeaderBadge.className = 'header-badge';
+        reqHeaderBadge.textContent = `+${rule.requestHeaders.length} req headers`;
+        span.appendChild(reqHeaderBadge);
+      }
+
+      span.addEventListener('click', () => onEdit(index));
+
+      const actionsDiv = document.createElement('div');
+      actionsDiv.className = 'rule-actions';
+
+      const editBtn = createUiButton('Edit', {
+        className: 'action-btn edit-btn',
+        variant: 'ghost',
+        size: 'small',
+        title: 'Edit rule',
+      });
+      editBtn.addEventListener('click', e => {
+        e.stopPropagation();
+        onEdit(index);
+      });
+
+      const dupBtn = createUiButton('Copy', {
+        className: 'action-btn duplicate-btn',
+        variant: 'ghost',
+        size: 'small',
+        title: 'Duplicate rule',
+      });
+      dupBtn.addEventListener('click', e => {
+        e.stopPropagation();
+        onDuplicate(index);
+      });
+
+      const delBtn = createUiButton('Delete', {
+        className: 'action-btn delete-btn del-btn',
+        variant: 'danger',
+        size: 'small',
+        title: 'Delete rule',
+      });
+      delBtn.addEventListener('click', e => {
+        e.stopPropagation();
+        onDelete(index);
+      });
+
+      actionsDiv.appendChild(editBtn);
+      actionsDiv.appendChild(dupBtn);
+      actionsDiv.appendChild(delBtn);
+
+      li.appendChild(cb);
+      li.appendChild(span);
+      li.appendChild(actionsDiv);
+      elements.listEl.appendChild(li);
+    });
+  }
+}
diff --git a/src/ui/swagger.ts b/src/ui/swagger.ts
new file mode 100644
index 0000000..f3547dd
--- /dev/null
+++ b/src/ui/swagger.ts
@@ -0,0 +1,85 @@
+/// <reference path="./types.ts" />
+
+namespace NetworkOverridesUi {
+  export function parseSwaggerToRules(content: string): OverrideRule[] {
+    const trimmed = content.trim();
+    if (!trimmed) return [];
+
+    let parsed: any;
+    try {
+      parsed = JSON.parse(trimmed);
+    } catch {
+      // Simple fallback JSON/YAML keys check
+      return [];
+    }
+
+    if (!parsed || typeof parsed !== 'object') return [];
+    if (!parsed.paths || typeof parsed.paths !== 'object') return [];
+
+    const rules: OverrideRule[] = [];
+    const HTTP_METHODS = ['get', 'post', 'put', 'patch', 'delete', 'options', 'head'];
+
+    for (const [path, pathObj] of Object.entries(parsed.paths)) {
+      if (!pathObj || typeof pathObj !== 'object') continue;
+
+      for (const [method, opObj] of Object.entries(pathObj as Record<string, any>)) {
+        if (!HTTP_METHODS.includes(method.toLowerCase())) continue;
+        if (!opObj || typeof opObj !== 'object') continue;
+
+        let mockBody: string | undefined;
+
+        // Try extracting response example from OpenAPI 3 or Swagger 2
+        const responses = opObj.responses;
+        if (responses && typeof responses === 'object') {
+          const successResp = responses['200'] || responses['201'] || responses['default'];
+          if (successResp) {
+            // OpenAPI 3.0 content schema
+            if (successResp.content && typeof successResp.content === 'object') {
+              const jsonContent =
+                successResp.content['application/json'] || Object.values(successResp.content)[0];
+              if (jsonContent?.example) {
+                mockBody =
+                  typeof jsonContent.example === 'string'
+                    ? jsonContent.example
+                    : JSON.stringify(jsonContent.example, null, 2);
+              } else if (jsonContent?.examples) {
+                const ex = Object.values(jsonContent.examples)[0] as any;
+                if (ex?.value) {
+                  mockBody =
+                    typeof ex.value === 'string' ? ex.value : JSON.stringify(ex.value, null, 2);
+                }
+              }
+            }
+            // Swagger 2.0 examples
+            else if (successResp.examples && typeof successResp.examples === 'object') {
+              const jsonEx = successResp.examples['application/json'];
+              if (jsonEx) {
+                mockBody = typeof jsonEx === 'string' ? jsonEx : JSON.stringify(jsonEx, null, 2);
+              }
+            }
+          }
+        }
+
+        if (!mockBody) {
+          mockBody = JSON.stringify(
+            { message: `Mocked response for ${method.toUpperCase()} ${path}` },
+            null,
+            2
+          );
+        }
+
+        // Convert path template parameters e.g. /users/{id} -> /users/*
+        const globPattern = path.replace(/\{[^}]+\}/g, '*');
+
+        rules.push({
+          pattern: globPattern,
+          method: method.toUpperCase(),
+          mode: 'text',
+          body: mockBody,
+        });
+      }
+    }
+
+    return rules;
+  }
+}
diff --git a/src/ui/toolbar-controller.ts b/src/ui/toolbar-controller.ts
new file mode 100644
index 0000000..fd3d2f4
--- /dev/null
+++ b/src/ui/toolbar-controller.ts
@@ -0,0 +1,151 @@
+/// <reference path="./types.ts" />
+/// <reference path="./modal.ts" />
+/// <reference path="./notifications.ts" />
+
+namespace NetworkOverridesUi {
+  export interface ToolbarControllerOptions {
+    elements: Elements;
+    state: UiState;
+    getStorageKey: (suffix: string) => string;
+    saveState: (rules: OverrideRule[]) => Promise<PersistenceResult>;
+    renderRules: () => void;
+    renderApis: () => void;
+    loadApis: () => Promise<void>;
+    notifyBackground: () => Promise<void>;
+  }
+
+  export function bindToolbarController(options: ToolbarControllerOptions): void {
+    const {
+      elements,
+      state,
+      getStorageKey,
+      saveState,
+      renderRules,
+      renderApis,
+      loadApis,
+      notifyBackground,
+    } = options;
+
+    const tabButtons = elements.tabsContainer?.querySelectorAll('.tab-btn') || [];
+    tabButtons.forEach(button => {
+      button.classList.toggle('active', (button as HTMLElement).dataset.tab === 'other');
+      button.addEventListener('click', () => {
+        tabButtons.forEach(item => item.classList.remove('active'));
+        button.classList.add('active');
+        state.activeTab = (button as HTMLElement).dataset.tab || 'other';
+        const rulesTab = state.activeTab === 'overrides';
+        elements.apisSection.style.display = rulesTab ? 'none' : 'block';
+        elements.overridesSection.style.display = rulesTab ? 'block' : 'none';
+        if (!rulesTab) renderApis();
+      });
+    });
+
+    elements.apiSearchInput?.addEventListener('input', () => {
+      state.apiFilter = elements.apiSearchInput.value;
+      renderApis();
+    });
+    document.querySelectorAll<HTMLInputElement>('.capture-type-cb').forEach(input => {
+      input.addEventListener('change', () => {
+        const types = Array.from(
+          document.querySelectorAll<HTMLInputElement>('.capture-type-cb:checked')
+        ).map(item => item.value);
+        chrome.runtime.sendMessage({ type: 'updateCapturedBodyTypes', types });
+        renderApis();
+      });
+    });
+
+    async function refreshApis(button: HTMLButtonElement): Promise<void> {
+      if (button.disabled) return;
+      const originalTitle = button.title;
+      button.disabled = true;
+      button.classList.add('loading');
+      button.setAttribute('aria-busy', 'true');
+      button.title = 'Refreshing captured requests…';
+      try {
+        await loadApis();
+      } finally {
+        button.disabled = false;
+        button.classList.remove('loading');
+        button.removeAttribute('aria-busy');
+        button.title = originalTitle;
+      }
+    }
+
+    elements.refreshBtn?.addEventListener('click', () => {
+      void refreshApis(elements.refreshBtn);
+    });
+    const capturedRefreshButton = document.getElementById(
+      'refresh-captured-apis'
+    ) as HTMLButtonElement | null;
+    capturedRefreshButton?.addEventListener('click', () => {
+      void refreshApis(capturedRefreshButton);
+    });
+    elements.infoBtn?.addEventListener('click', () => {
+      chrome.tabs.create?.({ url: chrome.runtime.getURL?.('guide.html') || 'guide.html' });
+    });
+    elements.addApiBtn?.addEventListener('click', () => {
+      state.currentEditIndex = null;
+      elements.modalTitleText.textContent = 'Add override';
+      elements.modalUrl.textContent = '';
+      elements.modalPattern.value = '';
+      elements.modalMethod.value = 'ANY';
+      elements.modalBody.value = '';
+      elements.modalRedirectUrl.value = '';
+      prefillAdvancedFields(elements, null);
+      updateModalVisibility(elements, 'body');
+      elements.modalPattern.disabled = false;
+      openModal(elements);
+    });
+    elements.addBtn?.addEventListener('click', async () => {
+      const pattern = elements.patternInput.value.trim();
+      if (!pattern) {
+        showNotification('Pattern is required before adding a rule.', 'error');
+        elements.patternInput.focus();
+        return;
+      }
+      const rule: OverrideRule = {
+        pattern,
+        body: elements.bodyInput.value,
+        mode: elements.modeSelect.value as OverrideMode,
+      };
+      const redirectUrl = elements.redirectUrlInput.value.trim();
+      if (redirectUrl) rule.redirectUrl = redirectUrl;
+      try {
+        const result = await saveState([...state.overrides, rule]);
+        renderRules();
+        showPersistenceNotification('Rule added', result);
+      } catch (error) {
+        showNotification(`Could not add rule: ${errorMessage(error)}`, 'error');
+      }
+    });
+    elements.enableCheckbox?.addEventListener('change', async () => {
+      const previousEnabled = state.enabled;
+      const nextEnabled = elements.enableCheckbox.checked;
+      try {
+        await Promise.resolve(
+          chrome.storage.local.set({ [getStorageKey('enabled')]: nextEnabled })
+        );
+        state.enabled = nextEnabled;
+      } catch (error) {
+        state.enabled = previousEnabled;
+        elements.enableCheckbox.checked = previousEnabled;
+        showNotification(`Could not save interception setting: ${errorMessage(error)}`, 'error');
+        return;
+      }
+
+      try {
+        await notifyBackground();
+        showNotification(
+          nextEnabled ? 'Interception enabled.' : 'Interception disabled.',
+          'success'
+        );
+      } catch (error) {
+        showNotification(
+          `${nextEnabled ? 'Enabled' : 'Disabled'} setting saved, but the background update failed: ${errorMessage(error)}`,
+          'warning',
+          7000
+        );
+      }
+    });
+  }
+}
diff --git a/src/ui/types.ts b/src/ui/types.ts
new file mode 100644
index 0000000..8514ff8
--- /dev/null
+++ b/src/ui/types.ts
@@ -0,0 +1,108 @@
+/// <reference types="chrome" />
+/// <reference path="../shared.ts" />
+/// <reference path="../utils.ts" />
+
+namespace NetworkOverridesUi {
+  export const KNOWN_METHODS = ['ANY', 'GET', 'POST', 'PUT', 'PATCH', 'DELETE'];
+  export type OverrideMode = NetworkOverridesShared.OverrideMode;
+  export type OverrideRule = NetworkOverridesShared.OverrideRule;
+  export type ApiEntry = NetworkOverridesShared.ApiEntry;
+  export type FetchHeader = NetworkOverridesShared.FetchHeader;
+  export type HeaderField = NetworkOverridesShared.FetchHeader;
+
+  export interface PersistenceResult {
+    applied: boolean;
+    warning?: string;
+    retry?: () => Promise<void>;
+  }
+
+  export interface Elements {
+    enableCheckbox: HTMLInputElement;
+    attachStatus: HTMLElement;
+    patternInput: HTMLInputElement;
+    bodyInput: HTMLTextAreaElement;
+    addBtn: HTMLButtonElement;
+    listEl: HTMLUListElement;
+    modeSelect: HTMLSelectElement;
+    apisSection: HTMLDivElement;
+    apiSearchInput: HTMLInputElement;
+    apisList: HTMLDivElement;
+    tabsContainer: HTMLDivElement;
+    overridesSection: HTMLDivElement;
+    modal: HTMLDivElement;
+    modalUrl: HTMLElement;
+    modalTitleText: HTMLElement;
+    modalPattern: HTMLInputElement;
+    modalMethod: HTMLSelectElement;
+    modalMode: HTMLSelectElement;
+    modalBody: HTMLTextAreaElement;
+    modalRedirectUrl: HTMLInputElement;
+    modalBodyFields: HTMLDivElement;
+    modalRedirectFields: HTMLDivElement;
+    modalStatus: HTMLInputElement;
+    modalDelay: HTMLInputElement;
+    modalHeaders: HTMLTextAreaElement;
+    modalFailFields: HTMLDivElement;
+    modalFailReason: HTMLSelectElement;
+    modalAdvancedFields: HTMLDivElement;
+    modalStatusField: HTMLElement;
+    modalHeadersField: HTMLElement;
+    modalFeedback: HTMLElement;
+    saveOverrideBtn: HTMLButtonElement;
+    formatJsonBtn: HTMLButtonElement;
+    closeModal: HTMLElement;
+    newRow: HTMLDivElement;
+    refreshBtn: HTMLButtonElement;
+    infoBtn: HTMLButtonElement;
+    redirectUrlInput: HTMLInputElement;
+    addApiBtn: HTMLButtonElement;
+    exportRulesBtn: HTMLButtonElement;
+    importRulesBtn: HTMLButtonElement;
+    importRulesInput: HTMLInputElement;
+    modalRequestHeaders?: HTMLTextAreaElement;
+    modalRequestHeadersField?: HTMLElement;
+    modalGraphqlOp?: HTMLInputElement;
+    modalPreviewContainer?: HTMLDivElement;
+    profilesSelect?: HTMLSelectElement;
+    saveProfileBtn?: HTMLButtonElement;
+    deleteProfileBtn?: HTMLButtonElement;
+    // New Visual Table & cURL/Swagger elements
+    modalRequestHeadersTable?: HTMLDivElement;
+    modalResponseHeadersTable?: HTMLDivElement;
+    importCurlSwaggerBtn?: HTMLButtonElement;
+    curlSwaggerModal?: HTMLDivElement;
+    curlSwaggerTextarea?: HTMLTextAreaElement;
+    curlSwaggerFileInput?: HTMLInputElement;
+    curlSwaggerImportBtn?: HTMLButtonElement;
+    curlSwaggerCloseModal?: HTMLElement;
+  }
+
+  export interface AppOptions {
+    autoFillOnOpen: boolean;
+    showManualEditor: boolean;
+  }
+
+  export interface UiApi {
+    url: string;
+    type: string;
+    method?: string;
+    headers?: HeaderField[];
+    postData?: string;
+    hasBody?: boolean;
+    body?: string;
+    statusCode?: number;
+    ruleCount?: number;
+    isDisabledOnly?: boolean;
+  }
+
+  export interface UiState {
+    overrides: OverrideRule[];
+    currentEditIndex: number | null;
+    capturedApis: UiApi[];
+    apiFilter: string;
+    activeTab: string;
+    attached: boolean;
+    enabled: boolean;
+    attachError: string | null;
+  }
+}
diff --git a/src/ui/view-utils.ts b/src/ui/view-utils.ts
new file mode 100644
index 0000000..ebe0aac
--- /dev/null
+++ b/src/ui/view-utils.ts
@@ -0,0 +1,41 @@
+/// <reference path="./types.ts" />
+/// <reference path="../utils.ts" />
+
+namespace NetworkOverridesUi {
+  export function formatApiLabel(url: string): string {
+    if (!url.startsWith('data:')) return url;
+    const commaIndex = url.indexOf(',');
+    const prefix = commaIndex === -1 ? url : url.slice(0, commaIndex);
+    const mediaType = prefix.slice(5) || 'unknown';
+    return `[data URL: ${mediaType}]`;
+  }
+
+  export function highlightApiLabel(url: string, rawSearchTerm: string): string {
+    const label = formatApiLabel(url);
+    const searchTerm = rawSearchTerm.trim().toLowerCase();
+    if (!searchTerm) return escapeHtml(label);
+    const lowerLabel = label.toLowerCase();
+    const matchIndex = lowerLabel.indexOf(searchTerm);
+    if (matchIndex === -1) return escapeHtml(label);
+    const before = escapeHtml(label.slice(0, matchIndex));
+    const match = escapeHtml(label.slice(matchIndex, matchIndex + searchTerm.length));
+    const after = escapeHtml(label.slice(matchIndex + searchTerm.length));
+    return `${before}<mark class="api-match">${match}</mark>${after}`;
+  }
+
+  export function formatJsonIfPossible(value: string): string {
+    try {
+      const parsed = JSON.parse(value);
+      return JSON.stringify(parsed, null, 2);
+    } catch {
+      return value;
+    }
+  }
+
+  export function normalizeApiType(type: any): string {
+    const rawType = typeof type === 'string' ? type : 'other';
+    const normalized = rawType.toLowerCase();
+    if (normalized === 'xmlhttprequest') return 'xhr';
+    return normalized;
+  }
+}
diff --git a/src/utils.ts b/src/utils.ts
index 38e1fcd..552baaa 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -2,7 +2,10 @@
 
 namespace NetworkOverridesUtils {
   export function isRegexPattern(pattern: string): boolean {
-    return pattern.startsWith('/') && pattern.lastIndexOf('/') > 0;
+    if (!pattern.startsWith('/')) return false;
+    const lastSlash = pattern.lastIndexOf('/');
+    if (lastSlash <= 0) return false;
+    return /^[dgimsuvy]*$/.test(pattern.slice(lastSlash + 1));
   }
 
   export function escapeRegex(str: string): string {
diff --git a/styles.css b/styles.css
index b33fea0..683ff90 100644
--- a/styles.css
+++ b/styles.css
@@ -1,861 +1,4 @@
-body {
-  font-family: Arial, sans-serif;
-  padding: 12px;
-}
-.header-row {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-}
-.header-row h2 {
-  margin: 0;
-  text-align: center;
-}
-.switch-container {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin: 8px 0;
-}
-.switch {
-  position: relative;
-  display: inline-block;
-  width: 36px;
-  height: 20px;
-}
-.switch input {
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-.switch-slider {
-  position: absolute;
-  cursor: pointer;
-  inset: 0;
-  background: #ccc;
-  border-radius: 20px;
-  transition: background 0.2s;
-}
-.switch-slider::before {
-  content: '';
-  position: absolute;
-  width: 16px;
-  height: 16px;
-  left: 2px;
-  bottom: 2px;
-  background: #fff;
-  border-radius: 50%;
-  transition: transform 0.2s;
-}
-.switch input:checked + .switch-slider {
-  background: #0a84ff;
-}
-.switch input:checked + .switch-slider::before {
-  transform: translateX(16px);
-}
-.switch-label {
-  font-size: 0.92rem;
-  color: #334e68;
-  cursor: pointer;
-  user-select: none;
-}
-.header-btn {
-  position: absolute;
-  background: none;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  cursor: pointer;
-  padding: 4px 8px;
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 0.92rem;
-  color: #35506b;
-  transition: background 0.15s;
-}
-.header-btn:hover {
-  background: #f4f8fc;
-  border-color: #c9d7e6;
-}
-.info-btn {
-  right: 0;
-}
-#refresh-apis {
-  right: 32px;
-}
-.header-btn.loading {
-  animation: spin 0.8s linear infinite;
-  pointer-events: none;
-  opacity: 0.6;
-}
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-body {
-  overflow-y: scroll;
-  scrollbar-width: thin;
-  scrollbar-color: rgba(0, 0, 0, 0.06) transparent;
-}
-::-webkit-scrollbar {
-  width: 1.5px;
-  height: 1.5px;
-}
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-::-webkit-scrollbar-thumb {
-  background: rgba(0, 0, 0, 0.06);
-  border-radius: 4px;
-  transition: background 0.4s ease;
-}
-.scrolling::-webkit-scrollbar-thumb {
-  background: rgba(0, 0, 0, 0.2);
-}
-.modal,
-.modal-content {
-  scrollbar-width: thin;
-  scrollbar-color: rgba(0, 0, 0, 0.06) transparent;
-}
-.popup-body {
-  min-width: 380px;
-  min-height: 480px;
-}
-#new-row {
-  margin-bottom: 12px;
-}
-textarea {
-  width: 100%;
-}
-.api-controls {
-  position: sticky;
-  top: 35px;
-  z-index: 3;
-  background: #fff;
-  padding: 4px 0 8px;
-}
-input[type='search'] {
-  width: 100%;
-  box-sizing: border-box;
-  margin-bottom: 8px;
-  padding: 8px;
-}
-.api-toolbar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  flex-wrap: wrap;
-  margin: 0 0 10px;
-}
-.api-filter-toggle {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  margin: 0 0 10px;
-  color: #334e68;
-  font-size: 0.92rem;
-}
-.api-toolbar-actions {
-  display: flex;
-  gap: 6px;
-}
-.api-toolbar-actions button {
-  padding: 4px 10px;
-  border: 1px solid #c9d7e6;
-  border-radius: 999px;
-  background: #fff;
-  color: #35506b;
-  cursor: pointer;
-}
-.api-toolbar-actions button:hover {
-  background: #f4f8fc;
-}
-#list,
-#apis-list,
-.api-section ul {
-  list-style: none;
-  padding-left: 0;
-}
-.override-item,
-.api-item {
-  border: 1px solid #ddd;
-  padding: 8px;
-  margin-bottom: 4px;
-  cursor: pointer;
-  border-radius: 4px;
-}
-.api-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 8px;
-}
-.override-item:hover {
-  background: #f0f8ff;
-}
-.override-item-main {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: 8px;
-}
-.override-item-info {
-  flex: 1;
-  min-width: 0;
-}
-.override-pattern {
-  color: #007acc;
-  display: block;
-  overflow-wrap: anywhere;
-  word-break: break-word;
-}
-.override-item-actions {
-  flex-shrink: 0;
-  display: flex;
-  gap: 4px;
-  padding-top: 2px;
-}
-.override-item-actions button {
-  background: none;
-  border: 1px solid #c9d7e6;
-  border-radius: 4px;
-  cursor: pointer;
-  padding: 4px 8px;
-  font-size: 0.85rem;
-  color: #35506b;
-  transition: background 0.15s;
-}
-.override-item-actions button:hover {
-  background: #eef4fa;
-}
-.rules-io-row {
-  display: flex;
-  gap: 6px;
-  margin-bottom: 8px;
-}
-.rules-io-btn {
-  border: 1px solid #c9d7e6;
-  border-radius: 4px;
-  background: #f7fafd;
-  color: #35506b;
-  padding: 4px 10px;
-  cursor: pointer;
-  font-size: 0.85rem;
-}
-.rules-io-btn:hover {
-  background: #eef4fa;
-}
-.override-item--disabled {
-  opacity: 0.55;
-}
-.override-enabled-toggle {
-  flex-shrink: 0;
-  margin-top: 2px;
-  cursor: pointer;
-}
-.override-method-badge {
-  display: inline-block;
-  padding: 0 4px;
-  border-radius: 3px;
-  background: #eef4fa;
-  color: #35506b;
-  font-weight: 600;
-  font-size: 0.78em;
-  margin-right: 4px;
-}
-.override-meta {
-  margin-top: 4px;
-  font-size: 0.82em;
-  color: #777;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.override-redirect {
-  color: #0a84ff;
-  font-size: 0.9em;
-  margin: 4px 0;
-}
-.api-item:hover {
-  background: #f0f8ff;
-}
-.api-item.active {
-  background: #e8f3ff;
-  border-color: #4a90e2;
-  box-shadow: inset 0 0 0 1px #4a90e2;
-}
-.api-item.selected {
-  background: #d6ebff;
-  border-color: #1f6fd1;
-  box-shadow: inset 0 0 0 2px #1f6fd1;
-}
-.api-item b {
-  color: #007acc;
-  display: block;
-  max-width: 100%;
-  overflow-wrap: anywhere;
-  word-break: break-word;
-}
-.api-item-content {
-  flex-grow: 1;
-  overflow: hidden;
-}
-.api-item-controls {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-.copy-curl-btn {
-  background: none;
-  border: 1px solid #c9d7e6;
-  border-radius: 4px;
-  cursor: pointer;
-  padding: 4px 6px;
-  font-size: 0.85em;
-  color: #334e68;
-}
-.copy-curl-btn:hover {
-  background: #fff;
-  border-color: #35506b;
-}
-.api-item.active b {
-  color: #0a4f9c;
-}
-.api-item.selected b {
-  color: #08407f;
-}
-.api-match {
-  padding: 0 2px;
-  border-radius: 4px;
-  background: #fff1a8;
-  color: #3a2f00;
-}
-.hint {
-  font-size: 0.9em;
-  color: #555;
-  background: #f8f8f8;
-  border: 1px solid #ddd;
-  padding: 8px;
-  border-radius: 4px;
-  margin: 8px 0;
-}
-#modal-status {
-  font-weight: 700;
-}
-#modal-status.new {
-  color: green;
-}
-#modal-status.update {
-  color: darkorange;
-}
-.modal {
-  display: block;
-  position: fixed;
-  z-index: 1000;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  background: #0008;
-  overflow: auto;
-}
-.modal-content {
-  background: #fff;
-  margin: 10% auto;
-  padding: 20px;
-  border-radius: 8px;
-  width: min(92vw, 640px);
-  max-height: 80vh;
-  overflow: auto;
-  box-sizing: border-box;
-}
-.popup-body .modal-content {
-  margin: 6% auto;
-}
-.close {
-  color: #aaa;
-  float: right;
-  font-size: 28px;
-  font-weight: bold;
-  cursor: pointer;
-}
-.modal-title {
-  margin: 0 36px 10px 0;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  text-align: center;
-}
-#modal-url {
-  display: block;
-  font-size: 0.9rem;
-  font-weight: 400;
-  color: #4b6278;
-  overflow-wrap: anywhere;
-  word-break: break-word;
-  text-align: center;
-}
-.modal-field {
-  display: block;
-  margin: 0 0 12px;
-}
-.override-type-selector {
-  display: flex;
-  gap: 0;
-  border: 1px solid #c9d7e6;
-  border-radius: 6px;
-  overflow: hidden;
-  margin-bottom: 12px;
-  flex-wrap: wrap;
-}
-.type-radio {
-  flex: 1 1 auto;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  padding: 8px 12px;
-  cursor: pointer;
-  font-size: 0.88rem;
-  color: #55708a;
-  background: #f8fbff;
-  transition:
-    background 0.15s,
-    color 0.15s;
-  border-right: 1px solid #c9d7e6;
-  white-space: nowrap;
-}
-.type-radio:last-child {
-  border-right: none;
-}
-.type-radio {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  padding: 8px 12px;
-  cursor: pointer;
-  font-size: 0.88rem;
-  color: #55708a;
-  background: #f8fbff;
-  transition:
-    background 0.15s,
-    color 0.15s;
-  border-right: 1px solid #c9d7e6;
-}
-.type-radio:last-child {
-  border-right: none;
-}
-.type-radio input {
-  accent-color: #0a84ff;
-}
-.type-radio:has(input:checked) {
-  background: #e8f3ff;
-  color: #0a4f9c;
-  font-weight: 600;
-}
-.type-radio:hover {
-  background: #eef4fa;
-}
-.modal-field span {
-  display: block;
-  margin-bottom: 6px;
-  font-size: 0.92rem;
-  color: #334e68;
-  font-weight: 600;
-}
-#modal-pattern,
-#modal-mode,
-#modal-body,
-#modal-redirect-url {
-  width: 100%;
-  box-sizing: border-box;
-}
-#modal-pattern,
-#modal-mode,
-#modal-redirect-url {
-  padding: 8px;
-}
-#modal-mode {
-  margin-bottom: 12px;
-}
-#modal-body {
-  display: block;
-}
-.modal-action-btn {
-  display: inline-block;
-  margin-top: 8px;
-  padding: 6px 14px;
-  border: 1px solid #c9d7e6;
-  border-radius: 6px;
-  background: #f8fbff;
-  color: #35506b;
-  font-size: 0.85rem;
-  cursor: pointer;
-  transition: background 0.15s;
-}
-.modal-action-btn:hover {
-  background: #eef4fa;
-}
-.modal-body-footer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-top: 8px;
-  gap: 8px;
-}
-.body-type-badge {
-  font-size: 0.78rem;
-  padding: 3px 10px;
-  border-radius: 999px;
-  background: #e8f3ff;
-  color: #0a4f9c;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.03em;
-}
-.body-type-badge.json {
-  background: #e3f9e5;
-  color: #1a7d36;
-}
-#save-override {
-  display: block;
-  width: 100%;
-  margin-top: 14px;
-  padding: 10px 14px;
-  border: none;
-  border-radius: 10px;
-  background: linear-gradient(135deg, #0a84ff, #0066d6);
-  color: #fff;
-  font-weight: 700;
-  font-size: 0.95rem;
-  letter-spacing: 0.01em;
-  cursor: pointer;
-  box-shadow: 0 8px 18px rgba(10, 132, 255, 0.25);
-  transition:
-    transform 0.12s ease,
-    box-shadow 0.12s ease,
-    filter 0.12s ease;
-}
-#save-override:hover {
-  filter: brightness(1.03);
-  box-shadow: 0 10px 22px rgba(10, 132, 255, 0.3);
-}
-#save-override:active {
-  transform: translateY(1px);
-  box-shadow: 0 6px 14px rgba(10, 132, 255, 0.22);
-}
-#save-override:focus-visible {
-  outline: 2px solid #8cc8ff;
-  outline-offset: 2px;
-}
-.api-bucket {
-  margin-bottom: 20px;
-}
-.api-bucket-toggle {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0;
-  background: none;
-  border: none;
-  margin: 12px 0 10px;
-  cursor: pointer;
-  text-align: left;
-}
-.api-bucket-toggle {
-  position: sticky;
-  top: 0;
-  z-index: 2;
-  padding: 8px 0;
-  background: #fff;
-}
-.api-bucket-title {
-  font-size: 1rem;
-  color: #1b2b3a;
-  font-weight: 700;
-}
-.api-bucket-meta {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-.api-bucket-chevron {
-  width: 22px;
-  height: 22px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 999px;
-  background: #eef4fa;
-  position: relative;
-}
-.api-bucket-chevron::before {
-  content: '';
-  width: 8px;
-  height: 8px;
-  border-right: 2px solid #35506b;
-  border-bottom: 2px solid #35506b;
-  transform: rotate(45deg) translateY(-1px);
-  transition: transform 0.15s ease;
-}
-.api-bucket-chevron.collapsed::before {
-  transform: rotate(-45deg) translateY(1px);
-}
-.api-count {
-  display: inline-block;
-  min-width: 20px;
-  padding: 2px 8px;
-  border-radius: 999px;
-  background: #e8f3ff;
-  color: #0a4f9c;
-  font-size: 0.82rem;
-  font-weight: 600;
-  text-align: center;
-}
-.api-search-row {
-  display: flex;
-  gap: 6px;
-  align-items: stretch;
-  margin-bottom: 8px;
-}
-.api-search-row input[type='search'] {
-  flex: 1;
-  margin-bottom: 0;
-}
-.add-api-btn {
-  width: 34px;
-  flex-shrink: 0;
-  border: 1px dashed #0a84ff;
-  border-radius: 6px;
-  background: #f0f7ff;
-  color: #0a84ff;
-  font-weight: 700;
-  font-size: 1.2rem;
-  line-height: 1;
-  cursor: pointer;
-  transition: background 0.15s;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-.add-api-btn:hover {
-  background: #dcecff;
-}
-.api-status {
-  display: inline-block;
-  padding: 0 4px;
-  border-radius: 3px;
-  font-size: 0.72rem;
-  font-weight: 700;
-  line-height: 1.4;
-  background: #e8f3ff;
-  color: #0a4f9c;
-  vertical-align: middle;
-  margin-left: 3px;
-}
-.api-item.active .api-status {
-  background: #c8dfff;
-}
-.api-item.active .api-status {
-  background: #c8dfff;
-}
-.api-item--rule-disabled {
-  opacity: 0.55;
-}
-.api-empty-state {
-  padding: 12px;
-  border: 1px dashed #c9d7e6;
-  border-radius: 8px;
-  background: #f8fbff;
-  color: #55708a;
-  font-size: 0.92rem;
-}
-.api-section {
-  margin-bottom: 16px;
-}
-.api-section h4 {
-  margin: 0 0 8px 0;
-  font-size: 1em;
-  color: #333;
-  border-bottom: 1px solid #eee;
-  padding-bottom: 4px;
-}
-.type-chevron {
-  display: inline-block;
-  width: 16px;
-  font-size: 0.75em;
-  color: #888;
-  transition: transform 0.15s ease;
-}
-.tabs {
-  display: flex;
-  gap: 0;
-  border-bottom: 2px solid #dce4ec;
-  margin-bottom: 12px;
-  position: sticky;
-  top: 0;
-  z-index: 4;
-  background: #fff;
-}
-.tab-btn {
-  background: none;
-  border: none;
-  padding: 8px 12px;
-  font-size: 0.92rem;
-  font-weight: 500;
-  color: #55708a;
-  cursor: pointer;
-  border-bottom: 2px solid transparent;
-  margin-bottom: -2px;
-  white-space: nowrap;
-  transition:
-    color 0.15s,
-    border-color 0.15s;
-}
-.tab-btn:hover {
-  color: #1b2b3a;
-}
-.tab-btn.active {
-  color: #0a4f9c;
-  border-bottom-color: #0a4f9c;
-  font-weight: 600;
-}
-
-.attach-status {
-  font-size: 11px;
-  margin-left: 8px;
-}
-.attach-status--on {
-  color: #2e7d32;
-}
-.attach-status--error {
-  color: #c62828;
-}
-
-#modal-advanced-fields {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-#modal-advanced-fields .modal-field {
-  flex: 1 1 120px;
-}
-#modal-advanced-fields #modal-headers-field {
-  flex-basis: 100%;
-}
-
-.override-status-badge,
-.override-delay-badge,
-.override-fail-badge {
-  font-size: 10px;
-  padding: 1px 5px;
-  border-radius: 3px;
-  margin-right: 4px;
-}
-.override-status-badge {
-  background: #fff3e0;
-  color: #e65100;
-}
-.override-delay-badge {
-  background: #e3f2fd;
-  color: #0a4f9c;
-}
-.override-fail-badge {
-  background: #ffebee;
-  color: #c62828;
-  font-weight: 600;
-}
-
-.profiles-row {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  margin-bottom: 8px;
-}
-.profiles-select {
-  flex: 1;
-  padding: 4px 8px;
-  border: 1px solid #c9d7e6;
-  border-radius: 4px;
-  font-size: 0.85rem;
-}
-.profile-btn {
-  background: #f0f4f8;
-  border: 1px solid #c9d7e6;
-  border-radius: 4px;
-  padding: 4px 8px;
-  font-size: 0.8rem;
-  cursor: pointer;
-  color: #334e68;
-}
-.profile-btn:hover {
-  background: #e2e8f0;
-}
-
-.captured-types-bar {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 0.8rem;
-  color: #486581;
-  padding: 4px 0;
-  margin-top: 4px;
-  flex-wrap: wrap;
-}
-.captured-types-label {
-  font-weight: 600;
-}
-.type-check {
-  display: inline-flex;
-  align-items: center;
-  gap: 3px;
-  cursor: pointer;
-}
-
-.duplicate-btn {
-  background: none;
-  border: 1px solid #dce4ec;
-  border-radius: 3px;
-  padding: 2px 6px;
-  font-size: 0.75rem;
-  color: #486581;
-  cursor: pointer;
-  margin-left: 4px;
-}
-.duplicate-btn:hover {
-  background: #e2e8f0;
-  color: #102a43;
-}
-
-.modal-preview-container {
-  margin-top: 8px;
-  padding: 8px;
-  border: 1px solid #e2e8f0;
-  border-radius: 4px;
-  background: #f8fafc;
-  max-height: 150px;
-  overflow: auto;
-  text-align: center;
-}
-.modal-preview-container img {
-  max-width: 100%;
-  max-height: 130px;
-  object-fit: contain;
-}
-
-.graphql-badge {
-  background-color: #e5c07b;
-  color: #1e1e1e;
-  font-size: 0.7rem;
-  font-weight: bold;
-  padding: 1px 5px;
-  border-radius: 3px;
-  margin-left: 4px;
-}
+@import url('./styles/base.css');
+@import url('./styles/modal-and-rules.css');
+@import url('./styles/features.css');
+@import url('./styles/primitives.css');
diff --git a/styles/base.css b/styles/base.css
new file mode 100644
index 0000000..9259fd7
--- /dev/null
+++ b/styles/base.css
@@ -0,0 +1,398 @@
+:root {
+  --ui-color-primary: #0a66c2;
+  --ui-color-primary-hover: #084f96;
+  --ui-color-primary-soft: #e8f3ff;
+  --ui-color-text: #243b53;
+  --ui-color-muted: #627d98;
+  --ui-color-border: #bcccdc;
+  --ui-color-border-strong: #829ab1;
+  --ui-color-surface: #ffffff;
+  --ui-color-surface-subtle: #f5f8fb;
+  --ui-color-danger: #c62828;
+  --ui-color-danger-soft: #fff1f2;
+  --ui-radius: 6px;
+  --ui-control-height: 34px;
+  --ui-control-height-small: 28px;
+  --ui-focus-ring: 0 0 0 3px rgba(10, 102, 194, 0.18);
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: Arial, sans-serif;
+  padding: 12px;
+}
+.header-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+.header-row h2 {
+  min-width: 0;
+  margin: 0;
+  text-align: left;
+}
+.header-actions {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 4px;
+}
+.switch-container {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 8px 0;
+}
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 36px;
+  height: 20px;
+}
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+.switch-slider {
+  position: absolute;
+  cursor: pointer;
+  inset: 0;
+  background: #ccc;
+  border-radius: 20px;
+  transition: background 0.2s;
+}
+.switch-slider::before {
+  content: '';
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  left: 2px;
+  bottom: 2px;
+  background: #fff;
+  border-radius: 50%;
+  transition: transform 0.2s;
+}
+.switch input:checked + .switch-slider {
+  background: #0a84ff;
+}
+.switch input:checked + .switch-slider::before {
+  transform: translateX(16px);
+}
+.switch-label {
+  font-size: 0.92rem;
+  color: #334e68;
+  cursor: pointer;
+  user-select: none;
+}
+.header-btn {
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: #35506b;
+  transition:
+    color 0.15s,
+    background 0.15s,
+    border-color 0.15s;
+}
+.header-btn:hover {
+  color: #0a66c2;
+  background: #f4f8fc;
+  border-color: #c9d7e6;
+}
+.header-btn:focus-visible {
+  outline: 2px solid #8cc8ff;
+  outline-offset: 2px;
+}
+.header-btn svg {
+  width: 17px;
+  height: 17px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.8;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.header-btn.loading {
+  pointer-events: none;
+  opacity: 0.6;
+}
+.header-btn.loading svg {
+  animation: spin 0.8s linear infinite;
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+body {
+  overflow-y: scroll;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0, 0, 0, 0.06) transparent;
+}
+::-webkit-scrollbar {
+  width: 1.5px;
+  height: 1.5px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.06);
+  border-radius: 4px;
+  transition: background 0.4s ease;
+}
+.scrolling::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.2);
+}
+.modal,
+.modal-content {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0, 0, 0, 0.06) transparent;
+}
+.popup-body {
+  min-width: 380px;
+  min-height: 480px;
+}
+#new-row {
+  margin-bottom: 12px;
+}
+textarea {
+  width: 100%;
+}
+.api-controls {
+  position: sticky;
+  top: 35px;
+  z-index: 3;
+  background: #fff;
+  padding: 4px 0 8px;
+}
+input[type='search'] {
+  width: 100%;
+  box-sizing: border-box;
+  margin-bottom: 8px;
+  padding: 8px;
+}
+.api-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin: 0 0 10px;
+}
+.api-filter-toggle {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin: 0 0 10px;
+  color: #334e68;
+  font-size: 0.92rem;
+}
+.api-toolbar-actions {
+  display: flex;
+  gap: 6px;
+}
+.api-toolbar-actions button {
+  padding: 4px 10px;
+  border: 1px solid #c9d7e6;
+  border-radius: 999px;
+  background: #fff;
+  color: #35506b;
+  cursor: pointer;
+}
+.api-toolbar-actions button:hover {
+  background: #f4f8fc;
+}
+#list,
+#apis-list,
+.api-section ul {
+  list-style: none;
+  padding-left: 0;
+}
+.override-item,
+.api-item {
+  border: 1px solid #ddd;
+  padding: 8px;
+  margin-bottom: 4px;
+  cursor: pointer;
+  border-radius: 4px;
+}
+.api-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+}
+.override-item:hover {
+  background: #f0f8ff;
+}
+.override-item-main {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 8px;
+}
+.override-item-info {
+  flex: 1;
+  min-width: 0;
+}
+.override-pattern {
+  color: #007acc;
+  display: block;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+.override-item-actions {
+  flex-shrink: 0;
+  display: flex;
+  gap: 4px;
+  padding-top: 2px;
+}
+.override-item-actions button {
+  background: none;
+  border: 1px solid #c9d7e6;
+  border-radius: 4px;
+  cursor: pointer;
+  padding: 4px 8px;
+  font-size: 0.85rem;
+  color: #35506b;
+  transition: background 0.15s;
+}
+.override-item-actions button:hover {
+  background: #eef4fa;
+}
+.rules-io-row {
+  display: flex;
+  gap: 6px;
+  margin-bottom: 8px;
+}
+.rules-io-btn {
+  border: 1px solid #c9d7e6;
+  border-radius: 4px;
+  background: #f7fafd;
+  color: #35506b;
+  padding: 4px 10px;
+  cursor: pointer;
+  font-size: 0.85rem;
+}
+.rules-io-btn:hover {
+  background: #eef4fa;
+}
+.override-item--disabled {
+  opacity: 0.55;
+}
+.override-enabled-toggle {
+  flex-shrink: 0;
+  margin-top: 2px;
+  cursor: pointer;
+}
+.override-method-badge {
+  display: inline-block;
+  padding: 0 4px;
+  border-radius: 3px;
+  background: #eef4fa;
+  color: #35506b;
+  font-weight: 600;
+  font-size: 0.78em;
+  margin-right: 4px;
+}
+.override-meta {
+  margin-top: 4px;
+  font-size: 0.82em;
+  color: #777;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.override-redirect {
+  color: #0a84ff;
+  font-size: 0.9em;
+  margin: 4px 0;
+}
+.api-item:hover {
+  background: #f0f8ff;
+}
+.api-item.active {
+  background: #e8f3ff;
+  border-color: #4a90e2;
+  box-shadow: inset 0 0 0 1px #4a90e2;
+}
+.api-item.selected {
+  background: #d6ebff;
+  border-color: #1f6fd1;
+  box-shadow: inset 0 0 0 2px #1f6fd1;
+}
+.api-item b {
+  color: #007acc;
+  display: block;
+  max-width: 100%;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+.api-item-content {
+  flex-grow: 1;
+  overflow: hidden;
+}
+.api-item-controls {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.copy-curl-btn {
+  background: none;
+  border: 1px solid #c9d7e6;
+  border-radius: 4px;
+  cursor: pointer;
+  padding: 4px 6px;
+  font-size: 0.85em;
+  color: #334e68;
+}
+.copy-curl-btn:hover {
+  background: #fff;
+  border-color: #35506b;
+}
+.api-item.active b {
+  color: #0a4f9c;
+}
+.api-item.selected b {
+  color: #08407f;
+}
+.api-match {
+  padding: 0 2px;
+  border-radius: 4px;
+  background: #fff1a8;
+  color: #3a2f00;
+}
+.hint {
+  font-size: 0.9em;
+  color: #555;
+  background: #f8f8f8;
+  border: 1px solid #ddd;
+  padding: 8px;
+  border-radius: 4px;
+  margin: 8px 0;
+}
+#modal-status {
+  font-weight: 700;
+}
+#modal-status.new {
+  color: green;
+}
+#modal-status.update {
+  color: darkorange;
+}
diff --git a/styles/features.css b/styles/features.css
new file mode 100644
index 0000000..d979dcc
--- /dev/null
+++ b/styles/features.css
@@ -0,0 +1,263 @@
+.tabs {
+  display: flex;
+  gap: 0;
+  border-bottom: 2px solid #dce4ec;
+  margin-bottom: 12px;
+  position: sticky;
+  top: 0;
+  z-index: 4;
+  background: #fff;
+}
+.tab-btn {
+  background: none;
+  border: none;
+  padding: 8px 12px;
+  font-size: 0.92rem;
+  font-weight: 500;
+  color: #55708a;
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -2px;
+  white-space: nowrap;
+  transition:
+    color 0.15s,
+    border-color 0.15s;
+}
+.tab-btn:hover {
+  color: #1b2b3a;
+}
+.tab-btn.active {
+  color: #0a4f9c;
+  border-bottom-color: #0a4f9c;
+  font-weight: 600;
+}
+
+.attach-status {
+  font-size: 11px;
+  margin-left: 8px;
+}
+.attach-status--on {
+  color: #2e7d32;
+}
+.attach-status--error {
+  color: #c62828;
+}
+
+#modal-advanced-fields {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 10px;
+}
+#modal-advanced-fields .modal-field {
+  min-width: 0;
+}
+#modal-advanced-fields #modal-request-headers-field,
+#modal-advanced-fields #modal-headers-field {
+  grid-column: 1 / -1;
+}
+
+.override-status-badge,
+.override-delay-badge,
+.override-fail-badge {
+  font-size: 10px;
+  padding: 1px 5px;
+  border-radius: 3px;
+  margin-right: 4px;
+}
+.override-status-badge {
+  background: #fff3e0;
+  color: #e65100;
+}
+.override-delay-badge {
+  background: #e3f2fd;
+  color: #0a4f9c;
+}
+.override-fail-badge {
+  background: #ffebee;
+  color: #c62828;
+  font-weight: 600;
+}
+
+.profiles-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 8px;
+}
+.profiles-select {
+  flex: 1;
+  padding: 4px 8px;
+  border: 1px solid #c9d7e6;
+  border-radius: 4px;
+  font-size: 0.85rem;
+}
+.profile-btn {
+  background: #f0f4f8;
+  border: 1px solid #c9d7e6;
+  border-radius: 4px;
+  padding: 4px 8px;
+  font-size: 0.8rem;
+  cursor: pointer;
+  color: #334e68;
+}
+.profile-btn:hover {
+  background: #e2e8f0;
+}
+
+.captured-types-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 0.8rem;
+  color: #486581;
+  padding: 4px 0;
+  margin-top: 4px;
+  flex-wrap: wrap;
+}
+.captured-types-label {
+  font-weight: 600;
+}
+.type-check {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  cursor: pointer;
+}
+
+.duplicate-btn {
+  background: none;
+  border: 1px solid #dce4ec;
+  border-radius: 3px;
+  padding: 2px 6px;
+  font-size: 0.75rem;
+  color: #486581;
+  cursor: pointer;
+  margin-left: 4px;
+}
+.duplicate-btn:hover {
+  background: #e2e8f0;
+  color: #102a43;
+}
+
+.modal-preview-container {
+  margin-top: 8px;
+  padding: 8px;
+  border: 1px solid #e2e8f0;
+  border-radius: 4px;
+  background: #f8fafc;
+  max-height: 150px;
+  overflow: auto;
+  text-align: center;
+}
+.modal-preview-container img {
+  max-width: 100%;
+  max-height: 130px;
+  object-fit: contain;
+}
+
+.graphql-badge {
+  background-color: #e5c07b;
+  color: #1e1e1e;
+  font-size: 0.7rem;
+  font-weight: bold;
+  padding: 1px 5px;
+  border-radius: 3px;
+  margin-left: 4px;
+}
+
+/* Visual Header Table Editor */
+.modal-headers-table {
+  margin-top: 6px;
+}
+
+.headers-table-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.headers-editor-mode {
+  display: inline-flex;
+  align-self: flex-start;
+  padding: 2px;
+  border: 1px solid #3e4451;
+  border-radius: 5px;
+  background: #21252b;
+}
+
+.headers-editor-mode button {
+  padding: 3px 9px;
+  border: 0;
+  border-radius: 3px;
+  background: transparent;
+  color: #9da5b4;
+  cursor: pointer;
+  font-size: 0.75rem;
+}
+
+.headers-editor-mode button.active {
+  background: #3b4048;
+  color: #61afef;
+}
+
+.headers-table-rows {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.header-table-row {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+
+.header-row-key,
+.header-row-value {
+  flex: 1;
+  padding: 4px 8px;
+  font-size: 0.8rem;
+  border: 1px solid #3e4451;
+  border-radius: 4px;
+  background-color: #21252b;
+  color: #abb2bf;
+}
+
+.header-row-delete {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 0.9rem;
+  padding: 2px 4px;
+  transition: opacity 0.2s;
+}
+
+.header-row-delete:hover {
+  opacity: 0.8;
+}
+
+.add-header-row-btn {
+  align-self: flex-start;
+  font-size: 0.75rem;
+  padding: 3px 8px;
+  background-color: #2c313a;
+  color: #61afef;
+  border: 1px dashed #61afef;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.add-header-row-btn:hover {
+  background-color: #3b4048;
+}
+
+/* cURL / Swagger Modal Styling */
+.curl-swagger-file-row {
+  margin-top: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-size: 0.85rem;
+  color: #abb2bf;
+}
diff --git a/styles/guide.css b/styles/guide.css
new file mode 100644
index 0000000..7beb9ea
--- /dev/null
+++ b/styles/guide.css
@@ -0,0 +1,207 @@
+:root {
+  --accent: #0a84ff;
+  --accent-dark: #0066d6;
+  --text: #1b2b3a;
+  --text-secondary: #55708a;
+  --border: #c9d7e6;
+  --bg: #f8fbff;
+  --card: #fff;
+  --code-bg: #f4f6f8;
+  --radius: 8px;
+}
+* {
+  box-sizing: border-box;
+}
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
+  line-height: 1.6;
+  color: var(--text);
+  background: var(--bg);
+  margin: 0;
+  padding: 0;
+}
+.container {
+  max-width: 880px;
+  margin: 0 auto;
+  padding: 32px 24px 80px;
+}
+h1 {
+  font-size: 2rem;
+  margin-bottom: 0.25em;
+  color: var(--accent-dark);
+}
+h1 small {
+  font-size: 1rem;
+  font-weight: 400;
+  color: var(--text-secondary);
+  display: block;
+  margin-top: 4px;
+}
+h2 {
+  font-size: 1.4rem;
+  margin: 2em 0 0.5em;
+  padding-bottom: 6px;
+  border-bottom: 2px solid var(--accent);
+  color: var(--text);
+}
+h3 {
+  font-size: 1.1rem;
+  margin: 1.5em 0 0.5em;
+  color: var(--accent-dark);
+}
+p,
+li {
+  color: var(--text);
+}
+a {
+  color: var(--accent);
+}
+.toc {
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 16px 24px;
+  margin: 24px 0;
+}
+.toc h3 {
+  margin: 0 0 12px;
+  border: none;
+}
+.toc ol {
+  margin: 0;
+  padding-left: 20px;
+}
+.toc a {
+  text-decoration: none;
+}
+.toc a:hover {
+  text-decoration: underline;
+}
+code,
+pre {
+  font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
+  font-size: 0.9em;
+  background: var(--code-bg);
+  border-radius: 4px;
+}
+code {
+  padding: 2px 6px;
+}
+pre {
+  padding: 12px 16px;
+  overflow-x: auto;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  line-height: 1.5;
+}
+table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 16px 0;
+  font-size: 0.95em;
+}
+th,
+td {
+  text-align: left;
+  padding: 8px 12px;
+  border: 1px solid var(--border);
+}
+th {
+  background: var(--accent);
+  color: #fff;
+  font-weight: 600;
+}
+tr:nth-child(even) {
+  background: #fff;
+}
+.card {
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 16px 20px;
+  margin: 16px 0;
+}
+.card-title {
+  font-weight: 700;
+  font-size: 1rem;
+  margin-bottom: 8px;
+  color: var(--accent-dark);
+}
+.tag {
+  display: inline-block;
+  padding: 2px 10px;
+  border-radius: 999px;
+  font-size: 0.78rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+.tag-blue {
+  background: #e8f3ff;
+  color: #0a4f9c;
+}
+.tag-green {
+  background: #e3f9e5;
+  color: #1a7d36;
+}
+.tag-orange {
+  background: #fff3e0;
+  color: #b85c00;
+}
+blockquote {
+  border-left: 4px solid var(--accent);
+  margin: 16px 0;
+  padding: 8px 16px;
+  background: #f0f7ff;
+  border-radius: 0 var(--radius) var(--radius) 0;
+}
+blockquote p {
+  margin: 4px 0;
+}
+hr {
+  border: none;
+  border-top: 1px solid var(--border);
+  margin: 32px 0;
+}
+.faq-q {
+  font-weight: 700;
+  color: var(--accent-dark);
+  margin: 20px 0 4px;
+}
+.faq-a {
+  margin: 0 0 8px;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --text: #e8ecf0;
+    --text-secondary: #9aabbe;
+    --border: #3a4a5a;
+    --bg: #1a2330;
+    --card: #222d3d;
+    --code-bg: #1e2835;
+  }
+  a {
+    color: #5cb8ff;
+  }
+  th {
+    color: #fff;
+  }
+  tr:nth-child(even) {
+    background: #1e2835;
+  }
+  blockquote {
+    background: #1a2740;
+  }
+  .tag-blue {
+    background: #1a3050;
+    color: #8cc8ff;
+  }
+  .tag-green {
+    background: #1a3a25;
+    color: #6fda7a;
+  }
+  .tag-orange {
+    background: #3a2a10;
+    color: #ffb74d;
+  }
+}
diff --git a/styles/modal-and-rules.css b/styles/modal-and-rules.css
new file mode 100644
index 0000000..cd1ed85
--- /dev/null
+++ b/styles/modal-and-rules.css
@@ -0,0 +1,441 @@
+.modal {
+  display: block;
+  position: fixed;
+  z-index: 1000;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: #0008;
+  overflow: auto;
+}
+.modal-content {
+  background: #fff;
+  margin: 10% auto;
+  padding: 20px;
+  border-radius: 8px;
+  width: min(92vw, 640px);
+  max-height: 80vh;
+  overflow: auto;
+  box-sizing: border-box;
+}
+.popup-body .modal-content {
+  margin: 6% auto;
+}
+
+#override-modal {
+  overflow: hidden;
+}
+
+.modal-content--override {
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - 24px);
+  height: calc(100dvh - 24px);
+  max-height: 560px;
+  min-height: 0;
+  margin: 12px auto;
+  padding: 0;
+  overflow: hidden;
+}
+
+.popup-body .modal-content--override {
+  margin: 12px auto;
+}
+
+.modal-header {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 16px 20px;
+  border-bottom: 1px solid #dbe5ef;
+  background: #fff;
+}
+
+.modal-header .modal-title {
+  flex: 1 1 auto;
+  min-width: 0;
+  margin: 0;
+  text-align: left;
+}
+
+.modal-header #modal-url {
+  text-align: left;
+}
+
+.modal-header .modal-close {
+  flex: 0 0 auto;
+  width: 32px;
+  height: 32px;
+  margin: -4px -8px 0 0;
+  padding: 0;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  box-shadow: none;
+  line-height: 1;
+}
+
+.modal-header .modal-close:hover {
+  color: #1b2b3a;
+  background: #eef4fa;
+}
+
+.modal-scroll-body {
+  flex: 1 1 auto;
+  min-height: 0;
+  padding: 16px 20px;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+.modal-footer {
+  flex: 0 0 auto;
+  padding: 12px 20px 16px;
+  border-top: 1px solid #dbe5ef;
+  background: #fff;
+}
+
+.modal-feedback {
+  display: none;
+  margin-bottom: 10px;
+  padding: 8px 10px;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  font-size: 0.84rem;
+  line-height: 1.35;
+}
+
+.modal-feedback.is-error {
+  display: block;
+  color: #9f1239;
+  border-color: #fecdd3;
+  background: #fff1f2;
+}
+
+.modal-feedback.is-info {
+  display: block;
+  color: #1d4f7a;
+  border-color: #bfdbfe;
+  background: #eff6ff;
+}
+
+.modal-scroll-body [aria-invalid='true'] {
+  border-color: #e11d48;
+  box-shadow: 0 0 0 2px rgba(225, 29, 72, 0.12);
+}
+.close {
+  color: #aaa;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+  cursor: pointer;
+}
+.modal-title {
+  margin: 0 36px 10px 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  text-align: center;
+}
+#modal-url {
+  display: block;
+  font-size: 0.9rem;
+  font-weight: 400;
+  color: #4b6278;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  text-align: center;
+}
+.modal-field {
+  display: block;
+  margin: 0 0 12px;
+}
+.override-type-selector {
+  display: flex;
+  gap: 0;
+  border: 1px solid #c9d7e6;
+  border-radius: 6px;
+  overflow: hidden;
+  margin-bottom: 12px;
+  flex-wrap: wrap;
+}
+.type-radio {
+  flex: 1 1 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 8px 12px;
+  cursor: pointer;
+  font-size: 0.88rem;
+  color: #55708a;
+  background: #f8fbff;
+  transition:
+    background 0.15s,
+    color 0.15s;
+  border-right: 1px solid #c9d7e6;
+  white-space: nowrap;
+}
+.type-radio:last-child {
+  border-right: none;
+}
+.type-radio {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 8px 12px;
+  cursor: pointer;
+  font-size: 0.88rem;
+  color: #55708a;
+  background: #f8fbff;
+  transition:
+    background 0.15s,
+    color 0.15s;
+  border-right: 1px solid #c9d7e6;
+}
+.type-radio:last-child {
+  border-right: none;
+}
+.type-radio input {
+  accent-color: #0a84ff;
+}
+.type-radio:has(input:checked) {
+  background: #e8f3ff;
+  color: #0a4f9c;
+  font-weight: 600;
+}
+.type-radio:hover {
+  background: #eef4fa;
+}
+.modal-field span {
+  display: block;
+  margin-bottom: 6px;
+  font-size: 0.92rem;
+  color: #334e68;
+  font-weight: 600;
+}
+#modal-pattern,
+#modal-mode,
+#modal-body,
+#modal-redirect-url {
+  width: 100%;
+  box-sizing: border-box;
+}
+#modal-pattern,
+#modal-mode,
+#modal-redirect-url {
+  padding: 8px;
+}
+#modal-mode {
+  margin-bottom: 12px;
+}
+#modal-body {
+  display: block;
+}
+.modal-action-btn {
+  display: inline-block;
+  margin-top: 8px;
+  padding: 6px 14px;
+  border: 1px solid #c9d7e6;
+  border-radius: 6px;
+  background: #f8fbff;
+  color: #35506b;
+  font-size: 0.85rem;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+.modal-action-btn:hover {
+  background: #eef4fa;
+}
+.modal-body-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin-top: 8px;
+  gap: 8px;
+}
+.body-format-btn {
+  margin-top: 0;
+}
+#save-override {
+  display: block;
+  width: 100%;
+  margin-top: 14px;
+  padding: 10px 14px;
+  border: none;
+  border-radius: 10px;
+  background: linear-gradient(135deg, #0a84ff, #0066d6);
+  color: #fff;
+  font-weight: 700;
+  font-size: 0.95rem;
+  letter-spacing: 0.01em;
+  cursor: pointer;
+  box-shadow: 0 8px 18px rgba(10, 132, 255, 0.25);
+  transition:
+    transform 0.12s ease,
+    box-shadow 0.12s ease,
+    filter 0.12s ease;
+}
+.modal-footer #save-override {
+  margin-top: 0;
+}
+.modal-footer #save-override:disabled {
+  cursor: wait;
+  opacity: 0.7;
+}
+#save-override:hover {
+  filter: brightness(1.03);
+  box-shadow: 0 10px 22px rgba(10, 132, 255, 0.3);
+}
+#save-override:active {
+  transform: translateY(1px);
+  box-shadow: 0 6px 14px rgba(10, 132, 255, 0.22);
+}
+#save-override:focus-visible {
+  outline: 2px solid #8cc8ff;
+  outline-offset: 2px;
+}
+.api-bucket {
+  margin-bottom: 20px;
+}
+.api-bucket-toggle {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0;
+  background: none;
+  border: none;
+  margin: 12px 0 10px;
+  cursor: pointer;
+  text-align: left;
+}
+.api-bucket-toggle {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  padding: 8px 0;
+  background: #fff;
+}
+.api-bucket-title {
+  font-size: 1rem;
+  color: #1b2b3a;
+  font-weight: 700;
+}
+.api-bucket-meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.api-bucket-chevron {
+  width: 22px;
+  height: 22px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  background: #eef4fa;
+  position: relative;
+}
+.api-bucket-chevron::before {
+  content: '';
+  width: 8px;
+  height: 8px;
+  border-right: 2px solid #35506b;
+  border-bottom: 2px solid #35506b;
+  transform: rotate(45deg) translateY(-1px);
+  transition: transform 0.15s ease;
+}
+.api-bucket-chevron.collapsed::before {
+  transform: rotate(-45deg) translateY(1px);
+}
+.api-count {
+  display: inline-block;
+  min-width: 20px;
+  padding: 2px 8px;
+  border-radius: 999px;
+  background: #e8f3ff;
+  color: #0a4f9c;
+  font-size: 0.82rem;
+  font-weight: 600;
+  text-align: center;
+}
+.api-search-row {
+  display: flex;
+  gap: 6px;
+  align-items: stretch;
+  margin-bottom: 8px;
+}
+.api-search-row input[type='search'] {
+  flex: 1;
+  margin-bottom: 0;
+}
+.add-api-btn {
+  width: 34px;
+  flex-shrink: 0;
+  border: 1px dashed #0a84ff;
+  border-radius: 6px;
+  background: #f0f7ff;
+  color: #0a84ff;
+  font-weight: 700;
+  font-size: 1.2rem;
+  line-height: 1;
+  cursor: pointer;
+  transition: background 0.15s;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.add-api-btn:hover {
+  background: #dcecff;
+}
+.api-status {
+  display: inline-block;
+  padding: 0 4px;
+  border-radius: 3px;
+  font-size: 0.72rem;
+  font-weight: 700;
+  line-height: 1.4;
+  background: #e8f3ff;
+  color: #0a4f9c;
+  vertical-align: middle;
+  margin-left: 3px;
+}
+.api-item.active .api-status {
+  background: #c8dfff;
+}
+.api-item.active .api-status {
+  background: #c8dfff;
+}
+.api-item--rule-disabled {
+  opacity: 0.55;
+}
+.api-empty-state {
+  padding: 12px;
+  border: 1px dashed #c9d7e6;
+  border-radius: 8px;
+  background: #f8fbff;
+  color: #55708a;
+  font-size: 0.92rem;
+}
+.api-section {
+  margin-bottom: 16px;
+}
+.api-section h4 {
+  margin: 0 0 8px 0;
+  font-size: 1em;
+  color: #333;
+  border-bottom: 1px solid #eee;
+  padding-bottom: 4px;
+}
+.type-chevron {
+  display: inline-block;
+  width: 16px;
+  font-size: 0.75em;
+  color: #888;
+  transition: transform 0.15s ease;
+}
diff --git a/styles/primitives.css b/styles/primitives.css
new file mode 100644
index 0000000..59a7b7b
--- /dev/null
+++ b/styles/primitives.css
@@ -0,0 +1,352 @@
+/* Shared UI primitives. Static markup is upgraded in ui/primitives.ts and
+   dynamically-created controls use the same factories. */
+.ui-field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin: 0 0 12px;
+  min-width: 0;
+}
+
+.ui-label {
+  display: block;
+  margin: 0;
+  color: var(--ui-color-text);
+  font-size: 0.84rem;
+  font-weight: 600;
+  line-height: 1.35;
+}
+
+.ui-control {
+  width: 100%;
+  min-width: 0;
+  min-height: var(--ui-control-height);
+  padding: 7px 10px;
+  border: 1px solid var(--ui-color-border);
+  border-radius: var(--ui-radius);
+  outline: none;
+  background: var(--ui-color-surface);
+  color: var(--ui-color-text);
+  font: inherit;
+  font-size: 0.86rem;
+  line-height: 1.35;
+  transition:
+    border-color 0.15s ease,
+    box-shadow 0.15s ease,
+    background-color 0.15s ease;
+}
+
+textarea.ui-control {
+  min-height: 76px;
+  resize: vertical;
+}
+
+select.ui-control {
+  cursor: pointer;
+}
+
+.ui-control::placeholder {
+  color: #8ca0b3;
+  opacity: 1;
+}
+
+.ui-control:hover:not(:disabled) {
+  border-color: var(--ui-color-border-strong);
+}
+
+.ui-control:focus-visible {
+  border-color: var(--ui-color-primary);
+  box-shadow: var(--ui-focus-ring);
+}
+
+.ui-control:disabled,
+.ui-control[readonly] {
+  cursor: not-allowed;
+  background: #edf2f7;
+  color: var(--ui-color-muted);
+}
+
+.ui-control--file {
+  padding: 5px 8px;
+}
+
+.ui-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  min-height: var(--ui-control-height);
+  padding: 6px 12px;
+  border: 1px solid transparent;
+  border-radius: var(--ui-radius);
+  cursor: pointer;
+  font: inherit;
+  font-size: 0.84rem;
+  font-weight: 600;
+  line-height: 1.2;
+  white-space: nowrap;
+  transition:
+    background-color 0.15s ease,
+    border-color 0.15s ease,
+    color 0.15s ease,
+    box-shadow 0.15s ease,
+    opacity 0.15s ease;
+}
+
+.ui-btn:focus-visible {
+  outline: none;
+  box-shadow: var(--ui-focus-ring);
+}
+
+.ui-btn:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.ui-btn--small {
+  min-height: var(--ui-control-height-small);
+  padding: 4px 8px;
+  font-size: 0.78rem;
+}
+
+.ui-btn--primary {
+  border-color: var(--ui-color-primary);
+  background: var(--ui-color-primary);
+  color: #fff;
+}
+
+.ui-btn--primary:hover:not(:disabled) {
+  border-color: var(--ui-color-primary-hover);
+  background: var(--ui-color-primary-hover);
+}
+
+.ui-btn--secondary {
+  border-color: var(--ui-color-border);
+  background: var(--ui-color-surface-subtle);
+  color: var(--ui-color-text);
+}
+
+.ui-btn--secondary:hover:not(:disabled),
+.ui-btn--ghost:hover:not(:disabled) {
+  border-color: var(--ui-color-border-strong);
+  background: #eaf1f7;
+}
+
+.ui-btn--ghost {
+  border-color: transparent;
+  background: transparent;
+  color: #35506b;
+}
+
+.ui-btn--outline {
+  border-color: var(--ui-color-primary);
+  background: var(--ui-color-surface);
+  color: var(--ui-color-primary);
+}
+
+.ui-btn--outline:hover:not(:disabled) {
+  background: var(--ui-color-primary-soft);
+}
+
+.ui-btn--danger {
+  border-color: #fecdd3;
+  background: var(--ui-color-danger-soft);
+  color: var(--ui-color-danger);
+}
+
+.ui-btn--danger:hover:not(:disabled) {
+  border-color: #fda4af;
+  background: #ffe4e6;
+}
+
+.ui-btn.header-btn {
+  min-width: var(--ui-control-height-small);
+  padding: 0;
+}
+
+.notification-region {
+  position: fixed;
+  z-index: 2000;
+  top: 12px;
+  right: 12px;
+  display: flex;
+  width: min(360px, calc(100vw - 24px));
+  flex-direction: column;
+  gap: 8px;
+  pointer-events: none;
+}
+
+.notification-toast {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 10px 10px 10px 12px;
+  border: 1px solid #c9d7e6;
+  border-left-width: 4px;
+  border-radius: 8px;
+  background: #fff;
+  color: #263d52;
+  box-shadow: 0 10px 28px rgba(31, 55, 78, 0.18);
+  font-size: 0.84rem;
+  line-height: 1.4;
+  pointer-events: auto;
+}
+
+.notification-toast--success {
+  border-left-color: #15803d;
+  background: #f0fdf4;
+}
+
+.notification-toast--warning {
+  border-left-color: #d97706;
+  background: #fffbeb;
+}
+
+.notification-toast--error {
+  border-left-color: #e11d48;
+  background: #fff1f2;
+}
+
+.notification-toast--info {
+  border-left-color: #0a66c2;
+  background: #eff6ff;
+}
+
+.notification-toast__message {
+  flex: 1 1 auto;
+  overflow-wrap: anywhere;
+}
+
+.notification-toast__action {
+  flex: 0 0 auto;
+  min-height: 26px;
+  padding: 3px 8px;
+  border: 1px solid currentColor;
+  border-radius: 5px;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  font-weight: 600;
+}
+
+.notification-toast__action:disabled {
+  cursor: wait;
+  opacity: 0.6;
+}
+
+.notification-toast__close {
+  flex: 0 0 auto;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border: 0;
+  border-radius: 5px;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  font-size: 18px;
+  line-height: 1;
+}
+
+.notification-toast__close:hover {
+  background: rgba(51, 78, 104, 0.1);
+}
+
+.ui-dialog-backdrop {
+  position: fixed;
+  z-index: 2200;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+  background: rgba(15, 35, 55, 0.45);
+}
+
+.ui-dialog {
+  display: flex;
+  width: min(360px, 100%);
+  max-height: calc(100dvh - 32px);
+  flex-direction: column;
+  gap: 12px;
+  padding: 16px;
+  overflow: auto;
+  border: 1px solid var(--ui-color-border);
+  border-radius: 10px;
+  background: var(--ui-color-surface);
+  box-shadow: 0 18px 45px rgba(15, 35, 55, 0.28);
+}
+
+.ui-dialog__title,
+.ui-dialog__message {
+  margin: 0;
+}
+
+.ui-dialog__title {
+  color: var(--ui-color-text);
+  font-size: 1rem;
+}
+
+.ui-dialog__message {
+  color: var(--ui-color-muted);
+  line-height: 1.45;
+  white-space: pre-line;
+}
+
+.ui-dialog__actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.ui-btn.tab-btn {
+  min-height: 0;
+  border: 0;
+  border-bottom: 2px solid transparent;
+  border-radius: 0;
+  background: transparent;
+  font-weight: 500;
+}
+
+.ui-btn.tab-btn.active {
+  border-bottom-color: var(--ui-color-primary);
+  background: transparent;
+  color: var(--ui-color-primary);
+  font-weight: 600;
+}
+
+.ui-btn.add-api-btn {
+  padding: 0;
+}
+
+input[type='checkbox'],
+input[type='radio'] {
+  accent-color: var(--ui-color-primary);
+}
+
+.headers-editor-mode {
+  border-color: var(--ui-color-border);
+  background: var(--ui-color-surface-subtle);
+}
+
+.headers-editor-mode .ui-btn {
+  min-height: 24px;
+  color: var(--ui-color-muted);
+}
+
+.headers-editor-mode .ui-btn.active {
+  background: var(--ui-color-primary-soft);
+  color: var(--ui-color-primary);
+}
+
+.header-row-key,
+.header-row-value {
+  background: var(--ui-color-surface);
+  color: var(--ui-color-text);
+}
+
+.curl-swagger-file-row {
+  color: var(--ui-color-muted);
+}
diff --git a/tests/background-advanced.test.mjs b/tests/background-advanced.test.mjs
new file mode 100644
index 0000000..4a13cce
--- /dev/null
+++ b/tests/background-advanced.test.mjs
@@ -0,0 +1,419 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import { createBackgroundContext, normalize } from './test-harness.mjs';
+import { createBackgroundHarness } from './background-test-harness.mjs';
+import { TEST_DOMAIN, TEST_API_URL, TEST_DOWNLOAD_URL } from './config.mjs';
+
+test('Background fails matching requests with the configured error reason', async () => {
+  const harness = createBackgroundHarness();
+
+  harness.callMessage({
+    type: 'update',
+    tabId: 7,
+    tabUrl: `${TEST_DOMAIN}/`,
+    enabled: true,
+    overrides: [{ pattern: '/users$/', body: '', mode: 'text', failReason: 'ConnectionRefused' }],
+  });
+  await new Promise(resolve => setTimeout(resolve, 0));
+
+  harness.emitDebuggerEvent('Fetch.requestPaused', {
+    requestId: 'req-fail',
+    request: { url: TEST_API_URL, method: 'GET' },
+    resourceType: 'Fetch',
+  });
+
+  const failCmd = harness.commandLog.find(
+    ({ method, params }) => method === 'Fetch.failRequest' && params.requestId === 'req-fail'
+  );
+  assert.ok(failCmd);
+  assert.equal(failCmd.params.errorReason, 'ConnectionRefused');
+  assert.equal(
+    harness.commandLog.some(
+      ({ method, params }) =>
+        (method === 'Fetch.continueRequest' || method === 'Fetch.fulfillRequest') &&
+        params.requestId === 'req-fail'
+    ),
+    false
+  );
+});
+
+test('Background delays a fail rule before failing the request', async () => {
+  const harness = createBackgroundHarness();
+
+  harness.callMessage({
+    type: 'update',
+    tabId: 7,
+    tabUrl: `${TEST_DOMAIN}/`,
+    enabled: true,
+    overrides: [
+      { pattern: '/users$/', body: '', mode: 'text', failReason: 'TimedOut', delayMs: 30 },
+    ],
+  });
+  await new Promise(resolve => setTimeout(resolve, 0));
+
+  harness.emitDebuggerEvent('Fetch.requestPaused', {
+    requestId: 'req-fail-delayed',
+    request: { url: TEST_API_URL },
+    resourceType: 'Fetch',
+  });
+
+  const findFail = () =>
+    harness.commandLog.find(
+      ({ method, params }) =>
+        method === 'Fetch.failRequest' && params.requestId === 'req-fail-delayed'
+    );
+  assert.equal(findFail(), undefined); // not yet — the delay is pending
+  await new Promise(resolve => setTimeout(resolve, 60));
+  assert.ok(findFail());
+  assert.equal(findFail().params.errorReason, 'TimedOut');
+});
+
+test('Background fulfills with the rule statusCode instead of the original status', async () => {
+  const harness = createBackgroundHarness();
+
+  harness.callMessage({
+    type: 'update',
+    tabId: 7,
+    tabUrl: `${TEST_DOMAIN}/`,
+    enabled: true,
+    overrides: [{ pattern: '/users$/', body: '{"m":1}', mode: 'text', statusCode: 503 }],
+  });
+  await new Promise(resolve => setTimeout(resolve, 0));
+
+  harness.emitDebuggerEvent('Fetch.requestPaused', {
+    requestId: 'req-status',
+    request: { url: TEST_API_URL },
+    responseStatusCode: 200,
+    resourceType: 'Fetch',
+  });
+
+  const fulfill = harness.commandLog.find(
+    ({ method, params }) => method === 'Fetch.fulfillRequest' && params.requestId === 'req-status'
+  );
+  assert.ok(fulfill);
+  assert.equal(fulfill.params.responseCode, 503);
+});
+
+test('Background merges rule responseHeaders over the originals and keeps the markers', async () => {
+  const harness = createBackgroundHarness();
+
+  harness.callMessage({
+    type: 'update',
+    tabId: 7,
+    tabUrl: `${TEST_DOMAIN}/`,
+    enabled: true,
+    overrides: [
+      {
+        pattern: '/users$/',
+        body: '{"m":1}',
+        mode: 'text',
+        responseHeaders: [
+          { name: 'content-type', value: 'text/plain' }, // overwrites, case-insensitive
+          { name: 'X-Custom', value: 'yes' }, // appends
+        ],
+      },
+    ],
+  });
+  await new Promise(resolve => setTimeout(resolve, 0));
+
+  harness.emitDebuggerEvent('Fetch.requestPaused', {
+    requestId: 'req-headers',
+    request: { url: TEST_API_URL },
+    responseHeaders: [{ name: 'Content-Type', value: 'application/json' }],
+    responseStatusCode: 200,
+    resourceType: 'Fetch',
+  });
+
+  const fulfill = harness.commandLog.find(
+    ({ method, params }) => method === 'Fetch.fulfillRequest' && params.requestId === 'req-headers'
+  );
+  assert.ok(fulfill);
+  const headers = fulfill.params.responseHeaders;
+  const contentTypes = headers.filter(header => header.name.toLowerCase() === 'content-type');
+  assert.equal(contentTypes.length, 1); // overwritten, not duplicated
+  assert.equal(contentTypes[0].value, 'text/plain');
+  assert.equal(
+    headers.some(header => header.name === 'X-Custom' && header.value === 'yes'),
+    true
+  );
+  assert.equal(
+    headers.some(header => header.name === 'x-network-overrides' && header.value === 'true'),
+    true
+  );
+});
+
+test('Background skips rule headers that conflict with marker headers', async () => {
+  const harness = createBackgroundHarness();
+
+  harness.callMessage({
+    type: 'update',
+    tabId: 7,
+    tabUrl: `${TEST_DOMAIN}/`,
+    enabled: true,
+    overrides: [
+      {
+        pattern: '/users$/',
+        body: '{"m":1}',
+        mode: 'text',
+        responseHeaders: [
+          { name: 'X-Network-Overrides', value: 'false' },
+          { name: 'X-Network-Overrides-Pattern', value: 'should-be-skipped' },
+          { name: 'X-Custom', value: 'yes' },
+        ],
+      },
+    ],
+  });
+  await new Promise(resolve => setTimeout(resolve, 0));
+
+  harness.emitDebuggerEvent('Fetch.requestPaused', {
+    requestId: 'req-marker-conflict',
+    request: { url: TEST_API_URL },
+    responseStatusCode: 200,
+    resourceType: 'Fetch',
+  });
+
+  const fulfill = harness.commandLog.find(
+    ({ method, params }) =>
+      method === 'Fetch.fulfillRequest' && params.requestId === 'req-marker-conflict'
+  );
+  assert.ok(fulfill);
+  const headers = fulfill.params.responseHeaders;
+
+  // Count x-network-overrides headers (case-insensitive)
+  const markerHeaders = headers.filter(h => h.name.toLowerCase() === 'x-network-overrides');
+  assert.equal(markerHeaders.length, 1, 'Must have exactly one x-network-overrides header');
+  assert.equal(markerHeaders[0].value, 'true', 'Marker header must have value "true"');
+
+  // Pattern marker should also be unique
+  const patternMarkers = headers.filter(
+    h => h.name.toLowerCase() === 'x-network-overrides-pattern'
+  );
+  assert.equal(
+    patternMarkers.length,
+    1,
+    'Must have exactly one x-network-overrides-pattern header'
+  );
+  assert.equal(patternMarkers[0].value, '/users$/', 'Pattern marker must have the rule pattern');
+
+  // Custom header should pass through
+  assert.equal(
+    headers.some(header => header.name === 'X-Custom' && header.value === 'yes'),
+    true
+  );
+});
+
+test('Background delays fulfillment when the rule has delayMs', async () => {
+  const harness = createBackgroundHarness();
+
+  harness.callMessage({
+    type: 'update',
+    tabId: 7,
+    tabUrl: `${TEST_DOMAIN}/`,
+    enabled: true,
+    overrides: [{ pattern: '/users$/', body: '{"m":1}', mode: 'text', delayMs: 30 }],
+  });
+  await new Promise(resolve => setTimeout(resolve, 0));
+
+  harness.emitDebuggerEvent('Fetch.requestPaused', {
+    requestId: 'req-delayed',
+    request: { url: TEST_API_URL },
+    responseStatusCode: 200,
+    resourceType: 'Fetch',
+  });
+
+  const findFulfill = () =>
+    harness.commandLog.find(
+      ({ method, params }) =>
+        method === 'Fetch.fulfillRequest' && params.requestId === 'req-delayed'
+    );
+  assert.equal(findFulfill(), undefined); // still waiting
+  await new Promise(resolve => setTimeout(resolve, 60));
+  assert.ok(findFulfill());
+});
+
+test('Background overrides request headers at request stage when requestHeaders rule is present', async () => {
+  const harness = createBackgroundHarness();
+
+  harness.callMessage({
+    type: 'update',
+    tabId: 7,
+    tabUrl: `${TEST_DOMAIN}/`,
+    enabled: true,
+    overrides: [
+      {
+        pattern: '/users$/',
+        body: '',
+        mode: 'text',
+        requestHeaders: [{ name: 'Authorization', value: 'Bearer test-token' }],
+      },
+    ],
+  });
+  await new Promise(resolve => setTimeout(resolve, 0));
+
+  harness.emitDebuggerEvent('Fetch.requestPaused', {
+    requestId: 'req-headers-1',
+    request: { url: TEST_API_URL, method: 'GET', headers: { 'User-Agent': 'TestBrowser' } },
+    resourceType: 'Fetch',
+  });
+
+  const continueCmd = harness.commandLog.find(
+    ({ method, params }) =>
+      method === 'Fetch.continueRequest' && params.requestId === 'req-headers-1'
+  );
+  assert.ok(continueCmd, 'Must execute Fetch.continueRequest');
+  assert.ok(Array.isArray(continueCmd.params.headers), 'Headers parameter must be an array');
+  assert.equal(
+    continueCmd.params.headers.some(
+      h => h.name === 'authorization' && h.value === 'Bearer test-token'
+    ),
+    true,
+    'Authorization header must be injected'
+  );
+});
+
+test('Background handles updateCapturedBodyTypes message', async () => {
+  const harness = createBackgroundHarness();
+  let responded = false;
+  harness.listeners.onMessage(
+    { type: 'updateCapturedBodyTypes', types: ['document', 'script'] },
+    {},
+    () => {
+      responded = true;
+    }
+  );
+  assert.equal(responded, true);
+});
+
+test('Background processes response template tokens {{uuid}} and {{timestamp}}', async () => {
+  const harness = createBackgroundHarness();
+
+  harness.callMessage({
+    type: 'update',
+    tabId: 7,
+    tabUrl: `${TEST_DOMAIN}/`,
+    enabled: true,
+    overrides: [{ pattern: '/users$/', body: '{"id":"{{uuid}}"}', mode: 'text' }],
+  });
+  await new Promise(resolve => setTimeout(resolve, 0));
+
+  harness.emitDebuggerEvent('Fetch.requestPaused', {
+    requestId: 'req-template-1',
+    request: { url: TEST_API_URL },
+    responseStatusCode: 200,
+    resourceType: 'Fetch',
+  });
+
+  await new Promise(resolve => setTimeout(resolve, 20));
+
+  const fulfill = harness.commandLog.find(
+    ({ method, params }) =>
+      method === 'Fetch.fulfillRequest' && params.requestId === 'req-template-1'
+  );
+  assert.ok(fulfill, 'Must fulfill request');
+  const decoded = Buffer.from(fulfill.params.body, 'base64').toString('utf8');
+  assert.equal(decoded.includes('{{uuid}}'), false, 'Template token must be replaced');
+  assert.ok(/"id":"[a-f0-9-]{36}"/.test(decoded), 'UUID regex must match generated UUID');
+});
+
+test('Background filters GraphQL requests by operationName', async () => {
+  const harness = createBackgroundHarness();
+
+  harness.callMessage({
+    type: 'update',
+    tabId: 7,
+    tabUrl: `${TEST_DOMAIN}/`,
+    enabled: true,
+    overrides: [
+      {
+        pattern: '/graphql',
+        body: '{"data":{"user":{"name":"Mocked User"}}}',
+        mode: 'text',
+        graphqlOperation: 'GetUserProfile',
+      },
+    ],
+  });
+  await new Promise(resolve => setTimeout(resolve, 0));
+
+  // Request 1: Different operation -> should NOT match
+  harness.emitDebuggerEvent('Fetch.requestPaused', {
+    requestId: 'req-gql-1',
+    request: {
+      url: `${TEST_DOMAIN}/graphql`,
+      method: 'POST',
+      postData: '{"operationName":"GetOrders"}',
+    },
+    resourceType: 'Fetch',
+  });
+
+  const continueCmd = harness.commandLog.find(
+    ({ method, params }) => method === 'Fetch.continueRequest' && params.requestId === 'req-gql-1'
+  );
+  assert.ok(continueCmd, 'Different operation must pass through');
+
+  // Request 2: Matching operation -> MUST match
+  harness.emitDebuggerEvent('Fetch.requestPaused', {
+    requestId: 'req-gql-2',
+    request: {
+      url: `${TEST_DOMAIN}/graphql`,
+      method: 'POST',
+      postData: '{"operationName":"GetUserProfile"}',
+    },
+    resourceType: 'Fetch',
+  });
+
+  harness.emitDebuggerEvent('Fetch.requestPaused', {
+    requestId: 'req-gql-2',
+    request: {
+      url: `${TEST_DOMAIN}/graphql`,
+      method: 'POST',
+      postData: '{"operationName":"GetUserProfile"}',
+    },
+    responseStatusCode: 200,
+    resourceType: 'Fetch',
+  });
+  await new Promise(resolve => setTimeout(resolve, 20));
+
+  const fulfill = harness.commandLog.find(
+    ({ method, params }) => method === 'Fetch.fulfillRequest' && params.requestId === 'req-gql-2'
+  );
+  assert.ok(fulfill, 'Matching GraphQL operation must fulfill request');
+});
+test('Background enforces an imported disabled rule by not applying it: request passes through untouched', async () => {
+  const harness = createBackgroundHarness();
+  const domainOverridesKey = `overrides_${TEST_DOMAIN}`;
+
+  // Shape this exactly like ui.ts's import handler now persists rules: only the
+  // known OverrideRule fields, written under the domain-scoped storage key.
+  harness.storageState[domainOverridesKey] = [
+    { pattern: '/users$/', body: '{"shouldNotApply":true}', mode: 'text', enabled: false },
+  ];
+
+  harness.callMessage({
+    type: 'update',
+    tabId: 7,
+    tabUrl: `${TEST_DOMAIN}/`,
+    enabled: true,
+    overrides: harness.storageState[domainOverridesKey],
+  });
+  await new Promise(resolve => setTimeout(resolve, 0));
+
+  harness.emitDebuggerEvent('Fetch.requestPaused', {
+    requestId: 'req-disabled-only',
+    request: { url: TEST_API_URL, method: 'GET' },
+    responseStatusCode: 200,
+    resourceType: 'Fetch',
+  });
+
+  const fulfill = harness.commandLog.find(
+    ({ method, params }) =>
+      method === 'Fetch.fulfillRequest' && params.requestId === 'req-disabled-only'
+  );
+  assert.equal(fulfill, undefined);
+
+  const continueCmd = harness.commandLog.find(
+    ({ method, params }) =>
+      method === 'Fetch.continueRequest' && params.requestId === 'req-disabled-only'
+  );
+  assert.ok(continueCmd);
+  assert.equal(continueCmd.params.body, undefined);
+});
diff --git a/tests/background-flow.test.mjs b/tests/background-flow.test.mjs
index edcbce4..16c01f6 100644
--- a/tests/background-flow.test.mjs
+++ b/tests/background-flow.test.mjs
@@ -1,12 +1,13 @@
 import test from 'node:test';
 import assert from 'node:assert/strict';
-import { createBackgroundHarness, createBackgroundContext, normalize } from './test-harness.mjs';
+import { createBackgroundContext, normalize } from './test-harness.mjs';
+import { createBackgroundHarness } from './background-test-harness.mjs';
 import { TEST_DOMAIN, TEST_API_URL, TEST_DOWNLOAD_URL } from './config.mjs';
 
 test('Background handles update messages by attaching and detaching the debugger', async () => {
   const harness = createBackgroundHarness();
 
-  harness.callMessage({
+  const updateResult = harness.callMessage({
     type: 'update',
     tabId: 7,
     tabUrl: `${TEST_DOMAIN}/`,
@@ -15,6 +16,13 @@ test('Background handles update messages by attaching and detaching the debugger
   });
   await new Promise(resolve => setTimeout(resolve, 0));
 
+  assert.equal(updateResult.keepAlive, true);
+  assert.deepEqual(normalize(updateResult.response), {
+    type: 'updateResponse',
+    success: true,
+    attached: true,
+  });
+
   assert.deepEqual(normalize(harness.attachedTabs), [{ target: { tabId: 7 }, version: '1.3' }]);
   assert.deepEqual(
     normalize(harness.commandLog.slice(0, 2).map(({ method, params }) => ({ method, params }))),
@@ -456,725 +464,3 @@ test('Background skips disabled rules and method-mismatched rules, falling throu
 // rule, written to storage exactly as ui.ts's persistOverrides() would write it
 // (only known OverrideRule fields, disabled or method-restricted), with nothing
 // else to fall through to — the request must pass through completely untouched.
-test('Background enforces an imported disabled rule by not applying it: request passes through untouched', async () => {
-  const harness = createBackgroundHarness();
-  const domainOverridesKey = `overrides_${TEST_DOMAIN}`;
-
-  // Shape this exactly like ui.ts's import handler now persists rules: only the
-  // known OverrideRule fields, written under the domain-scoped storage key.
-  harness.storageState[domainOverridesKey] = [
-    { pattern: '/users$/', body: '{"shouldNotApply":true}', mode: 'text', enabled: false },
-  ];
-
-  harness.callMessage({
-    type: 'update',
-    tabId: 7,
-    tabUrl: `${TEST_DOMAIN}/`,
-    enabled: true,
-    overrides: harness.storageState[domainOverridesKey],
-  });
-  await new Promise(resolve => setTimeout(resolve, 0));
-
-  harness.emitDebuggerEvent('Fetch.requestPaused', {
-    requestId: 'req-disabled-only',
-    request: { url: TEST_API_URL, method: 'GET' },
-    responseStatusCode: 200,
-    resourceType: 'Fetch',
-  });
-
-  const fulfill = harness.commandLog.find(
-    ({ method, params }) =>
-      method === 'Fetch.fulfillRequest' && params.requestId === 'req-disabled-only'
-  );
-  assert.equal(fulfill, undefined);
-
-  const continueCmd = harness.commandLog.find(
-    ({ method, params }) =>
-      method === 'Fetch.continueRequest' && params.requestId === 'req-disabled-only'
-  );
-  assert.ok(continueCmd);
-  assert.equal(continueCmd.params.body, undefined);
-});
-
-test('Background rehydrates from storage.session and re-attaches enabled tabs on startup', async () => {
-  const harness = createBackgroundHarness({
-    existingTabIds: [7, 8],
-    sessionState: {
-      tabState_8: {
-        enabled: true,
-        origin: 'https://b.test',
-        overrides: [{ pattern: 'users', body: '{"mocked":true}', mode: 'text' }],
-        attached: true,
-        recentApis: {},
-        recentApiBodies: {},
-      },
-    },
-  });
-
-  await harness.context.NetworkOverridesBackground.ready;
-
-  assert.deepEqual(normalize(harness.attachedTabs), [{ target: { tabId: 8 }, version: '1.3' }]);
-  const state = harness.context.NetworkOverridesTabState.get(8);
-  assert.equal(state.attached, true);
-  assert.deepEqual(normalize(state.overrides), [
-    { pattern: 'users', body: '{"mocked":true}', mode: 'text' },
-  ]);
-});
-
-test('Background startup removes legacy recentApis_* keys from storage.local', async () => {
-  const harness = createBackgroundHarness({
-    storageState: {
-      recentApis_42: { 'https://x.test/a': { url: 'https://x.test/a', type: 'xhr' } },
-      recentApiBodies_42: { 'https://x.test/a': '{}' },
-      'overrides_https://x.test': [{ pattern: 'keep', body: '', mode: 'text' }],
-      enabled: true,
-    },
-  });
-
-  await harness.context.NetworkOverridesBackground.ready;
-
-  assert.equal(harness.storageState.recentApis_42, undefined);
-  assert.equal(harness.storageState.recentApiBodies_42, undefined);
-  assert.deepEqual(normalize(harness.storageState['overrides_https://x.test']), [
-    { pattern: 'keep', body: '', mode: 'text' },
-  ]);
-  assert.equal(harness.storageState.enabled, true);
-});
-
-test('Navigating to a new origin loads that origin saved rules and clears captured APIs', async () => {
-  const harness = createBackgroundHarness({
-    storageState: {
-      'overrides_https://new.test': [{ pattern: 'orders', body: '{"new":true}', mode: 'text' }],
-    },
-  });
-  await harness.context.NetworkOverridesBackground.ready;
-
-  harness.callMessage({
-    type: 'update',
-    tabId: 7,
-    tabUrl: 'https://old.test/',
-    enabled: true,
-    overrides: [{ pattern: 'users', body: '{"old":true}', mode: 'text' }],
-  });
-  await new Promise(resolve => setTimeout(resolve, 0));
-  harness.emitDebuggerEvent('Network.requestWillBeSent', {
-    request: { url: 'https://old.test/api/users' },
-    type: 'Fetch',
-  });
-
-  harness.navigateTab(7, 'https://new.test/home');
-  await new Promise(resolve => setTimeout(resolve, 0));
-
-  const state = harness.context.NetworkOverridesTabState.get(7);
-  assert.equal(state.origin, 'https://new.test');
-  assert.deepEqual(normalize(state.overrides), [
-    { pattern: 'orders', body: '{"new":true}', mode: 'text' },
-  ]);
-  assert.equal(state.recentApis.size, 0);
-});
-
-test('Same-origin navigation leaves rules and captured APIs untouched', async () => {
-  const harness = createBackgroundHarness();
-  await harness.context.NetworkOverridesBackground.ready;
-
-  harness.callMessage({
-    type: 'update',
-    tabId: 7,
-    tabUrl: 'https://old.test/',
-    enabled: true,
-    overrides: [{ pattern: 'users', body: '{}', mode: 'text' }],
-  });
-  await new Promise(resolve => setTimeout(resolve, 0));
-  harness.emitDebuggerEvent('Network.requestWillBeSent', {
-    request: { url: 'https://old.test/api/users' },
-    type: 'Fetch',
-  });
-
-  harness.navigateTab(7, 'https://old.test/other-page');
-  await new Promise(resolve => setTimeout(resolve, 0));
-
-  const state = harness.context.NetworkOverridesTabState.get(7);
-  assert.equal(state.overrides.length, 1);
-  assert.equal(state.recentApis.size, 1);
-});
-
-test('Cross-origin requests are captured', async () => {
-  const harness = createBackgroundHarness();
-  await harness.context.NetworkOverridesBackground.ready;
-
-  harness.callMessage({
-    type: 'update',
-    tabId: 7,
-    tabUrl: 'https://app.test/',
-    enabled: true,
-    overrides: [],
-  });
-  await new Promise(resolve => setTimeout(resolve, 0));
-
-  harness.emitDebuggerEvent('Network.requestWillBeSent', {
-    request: { url: 'https://api.other.test/v1/users' },
-    type: 'Fetch',
-  });
-
-  const { response } = harness.callMessage({ type: 'getApis', tabId: 7 });
-  assert.deepEqual(normalize(response.apis.map(api => api.url)), [
-    'https://api.other.test/v1/users',
-  ]);
-});
-
-test('Background enforces an imported method-restricted rule by not applying it: request passes through untouched', async () => {
-  const harness = createBackgroundHarness();
-  const domainOverridesKey = `overrides_${TEST_DOMAIN}`;
-
-  harness.storageState[domainOverridesKey] = [
-    { pattern: '/users$/', body: '{"shouldNotApply":true}', mode: 'text', method: 'POST' },
-  ];
-
-  harness.callMessage({
-    type: 'update',
-    tabId: 7,
-    tabUrl: `${TEST_DOMAIN}/`,
-    enabled: true,
-    overrides: harness.storageState[domainOverridesKey],
-  });
-  await new Promise(resolve => setTimeout(resolve, 0));
-
-  harness.emitDebuggerEvent('Fetch.requestPaused', {
-    requestId: 'req-method-only',
-    request: { url: TEST_API_URL, method: 'GET' },
-    responseStatusCode: 200,
-    resourceType: 'Fetch',
-  });
-
-  const fulfill = harness.commandLog.find(
-    ({ method, params }) =>
-      method === 'Fetch.fulfillRequest' && params.requestId === 'req-method-only'
-  );
-  assert.equal(fulfill, undefined);
-
-  const continueCmd = harness.commandLog.find(
-    ({ method, params }) =>
-      method === 'Fetch.continueRequest' && params.requestId === 'req-method-only'
-  );
-  assert.ok(continueCmd);
-});
-
-test('getStatus reports attach success and failure', async () => {
-  const harness = createBackgroundHarness();
-  await harness.context.NetworkOverridesBackground.ready;
-
-  harness.callMessage({
-    type: 'update',
-    tabId: 7,
-    tabUrl: 'https://a.test/',
-    enabled: true,
-    overrides: [],
-  });
-  await new Promise(resolve => setTimeout(resolve, 0));
-  let { response } = harness.callMessage({ type: 'getStatus', tabId: 7 });
-  assert.deepEqual(normalize(response), { type: 'statusResponse', attached: true });
-
-  const failing = createBackgroundHarness();
-  await failing.context.NetworkOverridesBackground.ready;
-  failing.setAttachError('Another debugger is already attached');
-  failing.callMessage({
-    type: 'update',
-    tabId: 7,
-    tabUrl: 'https://a.test/',
-    enabled: true,
-    overrides: [],
-  });
-  await new Promise(resolve => setTimeout(resolve, 0));
-  ({ response } = failing.callMessage({ type: 'getStatus', tabId: 7 }));
-  assert.deepEqual(normalize(response), {
-    type: 'statusResponse',
-    attached: false,
-    error: 'Another debugger is already attached',
-  });
-  assert.equal(failing.context.NetworkOverridesTabState.get(7).enabled, false);
-});
-
-test('Rehydrate adopts a debugger session that survived the worker restart', async () => {
-  // chrome.debugger sessions belong to the extension, not the worker instance:
-  // after an idle-kill the session is still attached, so the fresh attach fails
-  // with "already attached". The background must adopt that session instead of
-  // treating it as a failure and disabling the tab.
-  const harness = createBackgroundHarness({
-    existingTabIds: [7, 8],
-    preAttachedTabIds: [8],
-    sessionState: {
-      tabState_8: {
-        enabled: true,
-        origin: 'https://b.test',
-        overrides: [{ pattern: 'users', body: '{"mocked":true}', mode: 'text' }],
-        attached: true,
-        recentApis: {},
-        recentApiBodies: {},
-      },
-    },
-  });
-
-  await harness.context.NetworkOverridesBackground.ready;
-
-  const state = harness.context.NetworkOverridesTabState.get(8);
-  assert.equal(state.attached, true);
-  assert.equal(state.enabled, true);
-  assert.equal(state.attachError, undefined);
-  assert.equal(
-    harness.commandLog.some(
-      ({ target, method }) => target.tabId === 8 && method === 'Fetch.enable'
-    ),
-    true
-  );
-});
-
-test('External debugger detach disables interception but keeps captured data', async () => {
-  const harness = createBackgroundHarness();
-  await harness.context.NetworkOverridesBackground.ready;
-
-  harness.callMessage({
-    type: 'update',
-    tabId: 7,
-    tabUrl: `${TEST_DOMAIN}/`,
-    enabled: true,
-    overrides: [{ pattern: 'users', body: '{}', mode: 'text' }],
-  });
-  await new Promise(resolve => setTimeout(resolve, 0));
-  harness.emitDebuggerEvent('Network.requestWillBeSent', {
-    request: { url: TEST_API_URL },
-    type: 'Fetch',
-  });
-
-  // User clicks Cancel on the debugging infobar: the tab is still open, so the
-  // captured data and rules must survive — only interception stops.
-  harness.emitDetach(7, 'canceled_by_user');
-  await new Promise(resolve => setTimeout(resolve, 0));
-
-  const state = harness.context.NetworkOverridesTabState.get(7);
-  assert.ok(state, 'tab state must not be disposed');
-  assert.equal(state.attached, false);
-  assert.equal(state.enabled, false);
-  assert.equal(state.recentApis.size, 1);
-  assert.equal(state.overrides.length, 1);
-
-  // The persisted snapshot must survive too, with enabled off so a worker
-  // restart does not silently re-attach against the user's cancellation.
-  await harness.context.NetworkOverridesTabState.flushPersist(7);
-  const snapshot = harness.sessionState['tabState_7'];
-  assert.ok(snapshot);
-  assert.equal(snapshot.enabled, false);
-
-  const { response } = harness.callMessage({ type: 'getStatus', tabId: 7 });
-  assert.equal(response.attached, false);
-  assert.match(String(response.error), /detach/i);
-});
-
-test('getStatus during an in-flight attach waits for the outcome instead of answering stale state', async () => {
-  const harness = createBackgroundHarness();
-  await harness.context.NetworkOverridesBackground.ready;
-
-  harness.callMessage({
-    type: 'update',
-    tabId: 7,
-    tabUrl: 'https://a.test/',
-    enabled: true,
-    overrides: [],
-  });
-  // No timer flush: the attach callback has not run yet, so a naive getStatus
-  // would answer { attached: false } with no error.
-  let response;
-  const keepAlive = harness.listeners.onMessage({ type: 'getStatus', tabId: 7 }, {}, value => {
-    response = value;
-  });
-  assert.equal(keepAlive, true);
-  assert.equal(response, undefined); // must not answer before the attach settles
-  await new Promise(resolve => setTimeout(resolve, 0));
-  assert.deepEqual(normalize(response), { type: 'statusResponse', attached: true });
-});
-
-test('Concurrent update messages attach the debugger exactly once', async () => {
-  const harness = createBackgroundHarness();
-  await harness.context.NetworkOverridesBackground.ready;
-
-  const msg = { type: 'update', tabId: 7, tabUrl: 'https://a.test/', enabled: true, overrides: [] };
-  harness.callMessage(msg);
-  harness.callMessage(msg);
-  await new Promise(resolve => setTimeout(resolve, 0));
-
-  assert.equal(harness.attachedTabs.length, 1);
-});
-
-test('Background fails matching requests with the configured error reason', async () => {
-  const harness = createBackgroundHarness();
-
-  harness.callMessage({
-    type: 'update',
-    tabId: 7,
-    tabUrl: `${TEST_DOMAIN}/`,
-    enabled: true,
-    overrides: [{ pattern: '/users$/', body: '', mode: 'text', failReason: 'ConnectionRefused' }],
-  });
-  await new Promise(resolve => setTimeout(resolve, 0));
-
-  harness.emitDebuggerEvent('Fetch.requestPaused', {
-    requestId: 'req-fail',
-    request: { url: TEST_API_URL, method: 'GET' },
-    resourceType: 'Fetch',
-  });
-
-  const failCmd = harness.commandLog.find(
-    ({ method, params }) => method === 'Fetch.failRequest' && params.requestId === 'req-fail'
-  );
-  assert.ok(failCmd);
-  assert.equal(failCmd.params.errorReason, 'ConnectionRefused');
-  assert.equal(
-    harness.commandLog.some(
-      ({ method, params }) =>
-        (method === 'Fetch.continueRequest' || method === 'Fetch.fulfillRequest') &&
-        params.requestId === 'req-fail'
-    ),
-    false
-  );
-});
-
-test('Background delays a fail rule before failing the request', async () => {
-  const harness = createBackgroundHarness();
-
-  harness.callMessage({
-    type: 'update',
-    tabId: 7,
-    tabUrl: `${TEST_DOMAIN}/`,
-    enabled: true,
-    overrides: [
-      { pattern: '/users$/', body: '', mode: 'text', failReason: 'TimedOut', delayMs: 30 },
-    ],
-  });
-  await new Promise(resolve => setTimeout(resolve, 0));
-
-  harness.emitDebuggerEvent('Fetch.requestPaused', {
-    requestId: 'req-fail-delayed',
-    request: { url: TEST_API_URL },
-    resourceType: 'Fetch',
-  });
-
-  const findFail = () =>
-    harness.commandLog.find(
-      ({ method, params }) =>
-        method === 'Fetch.failRequest' && params.requestId === 'req-fail-delayed'
-    );
-  assert.equal(findFail(), undefined); // not yet — the delay is pending
-  await new Promise(resolve => setTimeout(resolve, 60));
-  assert.ok(findFail());
-  assert.equal(findFail().params.errorReason, 'TimedOut');
-});
-
-test('Background fulfills with the rule statusCode instead of the original status', async () => {
-  const harness = createBackgroundHarness();
-
-  harness.callMessage({
-    type: 'update',
-    tabId: 7,
-    tabUrl: `${TEST_DOMAIN}/`,
-    enabled: true,
-    overrides: [{ pattern: '/users$/', body: '{"m":1}', mode: 'text', statusCode: 503 }],
-  });
-  await new Promise(resolve => setTimeout(resolve, 0));
-
-  harness.emitDebuggerEvent('Fetch.requestPaused', {
-    requestId: 'req-status',
-    request: { url: TEST_API_URL },
-    responseStatusCode: 200,
-    resourceType: 'Fetch',
-  });
-
-  const fulfill = harness.commandLog.find(
-    ({ method, params }) => method === 'Fetch.fulfillRequest' && params.requestId === 'req-status'
-  );
-  assert.ok(fulfill);
-  assert.equal(fulfill.params.responseCode, 503);
-});
-
-test('Background merges rule responseHeaders over the originals and keeps the markers', async () => {
-  const harness = createBackgroundHarness();
-
-  harness.callMessage({
-    type: 'update',
-    tabId: 7,
-    tabUrl: `${TEST_DOMAIN}/`,
-    enabled: true,
-    overrides: [
-      {
-        pattern: '/users$/',
-        body: '{"m":1}',
-        mode: 'text',
-        responseHeaders: [
-          { name: 'content-type', value: 'text/plain' }, // overwrites, case-insensitive
-          { name: 'X-Custom', value: 'yes' }, // appends
-        ],
-      },
-    ],
-  });
-  await new Promise(resolve => setTimeout(resolve, 0));
-
-  harness.emitDebuggerEvent('Fetch.requestPaused', {
-    requestId: 'req-headers',
-    request: { url: TEST_API_URL },
-    responseHeaders: [{ name: 'Content-Type', value: 'application/json' }],
-    responseStatusCode: 200,
-    resourceType: 'Fetch',
-  });
-
-  const fulfill = harness.commandLog.find(
-    ({ method, params }) => method === 'Fetch.fulfillRequest' && params.requestId === 'req-headers'
-  );
-  assert.ok(fulfill);
-  const headers = fulfill.params.responseHeaders;
-  const contentTypes = headers.filter(header => header.name.toLowerCase() === 'content-type');
-  assert.equal(contentTypes.length, 1); // overwritten, not duplicated
-  assert.equal(contentTypes[0].value, 'text/plain');
-  assert.equal(
-    headers.some(header => header.name === 'X-Custom' && header.value === 'yes'),
-    true
-  );
-  assert.equal(
-    headers.some(header => header.name === 'x-network-overrides' && header.value === 'true'),
-    true
-  );
-});
-
-test('Background skips rule headers that conflict with marker headers', async () => {
-  const harness = createBackgroundHarness();
-
-  harness.callMessage({
-    type: 'update',
-    tabId: 7,
-    tabUrl: `${TEST_DOMAIN}/`,
-    enabled: true,
-    overrides: [
-      {
-        pattern: '/users$/',
-        body: '{"m":1}',
-        mode: 'text',
-        responseHeaders: [
-          { name: 'X-Network-Overrides', value: 'false' },
-          { name: 'X-Network-Overrides-Pattern', value: 'should-be-skipped' },
-          { name: 'X-Custom', value: 'yes' },
-        ],
-      },
-    ],
-  });
-  await new Promise(resolve => setTimeout(resolve, 0));
-
-  harness.emitDebuggerEvent('Fetch.requestPaused', {
-    requestId: 'req-marker-conflict',
-    request: { url: TEST_API_URL },
-    responseStatusCode: 200,
-    resourceType: 'Fetch',
-  });
-
-  const fulfill = harness.commandLog.find(
-    ({ method, params }) =>
-      method === 'Fetch.fulfillRequest' && params.requestId === 'req-marker-conflict'
-  );
-  assert.ok(fulfill);
-  const headers = fulfill.params.responseHeaders;
-
-  // Count x-network-overrides headers (case-insensitive)
-  const markerHeaders = headers.filter(h => h.name.toLowerCase() === 'x-network-overrides');
-  assert.equal(markerHeaders.length, 1, 'Must have exactly one x-network-overrides header');
-  assert.equal(markerHeaders[0].value, 'true', 'Marker header must have value "true"');
-
-  // Pattern marker should also be unique
-  const patternMarkers = headers.filter(
-    h => h.name.toLowerCase() === 'x-network-overrides-pattern'
-  );
-  assert.equal(
-    patternMarkers.length,
-    1,
-    'Must have exactly one x-network-overrides-pattern header'
-  );
-  assert.equal(patternMarkers[0].value, '/users$/', 'Pattern marker must have the rule pattern');
-
-  // Custom header should pass through
-  assert.equal(
-    headers.some(header => header.name === 'X-Custom' && header.value === 'yes'),
-    true
-  );
-});
-
-test('Background delays fulfillment when the rule has delayMs', async () => {
-  const harness = createBackgroundHarness();
-
-  harness.callMessage({
-    type: 'update',
-    tabId: 7,
-    tabUrl: `${TEST_DOMAIN}/`,
-    enabled: true,
-    overrides: [{ pattern: '/users$/', body: '{"m":1}', mode: 'text', delayMs: 30 }],
-  });
-  await new Promise(resolve => setTimeout(resolve, 0));
-
-  harness.emitDebuggerEvent('Fetch.requestPaused', {
-    requestId: 'req-delayed',
-    request: { url: TEST_API_URL },
-    responseStatusCode: 200,
-    resourceType: 'Fetch',
-  });
-
-  const findFulfill = () =>
-    harness.commandLog.find(
-      ({ method, params }) =>
-        method === 'Fetch.fulfillRequest' && params.requestId === 'req-delayed'
-    );
-  assert.equal(findFulfill(), undefined); // still waiting
-  await new Promise(resolve => setTimeout(resolve, 60));
-  assert.ok(findFulfill());
-});
-
-test('Background overrides request headers at request stage when requestHeaders rule is present', async () => {
-  const harness = createBackgroundHarness();
-
-  harness.callMessage({
-    type: 'update',
-    tabId: 7,
-    tabUrl: `${TEST_DOMAIN}/`,
-    enabled: true,
-    overrides: [
-      {
-        pattern: '/users$/',
-        body: '',
-        mode: 'text',
-        requestHeaders: [{ name: 'Authorization', value: 'Bearer test-token' }],
-      },
-    ],
-  });
-  await new Promise(resolve => setTimeout(resolve, 0));
-
-  harness.emitDebuggerEvent('Fetch.requestPaused', {
-    requestId: 'req-headers-1',
-    request: { url: TEST_API_URL, method: 'GET', headers: { 'User-Agent': 'TestBrowser' } },
-    resourceType: 'Fetch',
-  });
-
-  const continueCmd = harness.commandLog.find(
-    ({ method, params }) =>
-      method === 'Fetch.continueRequest' && params.requestId === 'req-headers-1'
-  );
-  assert.ok(continueCmd, 'Must execute Fetch.continueRequest');
-  assert.ok(Array.isArray(continueCmd.params.headers), 'Headers parameter must be an array');
-  assert.equal(
-    continueCmd.params.headers.some(
-      h => h.name === 'authorization' && h.value === 'Bearer test-token'
-    ),
-    true,
-    'Authorization header must be injected'
-  );
-});
-
-test('Background handles updateCapturedBodyTypes message', async () => {
-  const harness = createBackgroundHarness();
-  let responded = false;
-  harness.listeners.onMessage(
-    { type: 'updateCapturedBodyTypes', types: ['document', 'script'] },
-    {},
-    () => {
-      responded = true;
-    }
-  );
-  assert.equal(responded, true);
-});
-
-test('Background processes response template tokens {{uuid}} and {{timestamp}}', async () => {
-  const harness = createBackgroundHarness();
-
-  harness.callMessage({
-    type: 'update',
-    tabId: 7,
-    tabUrl: `${TEST_DOMAIN}/`,
-    enabled: true,
-    overrides: [{ pattern: '/users$/', body: '{"id":"{{uuid}}"}', mode: 'text' }],
-  });
-  await new Promise(resolve => setTimeout(resolve, 0));
-
-  harness.emitDebuggerEvent('Fetch.requestPaused', {
-    requestId: 'req-template-1',
-    request: { url: TEST_API_URL },
-    responseStatusCode: 200,
-    resourceType: 'Fetch',
-  });
-
-  await new Promise(resolve => setTimeout(resolve, 20));
-
-  const fulfill = harness.commandLog.find(
-    ({ method, params }) =>
-      method === 'Fetch.fulfillRequest' && params.requestId === 'req-template-1'
-  );
-  assert.ok(fulfill, 'Must fulfill request');
-  const decoded = Buffer.from(fulfill.params.body, 'base64').toString('utf8');
-  assert.equal(decoded.includes('{{uuid}}'), false, 'Template token must be replaced');
-  assert.ok(/"id":"[a-f0-9-]{36}"/.test(decoded), 'UUID regex must match generated UUID');
-});
-
-test('Background filters GraphQL requests by operationName', async () => {
-  const harness = createBackgroundHarness();
-
-  harness.callMessage({
-    type: 'update',
-    tabId: 7,
-    tabUrl: `${TEST_DOMAIN}/`,
-    enabled: true,
-    overrides: [
-      {
-        pattern: '/graphql',
-        body: '{"data":{"user":{"name":"Mocked User"}}}',
-        mode: 'text',
-        graphqlOperation: 'GetUserProfile',
-      },
-    ],
-  });
-  await new Promise(resolve => setTimeout(resolve, 0));
-
-  // Request 1: Different operation -> should NOT match
-  harness.emitDebuggerEvent('Fetch.requestPaused', {
-    requestId: 'req-gql-1',
-    request: {
-      url: `${TEST_DOMAIN}/graphql`,
-      method: 'POST',
-      postData: '{"operationName":"GetOrders"}',
-    },
-    resourceType: 'Fetch',
-  });
-
-  const continueCmd = harness.commandLog.find(
-    ({ method, params }) => method === 'Fetch.continueRequest' && params.requestId === 'req-gql-1'
-  );
-  assert.ok(continueCmd, 'Different operation must pass through');
-
-  // Request 2: Matching operation -> MUST match
-  harness.emitDebuggerEvent('Fetch.requestPaused', {
-    requestId: 'req-gql-2',
-    request: {
-      url: `${TEST_DOMAIN}/graphql`,
-      method: 'POST',
-      postData: '{"operationName":"GetUserProfile"}',
-    },
-    resourceType: 'Fetch',
-  });
-
-  harness.emitDebuggerEvent('Fetch.requestPaused', {
-    requestId: 'req-gql-2',
-    request: {
-      url: `${TEST_DOMAIN}/graphql`,
-      method: 'POST',
-      postData: '{"operationName":"GetUserProfile"}',
-    },
-    responseStatusCode: 200,
-    resourceType: 'Fetch',
-  });
-  await new Promise(resolve => setTimeout(resolve, 20));
-
-  const fulfill = harness.commandLog.find(
-    ({ method, params }) => method === 'Fetch.fulfillRequest' && params.requestId === 'req-gql-2'
-  );
-  assert.ok(fulfill, 'Matching GraphQL operation must fulfill request');
-});
diff --git a/tests/background-lifecycle.test.mjs b/tests/background-lifecycle.test.mjs
new file mode 100644
index 0000000..5edacc7
--- /dev/null
+++ b/tests/background-lifecycle.test.mjs
@@ -0,0 +1,319 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import { createBackgroundContext, normalize } from './test-harness.mjs';
+import { createBackgroundHarness } from './background-test-harness.mjs';
+import { TEST_DOMAIN, TEST_API_URL, TEST_DOWNLOAD_URL } from './config.mjs';
+
+test('Background rehydrates from storage.session and re-attaches enabled tabs on startup', async () => {
+  const harness = createBackgroundHarness({
+    existingTabIds: [7, 8],
+    sessionState: {
+      tabState_8: {
+        enabled: true,
+        origin: 'https://b.test',
+        overrides: [{ pattern: 'users', body: '{"mocked":true}', mode: 'text' }],
+        attached: true,
+        recentApis: {},
+        recentApiBodies: {},
+      },
+    },
+  });
+
+  await harness.context.NetworkOverridesBackground.ready;
+
+  assert.deepEqual(normalize(harness.attachedTabs), [{ target: { tabId: 8 }, version: '1.3' }]);
+  const state = harness.context.NetworkOverridesTabState.get(8);
+  assert.equal(state.attached, true);
+  assert.deepEqual(normalize(state.overrides), [
+    { pattern: 'users', body: '{"mocked":true}', mode: 'text' },
+  ]);
+});
+
+test('Background startup removes legacy recentApis_* keys from storage.local', async () => {
+  const harness = createBackgroundHarness({
+    storageState: {
+      recentApis_42: { 'https://x.test/a': { url: 'https://x.test/a', type: 'xhr' } },
+      recentApiBodies_42: { 'https://x.test/a': '{}' },
+      'overrides_https://x.test': [{ pattern: 'keep', body: '', mode: 'text' }],
+      enabled: true,
+    },
+  });
+
+  await harness.context.NetworkOverridesBackground.ready;
+
+  assert.equal(harness.storageState.recentApis_42, undefined);
+  assert.equal(harness.storageState.recentApiBodies_42, undefined);
+  assert.deepEqual(normalize(harness.storageState['overrides_https://x.test']), [
+    { pattern: 'keep', body: '', mode: 'text' },
+  ]);
+  assert.equal(harness.storageState.enabled, true);
+});
+
+test('Navigating to a new origin loads that origin saved rules and clears captured APIs', async () => {
+  const harness = createBackgroundHarness({
+    storageState: {
+      'overrides_https://new.test': [{ pattern: 'orders', body: '{"new":true}', mode: 'text' }],
+    },
+  });
+  await harness.context.NetworkOverridesBackground.ready;
+
+  harness.callMessage({
+    type: 'update',
+    tabId: 7,
+    tabUrl: 'https://old.test/',
+    enabled: true,
+    overrides: [{ pattern: 'users', body: '{"old":true}', mode: 'text' }],
+  });
+  await new Promise(resolve => setTimeout(resolve, 0));
+  harness.emitDebuggerEvent('Network.requestWillBeSent', {
+    request: { url: 'https://old.test/api/users' },
+    type: 'Fetch',
+  });
+
+  harness.navigateTab(7, 'https://new.test/home');
+  await new Promise(resolve => setTimeout(resolve, 0));
+
+  const state = harness.context.NetworkOverridesTabState.get(7);
+  assert.equal(state.origin, 'https://new.test');
+  assert.deepEqual(normalize(state.overrides), [
+    { pattern: 'orders', body: '{"new":true}', mode: 'text' },
+  ]);
+  assert.equal(state.recentApis.size, 0);
+});
+
+test('Same-origin navigation leaves rules and captured APIs untouched', async () => {
+  const harness = createBackgroundHarness();
+  await harness.context.NetworkOverridesBackground.ready;
+
+  harness.callMessage({
+    type: 'update',
+    tabId: 7,
+    tabUrl: 'https://old.test/',
+    enabled: true,
+    overrides: [{ pattern: 'users', body: '{}', mode: 'text' }],
+  });
+  await new Promise(resolve => setTimeout(resolve, 0));
+  harness.emitDebuggerEvent('Network.requestWillBeSent', {
+    request: { url: 'https://old.test/api/users' },
+    type: 'Fetch',
+  });
+
+  harness.navigateTab(7, 'https://old.test/other-page');
+  await new Promise(resolve => setTimeout(resolve, 0));
+
+  const state = harness.context.NetworkOverridesTabState.get(7);
+  assert.equal(state.overrides.length, 1);
+  assert.equal(state.recentApis.size, 1);
+});
+
+test('Cross-origin requests are captured', async () => {
+  const harness = createBackgroundHarness();
+  await harness.context.NetworkOverridesBackground.ready;
+
+  harness.callMessage({
+    type: 'update',
+    tabId: 7,
+    tabUrl: 'https://app.test/',
+    enabled: true,
+    overrides: [],
+  });
+  await new Promise(resolve => setTimeout(resolve, 0));
+
+  harness.emitDebuggerEvent('Network.requestWillBeSent', {
+    request: { url: 'https://api.other.test/v1/users' },
+    type: 'Fetch',
+  });
+
+  const { response } = harness.callMessage({ type: 'getApis', tabId: 7 });
+  assert.deepEqual(normalize(response.apis.map(api => api.url)), [
+    'https://api.other.test/v1/users',
+  ]);
+});
+
+test('Background enforces an imported method-restricted rule by not applying it: request passes through untouched', async () => {
+  const harness = createBackgroundHarness();
+  const domainOverridesKey = `overrides_${TEST_DOMAIN}`;
+
+  harness.storageState[domainOverridesKey] = [
+    { pattern: '/users$/', body: '{"shouldNotApply":true}', mode: 'text', method: 'POST' },
+  ];
+
+  harness.callMessage({
+    type: 'update',
+    tabId: 7,
+    tabUrl: `${TEST_DOMAIN}/`,
+    enabled: true,
+    overrides: harness.storageState[domainOverridesKey],
+  });
+  await new Promise(resolve => setTimeout(resolve, 0));
+
+  harness.emitDebuggerEvent('Fetch.requestPaused', {
+    requestId: 'req-method-only',
+    request: { url: TEST_API_URL, method: 'GET' },
+    responseStatusCode: 200,
+    resourceType: 'Fetch',
+  });
+
+  const fulfill = harness.commandLog.find(
+    ({ method, params }) =>
+      method === 'Fetch.fulfillRequest' && params.requestId === 'req-method-only'
+  );
+  assert.equal(fulfill, undefined);
+
+  const continueCmd = harness.commandLog.find(
+    ({ method, params }) =>
+      method === 'Fetch.continueRequest' && params.requestId === 'req-method-only'
+  );
+  assert.ok(continueCmd);
+});
+
+test('getStatus reports attach success and failure', async () => {
+  const harness = createBackgroundHarness();
+  await harness.context.NetworkOverridesBackground.ready;
+
+  harness.callMessage({
+    type: 'update',
+    tabId: 7,
+    tabUrl: 'https://a.test/',
+    enabled: true,
+    overrides: [],
+  });
+  await new Promise(resolve => setTimeout(resolve, 0));
+  let { response } = harness.callMessage({ type: 'getStatus', tabId: 7 });
+  assert.deepEqual(normalize(response), { type: 'statusResponse', attached: true });
+
+  const failing = createBackgroundHarness();
+  await failing.context.NetworkOverridesBackground.ready;
+  failing.setAttachError('Another debugger is already attached');
+  const failedUpdate = failing.callMessage({
+    type: 'update',
+    tabId: 7,
+    tabUrl: 'https://a.test/',
+    enabled: true,
+    overrides: [],
+  });
+  await new Promise(resolve => setTimeout(resolve, 0));
+  assert.deepEqual(normalize(failedUpdate.response), {
+    type: 'updateResponse',
+    success: false,
+    attached: false,
+    error: 'Another debugger is already attached',
+  });
+  ({ response } = failing.callMessage({ type: 'getStatus', tabId: 7 }));
+  assert.deepEqual(normalize(response), {
+    type: 'statusResponse',
+    attached: false,
+    error: 'Another debugger is already attached',
+  });
+  assert.equal(failing.context.NetworkOverridesTabState.get(7).enabled, false);
+});
+
+test('Rehydrate adopts a debugger session that survived the worker restart', async () => {
+  // chrome.debugger sessions belong to the extension, not the worker instance:
+  // after an idle-kill the session is still attached, so the fresh attach fails
+  // with "already attached". The background must adopt that session instead of
+  // treating it as a failure and disabling the tab.
+  const harness = createBackgroundHarness({
+    existingTabIds: [7, 8],
+    preAttachedTabIds: [8],
+    sessionState: {
+      tabState_8: {
+        enabled: true,
+        origin: 'https://b.test',
+        overrides: [{ pattern: 'users', body: '{"mocked":true}', mode: 'text' }],
+        attached: true,
+        recentApis: {},
+        recentApiBodies: {},
+      },
+    },
+  });
+
+  await harness.context.NetworkOverridesBackground.ready;
+
+  const state = harness.context.NetworkOverridesTabState.get(8);
+  assert.equal(state.attached, true);
+  assert.equal(state.enabled, true);
+  assert.equal(state.attachError, undefined);
+  assert.equal(
+    harness.commandLog.some(
+      ({ target, method }) => target.tabId === 8 && method === 'Fetch.enable'
+    ),
+    true
+  );
+});
+
+test('External debugger detach disables interception but keeps captured data', async () => {
+  const harness = createBackgroundHarness();
+  await harness.context.NetworkOverridesBackground.ready;
+
+  harness.callMessage({
+    type: 'update',
+    tabId: 7,
+    tabUrl: `${TEST_DOMAIN}/`,
+    enabled: true,
+    overrides: [{ pattern: 'users', body: '{}', mode: 'text' }],
+  });
+  await new Promise(resolve => setTimeout(resolve, 0));
+  harness.emitDebuggerEvent('Network.requestWillBeSent', {
+    request: { url: TEST_API_URL },
+    type: 'Fetch',
+  });
+
+  // User clicks Cancel on the debugging infobar: the tab is still open, so the
+  // captured data and rules must survive — only interception stops.
+  harness.emitDetach(7, 'canceled_by_user');
+  await new Promise(resolve => setTimeout(resolve, 0));
+
+  const state = harness.context.NetworkOverridesTabState.get(7);
+  assert.ok(state, 'tab state must not be disposed');
+  assert.equal(state.attached, false);
+  assert.equal(state.enabled, false);
+  assert.equal(state.recentApis.size, 1);
+  assert.equal(state.overrides.length, 1);
+
+  // The persisted snapshot must survive too, with enabled off so a worker
+  // restart does not silently re-attach against the user's cancellation.
+  await harness.context.NetworkOverridesTabState.flushPersist(7);
+  const snapshot = harness.sessionState['tabState_7'];
+  assert.ok(snapshot);
+  assert.equal(snapshot.enabled, false);
+
+  const { response } = harness.callMessage({ type: 'getStatus', tabId: 7 });
+  assert.equal(response.attached, false);
+  assert.match(String(response.error), /detach/i);
+});
+
+test('getStatus during an in-flight attach waits for the outcome instead of answering stale state', async () => {
+  const harness = createBackgroundHarness();
+  await harness.context.NetworkOverridesBackground.ready;
+
+  harness.callMessage({
+    type: 'update',
+    tabId: 7,
+    tabUrl: 'https://a.test/',
+    enabled: true,
+    overrides: [],
+  });
+  // No timer flush: the attach callback has not run yet, so a naive getStatus
+  // would answer { attached: false } with no error.
+  let response;
+  const keepAlive = harness.listeners.onMessage({ type: 'getStatus', tabId: 7 }, {}, value => {
+    response = value;
+  });
+  assert.equal(keepAlive, true);
+  assert.equal(response, undefined); // must not answer before the attach settles
+  await new Promise(resolve => setTimeout(resolve, 0));
+  assert.deepEqual(normalize(response), { type: 'statusResponse', attached: true });
+});
+
+test('Concurrent update messages attach the debugger exactly once', async () => {
+  const harness = createBackgroundHarness();
+  await harness.context.NetworkOverridesBackground.ready;
+
+  const msg = { type: 'update', tabId: 7, tabUrl: 'https://a.test/', enabled: true, overrides: [] };
+  harness.callMessage(msg);
+  harness.callMessage(msg);
+  await new Promise(resolve => setTimeout(resolve, 0));
+
+  assert.equal(harness.attachedTabs.length, 1);
+});
diff --git a/tests/background-test-harness.mjs b/tests/background-test-harness.mjs
new file mode 100644
index 0000000..16449fd
--- /dev/null
+++ b/tests/background-test-harness.mjs
@@ -0,0 +1,242 @@
+import vm from 'node:vm';
+import { runDistFile } from './test-harness.mjs';
+
+export function createBackgroundHarness({
+  sessionState: initialSessionState = {},
+  storageState: initialStorageState = {},
+  existingTabIds = [7],
+  preAttachedTabIds = [],
+} = {}) {
+  const listeners = {
+    onMessage: null,
+    onConnect: null,
+    onRemoved: null,
+    onEvent: null,
+    onDetach: null,
+    onUpdated: null,
+  };
+  const storageState = structuredClone(initialStorageState);
+  const sessionState = structuredClone(initialSessionState);
+  const existingTabs = new Set(existingTabIds);
+  const storageSets = [];
+  const commandLog = [];
+  const attachedTabs = [];
+  const detachedTabs = [];
+  const responseBodies = new Map();
+  const errors = [];
+  let attachError = null;
+  // Browser-side attachment state: chrome.debugger sessions belong to the
+  // extension, not the worker instance, so they survive worker restarts.
+  const attachedTargets = new Set(preAttachedTabIds);
+
+  const chrome = {
+    runtime: {
+      lastError: null,
+      onMessage: {
+        addListener(listener) {
+          listeners.onMessage = listener;
+        },
+      },
+      onConnect: {
+        addListener(listener) {
+          listeners.onConnect = listener;
+        },
+      },
+    },
+    tabs: {
+      onRemoved: {
+        addListener(listener) {
+          listeners.onRemoved = listener;
+        },
+      },
+      onUpdated: {
+        addListener(listener) {
+          listeners.onUpdated = listener;
+        },
+      },
+      async get(tabId) {
+        if (!existingTabs.has(tabId)) throw new Error(`No tab with id: ${tabId}`);
+        return { id: tabId };
+      },
+    },
+    debugger: {
+      onEvent: {
+        addListener(listener) {
+          listeners.onEvent = listener;
+        },
+      },
+      onDetach: {
+        addListener(listener) {
+          listeners.onDetach = listener;
+        },
+      },
+      attach(target, version, callback) {
+        attachedTabs.push({ target, version });
+        // Async like the real API so double-attach races are reproducible.
+        setTimeout(() => {
+          if (attachError) {
+            chrome.runtime.lastError = { message: attachError };
+            callback?.();
+            chrome.runtime.lastError = null;
+            return;
+          }
+          if (attachedTargets.has(target.tabId)) {
+            chrome.runtime.lastError = {
+              message: `Another debugger is already attached to the tab with id: ${target.tabId}.`,
+            };
+            callback?.();
+            chrome.runtime.lastError = null;
+            return;
+          }
+          attachedTargets.add(target.tabId);
+          callback?.();
+        }, 0);
+      },
+      detach(target, callback) {
+        detachedTabs.push(target);
+        attachedTargets.delete(target.tabId);
+        callback?.();
+      },
+      sendCommand(target, method, params, callback) {
+        commandLog.push({ target, method, params });
+        // Real Chrome scopes runtime.lastError per callback; this mock runs
+        // callbacks synchronously, so isolate it from any enclosing callback.
+        const priorLastError = chrome.runtime.lastError;
+        chrome.runtime.lastError = null;
+        if (!attachedTargets.has(target.tabId)) {
+          chrome.runtime.lastError = {
+            message: `Debugger is not attached to the tab with id: ${target.tabId}.`,
+          };
+          callback?.();
+        } else if (method === 'Fetch.getResponseBody') {
+          callback?.(responseBodies.get(params.requestId) || {});
+        } else {
+          callback?.();
+        }
+        chrome.runtime.lastError = priorLastError;
+      },
+    },
+    storage: {
+      local: {
+        get(keys, callback) {
+          const result = Array.isArray(keys)
+            ? Object.fromEntries(keys.map(key => [key, storageState[key]]))
+            : typeof keys === 'string'
+              ? { [keys]: storageState[keys] }
+              : { ...storageState };
+          if (callback) {
+            callback(result);
+            return;
+          }
+          return Promise.resolve(result);
+        },
+        set(value) {
+          storageSets.push(structuredClone(value));
+          Object.assign(storageState, structuredClone(value));
+        },
+        async remove(keys) {
+          for (const key of Array.isArray(keys) ? keys : [keys]) {
+            delete storageState[key];
+          }
+        },
+      },
+      session: {
+        async get(keys) {
+          if (keys === null || keys === undefined) return { ...sessionState };
+          if (Array.isArray(keys)) {
+            return Object.fromEntries(keys.map(key => [key, sessionState[key]]));
+          }
+          return { [keys]: sessionState[keys] };
+        },
+        async set(value) {
+          Object.assign(sessionState, structuredClone(value));
+        },
+        async remove(keys) {
+          for (const key of Array.isArray(keys) ? keys : [keys]) {
+            delete sessionState[key];
+          }
+        },
+      },
+    },
+  };
+
+  const context = {
+    console: {
+      ...console,
+      error: (...args) => {
+        errors.push(args);
+      },
+    },
+    setTimeout,
+    clearTimeout,
+    Buffer,
+    TextEncoder,
+    TextDecoder,
+    URL,
+    // Strict like the browser: Buffer.from silently ignores invalid characters,
+    // which would make the invalid-base64 fallback branch unreachable in tests.
+    atob: value => {
+      if (!/^[A-Za-z0-9+/]*={0,2}$/.test(value)) {
+        throw new Error('Invalid character in base64 string');
+      }
+      return Buffer.from(value, 'base64').toString('binary');
+    },
+    btoa: value => Buffer.from(value, 'binary').toString('base64'),
+    escape,
+    unescape,
+    // utils.js is already loaded into this context below; real service workers
+    // use importScripts to do the same thing at runtime.
+    importScripts: () => {},
+    chrome,
+  };
+  vm.createContext(context);
+  runDistFile('utils.js', context);
+  runDistFile('shared.js', context);
+  runDistFile('tab-state.js', context);
+  runDistFile('background/encoding.js', context);
+  runDistFile('background/api-capture.js', context);
+  runDistFile('background/interceptor.js', context);
+  runDistFile('background/debugger-controller.js', context);
+  runDistFile('background/message-router.js', context);
+  runDistFile('background.js', context);
+
+  return {
+    context,
+    chrome,
+    listeners,
+    storageState,
+    sessionState,
+    existingTabs,
+    storageSets,
+    commandLog,
+    attachedTabs,
+    detachedTabs,
+    responseBodies,
+    errors,
+    callMessage(message) {
+      const result = { keepAlive: undefined, response: undefined };
+      result.keepAlive = listeners.onMessage?.(message, {}, value => {
+        result.response = value;
+      });
+      return result;
+    },
+    emitDebuggerEvent(method, params, tabId = 7) {
+      listeners.onEvent?.({ tabId }, method, params);
+    },
+    removeTab(tabId = 7) {
+      listeners.onRemoved?.(tabId);
+    },
+    emitDetach(tabId = 7, reason = 'canceled_by_user') {
+      // An external detach (infobar Cancel, DevTools takeover) has already
+      // released the browser-side session before the event reaches us.
+      attachedTargets.delete(tabId);
+      listeners.onDetach?.({ tabId }, reason);
+    },
+    navigateTab(tabId, url) {
+      listeners.onUpdated?.(tabId, { url }, { id: tabId, url });
+    },
+    setAttachError(message) {
+      attachError = message;
+    },
+  };
+}
diff --git a/tests/tab-state.test.mjs b/tests/tab-state.test.mjs
index 608342d..a2f5bce 100644
--- a/tests/tab-state.test.mjs
+++ b/tests/tab-state.test.mjs
@@ -1,6 +1,7 @@
 import test from 'node:test';
 import assert from 'node:assert/strict';
-import { createBackgroundHarness, normalize } from './test-harness.mjs';
+import { normalize } from './test-harness.mjs';
+import { createBackgroundHarness } from './background-test-harness.mjs';
 
 test('TabStateStore mirrors state to storage.session on flushPersist', async () => {
   const harness = createBackgroundHarness();
diff --git a/tests/test-harness.mjs b/tests/test-harness.mjs
index 8c19691..5ae21db 100644
--- a/tests/test-harness.mjs
+++ b/tests/test-harness.mjs
@@ -41,6 +41,23 @@ export function createUiContext() {
   vm.createContext(context);
   runDistFile('utils.js', context);
   runDistFile('shared.js', context);
+  runDistFile('ui/types.js', context);
+  runDistFile('ui/view-utils.js', context);
+  runDistFile('ui/primitives.js', context);
+  runDistFile('ui/notifications.js', context);
+  runDistFile('ui/dialogs.js', context);
+  runDistFile('ui/persistence.js', context);
+  runDistFile('ui/attach-status.js', context);
+  runDistFile('ui/curl.js', context);
+  runDistFile('ui/swagger.js', context);
+  runDistFile('ui/headers-editor.js', context);
+  runDistFile('ui/modal.js', context);
+  runDistFile('ui/rules-list.js', context);
+  runDistFile('ui/api-list.js', context);
+  runDistFile('ui/profiles.js', context);
+  runDistFile('ui/modal-controller.js', context);
+  runDistFile('ui/rules-io-controller.js', context);
+  runDistFile('ui/toolbar-controller.js', context);
   runDistFile('ui.js', context);
   return context;
 }
@@ -54,8 +71,6 @@ export function createBackgroundContext() {
     btoa: value => Buffer.from(value, 'binary').toString('base64'),
     escape,
     unescape,
-    // utils.js is already loaded into this context below; real service workers
-    // use importScripts to do the same thing at runtime.
     importScripts: noop,
     chrome: {
       runtime: {
@@ -97,6 +112,11 @@ export function createBackgroundContext() {
   runDistFile('utils.js', context);
   runDistFile('shared.js', context);
   runDistFile('tab-state.js', context);
+  runDistFile('background/encoding.js', context);
+  runDistFile('background/api-capture.js', context);
+  runDistFile('background/interceptor.js', context);
+  runDistFile('background/debugger-controller.js', context);
+  runDistFile('background/message-router.js', context);
   runDistFile('background.js', context);
   return context;
 }
@@ -107,8 +127,20 @@ function buildUiHtml() {
     <body>
       <input id="enable" type="checkbox">
       <span id="attach-status" style="display:none"></span>
-      <button id="refresh-apis" type="button">↻</button>
-      <button id="info-btn" type="button">ⓘ</button>
+      <div class="header-actions">
+        <button
+          id="refresh-apis"
+          type="button"
+          title="Refresh captured requests"
+          aria-label="Refresh captured requests"
+        ><svg aria-hidden="true"></svg></button>
+        <button
+          id="info-btn"
+          type="button"
+          title="Open user guide"
+          aria-label="Open user guide"
+        ><svg aria-hidden="true"></svg></button>
+      </div>
       <div class="tabs">
         <button class="tab-btn active" data-tab="overridden">Overridden APIs</button>
         <button class="tab-btn" data-tab="other">Other APIs</button>
@@ -119,11 +151,15 @@ function buildUiHtml() {
       <button id="add-api-btn" type="button">+</button>
       <div id="apis-list"></div>
       <div id="override-modal" style="display:none;">
-        <span class="close">x</span>
-        <h4 class="modal-title">
-          <span id="modal-title-text"></span>
-          <span id="modal-url"></span>
-        </h4>
+        <div class="modal-content modal-content--override">
+          <header class="modal-header">
+            <h4 class="modal-title">
+              <span id="modal-title-text"></span>
+              <span id="modal-url"></span>
+            </h4>
+            <button class="close modal-close" type="button">x</button>
+          </header>
+          <div class="modal-scroll-body">
         <input id="modal-pattern" type="text">
         <select id="modal-method">
           <option value="ANY">Any</option>
@@ -155,8 +191,7 @@ function buildUiHtml() {
           </select>
           <textarea id="modal-body"></textarea>
           <div class="modal-body-footer">
-            <span id="body-type-badge" class="body-type-badge">text</span>
-            <button id="format-json-btn" type="button">Format JSON</button>
+            <button id="format-json-btn" type="button" style="display:none">Format JSON</button>
           </div>
           <div id="modal-preview-container" style="display:none"></div>
         </div>
@@ -173,12 +208,29 @@ function buildUiHtml() {
           </select>
         </div>
         <div id="modal-advanced-fields">
-          <label id="modal-request-headers-field"><textarea id="modal-request-headers"></textarea></label>
+          <label id="modal-request-headers-field" class="modal-field">
+            <textarea id="modal-request-headers"></textarea>
+            <div id="modal-request-headers-table"></div>
+          </label>
           <label id="modal-status-field"><input id="modal-status" type="number" /></label>
           <label><input id="modal-delay" type="number" /></label>
-          <label id="modal-headers-field"><textarea id="modal-headers"></textarea></label>
+          <label id="modal-headers-field" class="modal-field">
+            <textarea id="modal-headers"></textarea>
+            <div id="modal-response-headers-table"></div>
+          </label>
         </div>
-        <button id="save-override" type="button">Save</button>
+          </div>
+          <footer class="modal-footer">
+            <div id="modal-feedback" role="status" aria-live="polite"></div>
+            <button id="save-override" type="button">Save</button>
+          </footer>
+        </div>
+      </div>
+      <div id="curl-swagger-modal" style="display:none">
+        <span id="curl-swagger-close">x</span>
+        <textarea id="curl-swagger-textarea"></textarea>
+        <input id="curl-swagger-file-input" type="file" />
+        <button id="curl-swagger-import-btn" type="button">Import</button>
       </div>
       <div id="new-row" style="display:none;"></div>
       <input id="pattern" type="text">
@@ -192,6 +244,7 @@ function buildUiHtml() {
       <div id="overrides-section" style="display:none;">
         <button id="export-rules-btn" type="button">Export</button>
         <button id="import-rules-btn" type="button">Import</button>
+        <button id="import-curl-swagger-btn" type="button">cURL / Swagger</button>
         <input id="import-rules-input" type="file">
         <select id="profiles-select"></select>
         <button id="save-profile-btn" type="button">Save Profile</button>
@@ -211,6 +264,9 @@ export function createUiHarness({
   tabUrl = 'https://example.test/',
   options = { autoFillOnOpen: true, showManualEditor: false },
   statusResponse = { type: 'statusResponse', attached: false },
+  storageSetError = null,
+  backgroundUpdateResponse = { success: true },
+  promptResult = null,
 } = {}) {
   const dom = new JSDOM(buildUiHtml(), {
     url: tabUrl,
@@ -240,8 +296,10 @@ export function createUiHarness({
   const storageSets = [];
   const alerts = [];
   const downloads = [];
+  const openedTabs = [];
   let confirmResult = true;
   const confirms = [];
+  const prompts = [];
   let getApisCallCount = 0;
   const uiPorts = [];
 
@@ -275,6 +333,11 @@ export function createUiHarness({
           return { ...localState };
         },
         async set(value) {
+          if (storageSetError) {
+            throw storageSetError instanceof Error
+              ? storageSetError
+              : new Error(String(storageSetError));
+          }
           storageSets.push(structuredClone(value));
           Object.assign(localState, structuredClone(value));
           if (tabDomain) {
@@ -292,6 +355,9 @@ export function createUiHarness({
       query(queryInfo, callback) {
         callback([{ id: tabId, url: tabUrl }]);
       },
+      create(options) {
+        openedTabs.push(structuredClone(options));
+      },
     },
     runtime: {
       connect() {
@@ -341,6 +407,10 @@ export function createUiHarness({
           callback?.(structuredClone(statusResponse));
           return;
         }
+        if (message.type === 'update') {
+          callback?.(structuredClone(backgroundUpdateResponse));
+          return;
+        }
         callback?.({ success: true });
       },
     },
@@ -353,6 +423,10 @@ export function createUiHarness({
       confirms.push(String(message));
       return confirmResult;
     },
+    prompt: message => {
+      prompts.push(String(message));
+      return promptResult;
+    },
   });
   window.URL.createObjectURL = blob => {
     const entry = { content: '', filename: '' };
@@ -378,6 +452,23 @@ export function createUiHarness({
   const context = dom.getInternalVMContext();
   runDistFile('utils.js', context);
   runDistFile('shared.js', context);
+  runDistFile('ui/types.js', context);
+  runDistFile('ui/view-utils.js', context);
+  runDistFile('ui/primitives.js', context);
+  runDistFile('ui/notifications.js', context);
+  runDistFile('ui/dialogs.js', context);
+  runDistFile('ui/persistence.js', context);
+  runDistFile('ui/attach-status.js', context);
+  runDistFile('ui/curl.js', context);
+  runDistFile('ui/swagger.js', context);
+  runDistFile('ui/headers-editor.js', context);
+  runDistFile('ui/modal.js', context);
+  runDistFile('ui/rules-list.js', context);
+  runDistFile('ui/api-list.js', context);
+  runDistFile('ui/profiles.js', context);
+  runDistFile('ui/modal-controller.js', context);
+  runDistFile('ui/rules-io-controller.js', context);
+  runDistFile('ui/toolbar-controller.js', context);
   runDistFile('ui.js', context);
   window.NetworkOverridesUi.init(options);
 
@@ -390,7 +481,9 @@ export function createUiHarness({
     storageSets,
     alerts,
     downloads,
+    openedTabs,
     confirms,
+    prompts,
     setConfirmResult: value => {
       confirmResult = value;
     },
@@ -407,238 +500,3 @@ export async function flushUi(window, ticks = 3) {
     await new Promise(resolve => window.setTimeout(resolve, 0));
   }
 }
-
-export function createBackgroundHarness({
-  sessionState: initialSessionState = {},
-  storageState: initialStorageState = {},
-  existingTabIds = [7],
-  preAttachedTabIds = [],
-} = {}) {
-  const listeners = {
-    onMessage: null,
-    onConnect: null,
-    onRemoved: null,
-    onEvent: null,
-    onDetach: null,
-    onUpdated: null,
-  };
-  const storageState = structuredClone(initialStorageState);
-  const sessionState = structuredClone(initialSessionState);
-  const existingTabs = new Set(existingTabIds);
-  const storageSets = [];
-  const commandLog = [];
-  const attachedTabs = [];
-  const detachedTabs = [];
-  const responseBodies = new Map();
-  const errors = [];
-  let attachError = null;
-  // Browser-side attachment state: chrome.debugger sessions belong to the
-  // extension, not the worker instance, so they survive worker restarts.
-  const attachedTargets = new Set(preAttachedTabIds);
-
-  const chrome = {
-    runtime: {
-      lastError: null,
-      onMessage: {
-        addListener(listener) {
-          listeners.onMessage = listener;
-        },
-      },
-      onConnect: {
-        addListener(listener) {
-          listeners.onConnect = listener;
-        },
-      },
-    },
-    tabs: {
-      onRemoved: {
-        addListener(listener) {
-          listeners.onRemoved = listener;
-        },
-      },
-      onUpdated: {
-        addListener(listener) {
-          listeners.onUpdated = listener;
-        },
-      },
-      async get(tabId) {
-        if (!existingTabs.has(tabId)) throw new Error(`No tab with id: ${tabId}`);
-        return { id: tabId };
-      },
-    },
-    debugger: {
-      onEvent: {
-        addListener(listener) {
-          listeners.onEvent = listener;
-        },
-      },
-      onDetach: {
-        addListener(listener) {
-          listeners.onDetach = listener;
-        },
-      },
-      attach(target, version, callback) {
-        attachedTabs.push({ target, version });
-        // Async like the real API so double-attach races are reproducible.
-        setTimeout(() => {
-          if (attachError) {
-            chrome.runtime.lastError = { message: attachError };
-            callback?.();
-            chrome.runtime.lastError = null;
-            return;
-          }
-          if (attachedTargets.has(target.tabId)) {
-            chrome.runtime.lastError = {
-              message: `Another debugger is already attached to the tab with id: ${target.tabId}.`,
-            };
-            callback?.();
-            chrome.runtime.lastError = null;
-            return;
-          }
-          attachedTargets.add(target.tabId);
-          callback?.();
-        }, 0);
-      },
-      detach(target, callback) {
-        detachedTabs.push(target);
-        attachedTargets.delete(target.tabId);
-        callback?.();
-      },
-      sendCommand(target, method, params, callback) {
-        commandLog.push({ target, method, params });
-        // Real Chrome scopes runtime.lastError per callback; this mock runs
-        // callbacks synchronously, so isolate it from any enclosing callback.
-        const priorLastError = chrome.runtime.lastError;
-        chrome.runtime.lastError = null;
-        if (!attachedTargets.has(target.tabId)) {
-          chrome.runtime.lastError = {
-            message: `Debugger is not attached to the tab with id: ${target.tabId}.`,
-          };
-          callback?.();
-        } else if (method === 'Fetch.getResponseBody') {
-          callback?.(responseBodies.get(params.requestId) || {});
-        } else {
-          callback?.();
-        }
-        chrome.runtime.lastError = priorLastError;
-      },
-    },
-    storage: {
-      local: {
-        get(keys, callback) {
-          const result = Array.isArray(keys)
-            ? Object.fromEntries(keys.map(key => [key, storageState[key]]))
-            : typeof keys === 'string'
-              ? { [keys]: storageState[keys] }
-              : { ...storageState };
-          if (callback) {
-            callback(result);
-            return;
-          }
-          return Promise.resolve(result);
-        },
-        set(value) {
-          storageSets.push(structuredClone(value));
-          Object.assign(storageState, structuredClone(value));
-        },
-        async remove(keys) {
-          for (const key of Array.isArray(keys) ? keys : [keys]) {
-            delete storageState[key];
-          }
-        },
-      },
-      session: {
-        async get(keys) {
-          if (keys === null || keys === undefined) return { ...sessionState };
-          if (Array.isArray(keys)) {
-            return Object.fromEntries(keys.map(key => [key, sessionState[key]]));
-          }
-          return { [keys]: sessionState[keys] };
-        },
-        async set(value) {
-          Object.assign(sessionState, structuredClone(value));
-        },
-        async remove(keys) {
-          for (const key of Array.isArray(keys) ? keys : [keys]) {
-            delete sessionState[key];
-          }
-        },
-      },
-    },
-  };
-
-  const context = {
-    console: {
-      ...console,
-      error: (...args) => {
-        errors.push(args);
-      },
-    },
-    setTimeout,
-    clearTimeout,
-    Buffer,
-    TextEncoder,
-    TextDecoder,
-    URL,
-    // Strict like the browser: Buffer.from silently ignores invalid characters,
-    // which would make the invalid-base64 fallback branch unreachable in tests.
-    atob: value => {
-      if (!/^[A-Za-z0-9+/]*={0,2}$/.test(value)) {
-        throw new Error('Invalid character in base64 string');
-      }
-      return Buffer.from(value, 'base64').toString('binary');
-    },
-    btoa: value => Buffer.from(value, 'binary').toString('base64'),
-    escape,
-    unescape,
-    // utils.js is already loaded into this context below; real service workers
-    // use importScripts to do the same thing at runtime.
-    importScripts: () => {},
-    chrome,
-  };
-  vm.createContext(context);
-  runDistFile('utils.js', context);
-  runDistFile('shared.js', context);
-  runDistFile('tab-state.js', context);
-  runDistFile('background.js', context);
-
-  return {
-    context,
-    chrome,
-    listeners,
-    storageState,
-    sessionState,
-    existingTabs,
-    storageSets,
-    commandLog,
-    attachedTabs,
-    detachedTabs,
-    responseBodies,
-    errors,
-    callMessage(message) {
-      let response;
-      const keepAlive = listeners.onMessage?.(message, {}, value => {
-        response = value;
-      });
-      return { keepAlive, response };
-    },
-    emitDebuggerEvent(method, params, tabId = 7) {
-      listeners.onEvent?.({ tabId }, method, params);
-    },
-    removeTab(tabId = 7) {
-      listeners.onRemoved?.(tabId);
-    },
-    emitDetach(tabId = 7, reason = 'canceled_by_user') {
-      // An external detach (infobar Cancel, DevTools takeover) has already
-      // released the browser-side session before the event reaches us.
-      attachedTargets.delete(tabId);
-      listeners.onDetach?.({ tabId }, reason);
-    },
-    navigateTab(tabId, url) {
-      listeners.onUpdated?.(tabId, { url }, { id: tabId, url });
-    },
-    setAttachError(message) {
-      attachError = message;
-    },
-  };
-}
diff --git a/tests/ui-behavior.test.mjs b/tests/ui-behavior.test.mjs
index 726d830..e9f0e98 100644
--- a/tests/ui-behavior.test.mjs
+++ b/tests/ui-behavior.test.mjs
@@ -221,6 +221,35 @@ test('UI retries loading APIs until captured requests become available', async (
   assert.equal(harness.document.querySelectorAll('.api-item').length, 1);
 });
 
+test('Header refresh button exposes and clears its loading state', async () => {
+  const harness = createUiHarness({ apis: [{ url: TEST_API_URL, type: 'fetch' }] });
+  await flushUi(harness.window);
+
+  const refreshButton = harness.document.getElementById('refresh-apis');
+  refreshButton.dispatchEvent(new harness.window.MouseEvent('click', { bubbles: true }));
+
+  assert.equal(refreshButton.disabled, true);
+  assert.equal(refreshButton.classList.contains('loading'), true);
+  assert.equal(refreshButton.getAttribute('aria-busy'), 'true');
+
+  await flushUi(harness.window);
+  assert.equal(refreshButton.disabled, false);
+  assert.equal(refreshButton.classList.contains('loading'), false);
+  assert.equal(refreshButton.hasAttribute('aria-busy'), false);
+  assert.equal(refreshButton.title, 'Refresh captured requests');
+});
+
+test('Header info button opens the bundled user guide', async () => {
+  const harness = createUiHarness({ apis: [{ url: TEST_API_URL, type: 'fetch' }] });
+  await flushUi(harness.window);
+
+  harness.document
+    .getElementById('info-btn')
+    .dispatchEvent(new harness.window.MouseEvent('click', { bubbles: true }));
+
+  assert.deepEqual(harness.openedTabs, [{ url: 'guide.html' }]);
+});
+
 // use-current-body button removed; auto-fill from captured response still applies on new overrides
 
 test('Tab switching shows correct APIs and search filters within a tab', async () => {
@@ -368,872 +397,115 @@ test('Toggling a rule checkbox persists its enabled state, dims the row, and not
   assert.equal(lastUpdate.overrides[0].enabled, false);
 });
 
-test('Opening the modal from a captured API pre-selects its method; saving persists a non-ANY method', async () => {
-  const harness = createUiHarness({
-    storageState: { enabled: true, overrides: [] },
-    apis: [{ url: `${TEST_DOMAIN}/api/users`, type: 'fetch', method: 'POST' }],
-  });
-
-  await flushUi(harness.window);
-
-  harness.document
-    .querySelector('.api-item')
-    .dispatchEvent(new harness.window.MouseEvent('click', { bubbles: true }));
-  await flushUi(harness.window);
-
-  assert.equal(harness.document.getElementById('modal-method').value, 'POST');
-
-  harness.document
-    .getElementById('save-override')
-    .dispatchEvent(new harness.window.MouseEvent('click', { bubbles: true }));
-  await flushUi(harness.window);
-
-  assert.equal(harness.localState.overrides[0].method, 'POST');
-});
-
-test('Editing a rule with an out-of-range stored method falls back to ANY in the modal instead of saving silently', async () => {
-  const harness = createUiHarness({
-    storageState: {
-      enabled: true,
-      overrides: [{ pattern: 'users', body: '{}', mode: 'text', method: 'TRACE' }],
-    },
-    apis: [{ url: `${TEST_DOMAIN}/api/users`, type: 'fetch' }],
-  });
-
-  await flushUi(harness.window);
-
-  harness.document
-    .querySelector('[data-tab="overrides"]')
-    .dispatchEvent(new harness.window.MouseEvent('click', { bubbles: true }));
-  await flushUi(harness.window);
-
-  harness.document
-    .querySelector('.edit-btn')
-    .dispatchEvent(new harness.window.MouseEvent('click', { bubbles: true }));
-  await flushUi(harness.window);
-
-  assert.equal(harness.document.getElementById('modal-method').value, 'ANY');
-
-  harness.document
-    .getElementById('save-override')
-    .dispatchEvent(new harness.window.MouseEvent('click', { bubbles: true }));
-  await flushUi(harness.window);
-
-  // Saving after the fallback must not silently persist an ANY method for what
-  // was originally a method-restricted rule with an out-of-range value; it
-  // should end up unset (ANY), which is the honest reflection of what the
-  // modal showed and the user had the chance to review.
-  assert.equal(harness.localState.overrides[0].method, undefined);
-});
-
-test('Export builds the documented JSON envelope and triggers a download', async () => {
-  const harness = createUiHarness({
-    storageState: {
-      enabled: true,
-      overrides: [{ pattern: 'users', body: '{"ok":true}', mode: 'text' }],
-    },
-    apis: [],
-    tabUrl: `${TEST_DOMAIN}/`,
-  });
-
-  await flushUi(harness.window);
-
-  harness.document
-    .querySelector('[data-tab="overrides"]')
-    .dispatchEvent(new harness.window.MouseEvent('click', { bubbles: true }));
-  await flushUi(harness.window);
-
-  harness.document
-    .getElementById('export-rules-btn')
-    .dispatchEvent(new harness.window.MouseEvent('click', { bubbles: true }));
-  await flushUi(harness.window);
-
-  assert.equal(harness.downloads.length, 1);
-  const exported = JSON.parse(harness.downloads[0].content);
-  assert.equal(exported.version, 1);
-  assert.equal(exported.domain, TEST_DOMAIN);
-  assert.equal(typeof exported.exportedAt, 'string');
-  assert.deepEqual(exported.overrides, [{ pattern: 'users', body: { ok: true }, mode: 'text' }]);
-});
-
-test('Export compacts pretty-printed JSON bodies and leaves non-JSON bodies untouched', async () => {
-  const harness = createUiHarness({
-    storageState: {
-      enabled: true,
-      overrides: [
-        {
-          pattern: 'users',
-          body: '{\n  "ok": true,\n  "items": [\n    1,\n    2\n  ]\n}',
-          mode: 'text',
-        },
-        { pattern: 'plain', body: 'not json\nwith a newline', mode: 'text' },
-      ],
-    },
-    apis: [],
-    tabUrl: `${TEST_DOMAIN}/`,
-  });
-
-  await flushUi(harness.window);
-  harness.document
-    .querySelector('[data-tab="overrides"]')
-    .dispatchEvent(new harness.window.MouseEvent('click', { bubbles: true }));
-  await flushUi(harness.window);
-
-  harness.document
-    .getElementById('export-rules-btn')
-    .dispatchEvent(new harness.window.MouseEvent('click', { bubbles: true }));
-  await flushUi(harness.window);
-
-  const exported = JSON.parse(harness.downloads[0].content);
-  // JSON bodies are exported as real nested JSON (no escaped-string noise)
-  assert.deepEqual(exported.overrides[0].body, { ok: true, items: [1, 2] });
-  // non-JSON bodies must survive byte-for-byte
-  assert.equal(exported.overrides[1].body, 'not json\nwith a newline');
-  // the stored rules themselves must not be rewritten by exporting
-  assert.match(harness.localState.overrides[0].body, /\n/);
-});
-
-test('Import accepts a nested JSON body and stores it as a string rule body', async () => {
-  const harness = createUiHarness({ apis: [], tabUrl: `${TEST_DOMAIN}/` });
-  await flushUi(harness.window);
-
-  selectImportFile(
-    harness,
-    JSON.stringify({
-      version: 1,
-      domain: TEST_DOMAIN,
-      overrides: [
-        { pattern: 'users', mode: 'text', body: { ok: true, items: [1, 2] } },
-        { pattern: 'plain', mode: 'text', body: 'raw text' },
-      ],
-    })
-  );
-  await flushUi(harness.window);
-
-  assert.equal(harness.alerts.length, 0);
-  const saved = harness.storageSets.findLast(set => `overrides_${TEST_DOMAIN}` in set);
-  const rules = saved[`overrides_${TEST_DOMAIN}`];
-  assert.equal(rules[0].body, '{"ok":true,"items":[1,2]}');
-  assert.equal(rules[1].body, 'raw text');
-});
-
-test('Export shows an alert and does not attempt a download when Blob construction fails', async () => {
+test('Rapid rule changes are persisted in order and keep the newest state', async () => {
   const harness = createUiHarness({
     storageState: {
       enabled: true,
-      overrides: [{ pattern: 'users', body: '{"ok":true}', mode: 'text' }],
+      overrides: [{ pattern: 'users', body: '{}', mode: 'text' }],
     },
-    apis: [],
-    tabUrl: `${TEST_DOMAIN}/`,
   });
-
   await flushUi(harness.window);
-
   harness.document
     .querySelector('[data-tab="overrides"]')
     .dispatchEvent(new harness.window.MouseEvent('click', { bubbles: true }));
   await flushUi(harness.window);
 
-  const OriginalBlob = harness.window.Blob;
-  harness.window.Blob = function BrokenBlob() {
-    throw new Error('Blob construction boom');
-  };
-
-  try {
-    harness.document
-      .getElementById('export-rules-btn')
-      .dispatchEvent(new harness.window.MouseEvent('click', { bubbles: true }));
-    await flushUi(harness.window);
-
-    assert.equal(harness.downloads.length, 0);
-    assert.equal(harness.alerts.length, 1);
-    assert.match(harness.alerts[0], /Failed to export rules/);
-  } finally {
-    harness.window.Blob = OriginalBlob;
-  }
-});
-
-function selectImportFile(harness, jsonText) {
-  const file = new harness.window.File([jsonText], 'rules.json', { type: 'application/json' });
-  const input = harness.document.getElementById('import-rules-input');
-  Object.defineProperty(input, 'files', { value: [file], configurable: true });
-  input.dispatchEvent(new harness.window.Event('change', { bubbles: true }));
-}
+  const toggle = harness.document.querySelector('.override-enabled-toggle');
+  toggle.checked = false;
+  toggle.dispatchEvent(new harness.window.Event('change', { bubbles: true }));
+  toggle.checked = true;
+  toggle.dispatchEvent(new harness.window.Event('change', { bubbles: true }));
+  await flushUi(harness.window, 6);
 
-test('Import merges when confirm() returns true and there are existing rules', async () => {
-  const harness = createUiHarness({
-    storageState: {
-      enabled: true,
-      overrides: [{ pattern: 'existing', body: '{}', mode: 'text' }],
-    },
-    apis: [],
-    tabUrl: `${TEST_DOMAIN}/`,
-  });
-
-  await flushUi(harness.window);
-  harness.document
-    .querySelector('[data-tab="overrides"]')
-    .dispatchEvent(new harness.window.MouseEvent('click', { bubbles: true }));
-  await flushUi(harness.window);
-
-  harness.setConfirmResult(true);
-  selectImportFile(
-    harness,
-    JSON.stringify({
-      version: 1,
-      domain: TEST_DOMAIN,
-      exportedAt: '2026-01-01T00:00:00.000Z',
-      overrides: [{ pattern: 'imported', body: '{}', mode: 'text' }],
-    })
+  const overrideWrites = harness.storageSets.filter(entry =>
+    Object.keys(entry).some(key => key.startsWith('overrides_'))
   );
-  await flushUi(harness.window);
-
-  assert.equal(harness.localState.overrides.length, 2);
-  assert.equal(harness.localState.overrides[0].pattern, 'existing');
-  assert.equal(harness.localState.overrides[1].pattern, 'imported');
+  assert.equal(overrideWrites.length, 2);
+  assert.equal(overrideWrites[0][Object.keys(overrideWrites[0])[0]][0].enabled, false);
+  assert.equal(overrideWrites[1][Object.keys(overrideWrites[1])[0]][0].enabled, true);
+  assert.equal(harness.localState.overrides[0].enabled, true);
 });
 
-test('Import replaces when confirm() returns false and there are existing rules', async () => {
+test('Rule actions roll back and notify when persistence fails', async () => {
   const harness = createUiHarness({
     storageState: {
-      enabled: true,
-      overrides: [{ pattern: 'existing', body: '{}', mode: 'text' }],
+      overrides: [{ pattern: 'users', body: '{}', mode: 'text' }],
     },
-    apis: [],
-    tabUrl: `${TEST_DOMAIN}/`,
+    storageSetError: 'Storage is unavailable',
   });
-
   await flushUi(harness.window);
   harness.document
     .querySelector('[data-tab="overrides"]')
     .dispatchEvent(new harness.window.MouseEvent('click', { bubbles: true }));
   await flushUi(harness.window);
 
-  harness.setConfirmResult(false);
-  selectImportFile(
-    harness,
-    JSON.stringify({
-      version: 1,
-      domain: TEST_DOMAIN,
-      exportedAt: '2026-01-01T00:00:00.000Z',
-      overrides: [{ pattern: 'imported', body: '{}', mode: 'text' }],
-    })
-  );
+  const toggle = harness.document.querySelector('.rule-toggle');
+  toggle.checked = false;
+  toggle.dispatchEvent(new harness.window.Event('change', { bubbles: true }));
   await flushUi(harness.window);
 
-  assert.deepEqual(harness.localState.overrides, [
-    { pattern: 'imported', body: '{}', mode: 'text' },
-  ]);
-});
-
-test('Import shows an alert and makes no changes when the file is not valid JSON', async () => {
-  const harness = createUiHarness({
-    storageState: { enabled: true, overrides: [{ pattern: 'existing', body: '{}', mode: 'text' }] },
-    apis: [],
-  });
-
-  await flushUi(harness.window);
-  harness.document
-    .querySelector('[data-tab="overrides"]')
-    .dispatchEvent(new harness.window.MouseEvent('click', { bubbles: true }));
-  await flushUi(harness.window);
-
-  selectImportFile(harness, 'not json');
-  await flushUi(harness.window);
-
-  assert.equal(harness.localState.overrides.length, 1);
-  assert.equal(harness.localState.overrides[0].pattern, 'existing');
-  assert.equal(harness.alerts.length, 1);
-});
-
-test('Import shows an alert and makes no changes when a rule has a non-string method', async () => {
-  const harness = createUiHarness({
-    storageState: { enabled: true, overrides: [{ pattern: 'existing', body: '{}', mode: 'text' }] },
-    apis: [],
-  });
-
-  await flushUi(harness.window);
-  harness.document
-    .querySelector('[data-tab="overrides"]')
-    .dispatchEvent(new harness.window.MouseEvent('click', { bubbles: true }));
-  await flushUi(harness.window);
-
-  selectImportFile(
-    harness,
-    JSON.stringify({
-      version: 1,
-      domain: TEST_DOMAIN,
-      exportedAt: '2026-01-01T00:00:00.000Z',
-      overrides: [{ pattern: 'imported', body: '{}', mode: 'text', method: 123 }],
-    })
+  assert.equal(harness.localState.overrides[0].enabled, undefined);
+  assert.equal(harness.document.querySelector('.rule-toggle').checked, true);
+  assert.match(
+    harness.document.querySelector('.notification-toast--error').textContent,
+    /storage is unavailable/i
   );
-  await flushUi(harness.window);
-
-  assert.equal(harness.localState.overrides.length, 1);
-  assert.equal(harness.localState.overrides[0].pattern, 'existing');
-  assert.equal(harness.alerts.length, 1);
 });
 
-test('Import shows an alert and makes no changes when an "overrides" entry is not an object', async () => {
-  const harness = createUiHarness({
-    storageState: { enabled: true, overrides: [{ pattern: 'existing', body: '{}', mode: 'text' }] },
-    apis: [],
-  });
-
-  await flushUi(harness.window);
-  harness.document
-    .querySelector('[data-tab="overrides"]')
-    .dispatchEvent(new harness.window.MouseEvent('click', { bubbles: true }));
-  await flushUi(harness.window);
-
-  selectImportFile(
-    harness,
-    JSON.stringify({
-      version: 1,
-      domain: TEST_DOMAIN,
-      exportedAt: '2026-01-01T00:00:00.000Z',
-      overrides: [null],
-    })
-  );
-  await flushUi(harness.window);
-
-  assert.equal(harness.localState.overrides.length, 1);
-  assert.equal(harness.localState.overrides[0].pattern, 'existing');
-  assert.equal(harness.alerts.length, 1);
-});
-
-test('Import with no existing rules writes them directly and never prompts to merge or replace', async () => {
+test('Opening the modal from a captured API pre-selects its method; saving persists a non-ANY method', async () => {
   const harness = createUiHarness({
     storageState: { enabled: true, overrides: [] },
-    apis: [],
-    tabUrl: `${TEST_DOMAIN}/`,
+    apis: [{ url: `${TEST_DOMAIN}/api/users`, type: 'fetch', method: 'POST' }],
   });
 
-  await flushUi(harness.window);
-  harness.document
-    .querySelector('[data-tab="overrides"]')
-    .dispatchEvent(new harness.window.MouseEvent('click', { bubbles: true }));
-  await flushUi(harness.window);
-
-  selectImportFile(
-    harness,
-    JSON.stringify({
-      version: 1,
-      domain: TEST_DOMAIN,
-      exportedAt: '2026-01-01T00:00:00.000Z',
-      overrides: [{ pattern: 'imported', body: '{}', mode: 'text' }],
-    })
-  );
   await flushUi(harness.window);
 
-  assert.deepEqual(harness.localState.overrides, [
-    { pattern: 'imported', body: '{}', mode: 'text' },
-  ]);
-  assert.equal(harness.confirms.length, 0);
-});
-
-test('Import strips unknown fields from rule objects, keeping only known OverrideRule fields', async () => {
-  const harness = createUiHarness({
-    storageState: { enabled: true, overrides: [] },
-    apis: [],
-    tabUrl: `${TEST_DOMAIN}/`,
-  });
-
-  await flushUi(harness.window);
   harness.document
-    .querySelector('[data-tab="overrides"]')
+    .querySelector('.api-item')
     .dispatchEvent(new harness.window.MouseEvent('click', { bubbles: true }));
   await flushUi(harness.window);
 
-  selectImportFile(
-    harness,
-    JSON.stringify({
-      version: 1,
-      domain: TEST_DOMAIN,
-      exportedAt: '2026-01-01T00:00:00.000Z',
-      overrides: [
-        {
-          pattern: 'imported',
-          body: '{}',
-          mode: 'text',
-          method: 'POST',
-          enabled: false,
-          redirectUrl: 'https://example.com/new',
-          notAKnownField: 'should be dropped',
-        },
-      ],
-    })
-  );
-  await flushUi(harness.window);
-
-  assert.deepEqual(harness.localState.overrides, [
-    {
-      pattern: 'imported',
-      body: '{}',
-      mode: 'text',
-      method: 'POST',
-      enabled: false,
-      redirectUrl: 'https://example.com/new',
-    },
-  ]);
-});
-
-test('Import with mismatched domain prompts to confirm and proceeds when accepted', async () => {
-  const harness = createUiHarness({
-    storageState: { enabled: true, overrides: [] },
-    apis: [],
-    tabUrl: `${TEST_DOMAIN}/`,
-  });
+  assert.equal(harness.document.getElementById('modal-method').value, 'POST');
 
-  await flushUi(harness.window);
   harness.document
-    .querySelector('[data-tab="overrides"]')
+    .getElementById('save-override')
     .dispatchEvent(new harness.window.MouseEvent('click', { bubbles: true }));
   await flushUi(harness.window);
 
-  harness.setConfirmResult(true);
-  selectImportFile(
-    harness,
-    JSON.stringify({
-      version: 1,
-      domain: 'https://other-domain.example',
-      exportedAt: '2026-01-01T00:00:00.000Z',
-      overrides: [{ pattern: 'imported', body: '{}', mode: 'text' }],
-    })
-  );
-  await flushUi(harness.window);
-
-  assert.equal(harness.confirms.length, 1);
-  assert.match(harness.confirms[0], /other-domain\.example/);
-  assert.deepEqual(harness.localState.overrides, [
-    { pattern: 'imported', body: '{}', mode: 'text' },
-  ]);
+  assert.equal(harness.localState.overrides[0].method, 'POST');
 });
 
-test('Import with mismatched domain aborts with no changes when the confirm is cancelled', async () => {
+test('Editing a rule with an out-of-range stored method falls back to ANY in the modal instead of saving silently', async () => {
   const harness = createUiHarness({
     storageState: {
       enabled: true,
-      overrides: [{ pattern: 'existing', body: '{}', mode: 'text' }],
-    },
-    apis: [],
-    tabUrl: `${TEST_DOMAIN}/`,
-  });
-
-  await flushUi(harness.window);
-  harness.document
-    .querySelector('[data-tab="overrides"]')
-    .dispatchEvent(new harness.window.MouseEvent('click', { bubbles: true }));
-  await flushUi(harness.window);
-
-  harness.setConfirmResult(false);
-  selectImportFile(
-    harness,
-    JSON.stringify({
-      version: 1,
-      domain: 'https://other-domain.example',
-      exportedAt: '2026-01-01T00:00:00.000Z',
-      overrides: [{ pattern: 'imported', body: '{}', mode: 'text' }],
-    })
-  );
-  await flushUi(harness.window);
-
-  // Only the domain-mismatch confirm should have fired; the import aborted
-  // before ever reaching the merge/replace confirm.
-  assert.equal(harness.confirms.length, 1);
-  assert.deepEqual(harness.localState.overrides, [
-    { pattern: 'existing', body: '{}', mode: 'text' },
-  ]);
-  assert.equal(harness.alerts.length, 0);
-});
-
-test('UI shows attach status and unchecks the toggle on attach failure', async () => {
-  // Seed one captured API so init's loadApis succeeds immediately and the
-  // status port connects within flushUi instead of after the ~1s retry loop.
-  const harness = createUiHarness({
-    storageState: { enabled: true },
-    apis: [{ url: TEST_API_URL, type: 'fetch' }],
-  });
-  await flushUi(harness.window);
-
-  harness.emitPortMessage({ type: 'status', tabId: 99, attached: true });
-  const statusEl = harness.document.getElementById('attach-status');
-  assert.equal(statusEl.textContent, 'Intercepting requests');
-  assert.equal(statusEl.classList.contains('attach-status--on'), true);
-
-  harness.emitPortMessage({
-    type: 'status',
-    tabId: 99,
-    attached: false,
-    error: 'Another debugger is already attached',
-  });
-  await flushUi(harness.window);
-  assert.equal(statusEl.textContent, 'Attach failed: Another debugger is already attached');
-  assert.equal(statusEl.classList.contains('attach-status--error'), true);
-  assert.equal(harness.document.getElementById('enable').checked, false);
-  assert.equal(harness.localState.enabled, false);
-});
-
-test('UI queries getStatus on load', async () => {
-  const harness = createUiHarness();
-  await flushUi(harness.window);
-  assert.equal(
-    harness.sentMessages.some(msg => msg.type === 'getStatus'),
-    true
-  );
-});
-
-test('UI unchecks the toggle when getStatus itself reports an attach error', async () => {
-  const harness = createUiHarness({
-    storageState: { enabled: true },
-    statusResponse: {
-      type: 'statusResponse',
-      attached: false,
-      error: 'Cannot access a chrome:// URL',
+      overrides: [{ pattern: 'users', body: '{}', mode: 'text', method: 'TRACE' }],
     },
-  });
-  await flushUi(harness.window);
-
-  const statusEl = harness.document.getElementById('attach-status');
-  assert.equal(statusEl.textContent, 'Attach failed: Cannot access a chrome:// URL');
-  assert.equal(harness.document.getElementById('enable').checked, false);
-  assert.equal(harness.localState.enabled, false);
-});
-
-test('Import rejects rules with an unknown mode or method', async () => {
-  const harness = createUiHarness({ apis: [], tabUrl: `${TEST_DOMAIN}/` });
-  await flushUi(harness.window);
-
-  selectImportFile(
-    harness,
-    JSON.stringify({
-      version: 1,
-      domain: TEST_DOMAIN,
-      overrides: [{ pattern: 'x', mode: 'yaml', body: '' }],
-    })
-  );
-  await flushUi(harness.window);
-  assert.equal(harness.alerts.length, 1);
-  assert.match(harness.alerts[0], /invalid/i);
-  assert.equal(harness.localState.overrides, undefined);
-
-  selectImportFile(
-    harness,
-    JSON.stringify({
-      version: 1,
-      domain: TEST_DOMAIN,
-      overrides: [{ pattern: 'x', mode: 'text', body: '', method: 'TRACE' }],
-    })
-  );
-  await flushUi(harness.window);
-  assert.equal(harness.alerts.length, 2);
-  assert.equal(harness.localState.overrides, undefined);
-});
-
-test('Import normalizes method casing to uppercase', async () => {
-  const harness = createUiHarness({ apis: [], tabUrl: `${TEST_DOMAIN}/` });
-  await flushUi(harness.window);
-
-  selectImportFile(
-    harness,
-    JSON.stringify({
-      version: 1,
-      domain: TEST_DOMAIN,
-      overrides: [{ pattern: 'x', mode: 'text', body: '', method: 'get' }],
-    })
-  );
-  await flushUi(harness.window);
-
-  const saved = harness.storageSets.findLast(set => `overrides_${TEST_DOMAIN}` in set);
-  assert.equal(saved[`overrides_${TEST_DOMAIN}`][0].method, 'GET');
-});
-
-test('Saving a body override persists status, delay, and extra headers', async () => {
-  const harness = createUiHarness({
-    apis: [{ url: `${TEST_DOMAIN}/api/users`, type: 'fetch', method: 'GET' }],
-    tabUrl: `${TEST_DOMAIN}/`,
-  });
-  await flushUi(harness.window);
-
-  harness.document
-    .querySelector('#apis-list li.api-item')
-    .dispatchEvent(new harness.window.MouseEvent('click', { bubbles: true }));
-  await flushUi(harness.window);
-
-  harness.document.getElementById('modal-body').value = '{"mock":1}';
-  harness.document.getElementById('modal-status').value = '503';
-  harness.document.getElementById('modal-delay').value = '1500';
-  harness.document.getElementById('modal-headers').value =
-    'X-Custom: yes\nContent-Type: text/plain';
-  harness.document
-    .getElementById('save-override')
-    .dispatchEvent(new harness.window.MouseEvent('click', { bubbles: true }));
-  await flushUi(harness.window);
-
-  const saved = harness.storageSets.findLast(set => `overrides_${TEST_DOMAIN}` in set)[
-    `overrides_${TEST_DOMAIN}`
-  ][0];
-  assert.equal(saved.statusCode, 503);
-  assert.equal(saved.delayMs, 1500);
-  assert.deepEqual(saved.responseHeaders, [
-    { name: 'X-Custom', value: 'yes' },
-    { name: 'Content-Type', value: 'text/plain' },
-  ]);
-});
-
-test('Saving a fail rule persists failReason and delay with an empty body', async () => {
-  const harness = createUiHarness({ apis: [], tabUrl: `${TEST_DOMAIN}/` });
-  await flushUi(harness.window);
-
-  harness.document
-    .getElementById('add-api-btn')
-    .dispatchEvent(new harness.window.MouseEvent('click', { bubbles: true }));
-  await flushUi(harness.window);
-
-  harness.document.getElementById('modal-pattern').value = 'api/fail';
-  const failRadio = harness.document.querySelector(
-    'input[name="modal-override-type"][value="fail"]'
-  );
-  failRadio.checked = true;
-  failRadio.dispatchEvent(new harness.window.Event('change', { bubbles: true }));
-  harness.document.getElementById('modal-fail-reason').value = 'TimedOut';
-  harness.document.getElementById('modal-delay').value = '2000';
-  harness.document
-    .getElementById('save-override')
-    .dispatchEvent(new harness.window.MouseEvent('click', { bubbles: true }));
-  await flushUi(harness.window);
-
-  const saved = harness.storageSets.findLast(set => `overrides_${TEST_DOMAIN}` in set)[
-    `overrides_${TEST_DOMAIN}`
-  ][0];
-  assert.equal(saved.failReason, 'TimedOut');
-  assert.equal(saved.delayMs, 2000);
-  assert.equal(saved.body, '');
-  assert.equal(saved.redirectUrl, undefined);
-  assert.equal(saved.statusCode, undefined);
-});
-
-test('Modal save rejects out-of-range status and delay and malformed header lines', async () => {
-  const harness = createUiHarness({
     apis: [{ url: `${TEST_DOMAIN}/api/users`, type: 'fetch' }],
-    tabUrl: `${TEST_DOMAIN}/`,
   });
-  await flushUi(harness.window);
 
-  harness.document
-    .querySelector('#apis-list li.api-item')
-    .dispatchEvent(new harness.window.MouseEvent('click', { bubbles: true }));
-  await flushUi(harness.window);
-
-  const save = () =>
-    harness.document
-      .getElementById('save-override')
-      .dispatchEvent(new harness.window.MouseEvent('click', { bubbles: true }));
-
-  harness.document.getElementById('modal-status').value = '99';
-  save();
-  await flushUi(harness.window);
-  assert.equal(harness.alerts.length, 1);
-  assert.match(harness.alerts[0], /status/i);
-
-  harness.document.getElementById('modal-status').value = '';
-  harness.document.getElementById('modal-delay').value = '-5';
-  save();
   await flushUi(harness.window);
-  assert.equal(harness.alerts.length, 2);
-  assert.match(harness.alerts[1], /delay/i);
 
-  harness.document.getElementById('modal-delay').value = '';
-  harness.document.getElementById('modal-headers').value = 'no colon here';
-  save();
-  await flushUi(harness.window);
-  assert.equal(harness.alerts.length, 3);
-  assert.match(harness.alerts[2], /header/i);
-
-  const saved = harness.storageSets.find(set => `overrides_${TEST_DOMAIN}` in set);
-  assert.equal(saved, undefined); // nothing was persisted
-});
-
-test('Editing a fail rule pre-fills the fail type, reason, and delay', async () => {
-  const harness = createUiHarness({
-    storageState: {
-      overrides: [
-        {
-          pattern: 'api/fail',
-          body: '',
-          mode: 'text',
-          failReason: 'ConnectionRefused',
-          delayMs: 500,
-        },
-      ],
-    },
-    apis: [],
-    tabUrl: `${TEST_DOMAIN}/`,
-  });
-  await flushUi(harness.window);
-
-  harness.document
-    .querySelector('[data-tab="overrides"]')
-    .dispatchEvent(new harness.window.MouseEvent('click', { bubbles: true }));
-  await flushUi(harness.window);
-  harness.document
-    .querySelector('.edit-btn')
-    .dispatchEvent(new harness.window.MouseEvent('click', { bubbles: true }));
-  await flushUi(harness.window);
-
-  assert.equal(
-    harness.document.querySelector('input[name="modal-override-type"][value="fail"]').checked,
-    true
-  );
-  assert.equal(harness.document.getElementById('modal-fail-reason').value, 'ConnectionRefused');
-  assert.equal(harness.document.getElementById('modal-delay').value, '500');
-  assert.equal(harness.document.getElementById('modal-fail-fields').style.display, '');
-});
-
-test('Rules list shows status, delay, and FAIL badges', async () => {
-  const harness = createUiHarness({
-    storageState: {
-      overrides: [
-        { pattern: 'a', body: '{}', mode: 'text', statusCode: 500, delayMs: 3000 },
-        { pattern: 'b', body: '', mode: 'text', failReason: 'TimedOut' },
-      ],
-    },
-    apis: [],
-    tabUrl: `${TEST_DOMAIN}/`,
-  });
-  await flushUi(harness.window);
   harness.document
     .querySelector('[data-tab="overrides"]')
     .dispatchEvent(new harness.window.MouseEvent('click', { bubbles: true }));
   await flushUi(harness.window);
 
-  const items = harness.document.querySelectorAll('#list .override-item');
-  assert.equal(items[0].querySelector('.override-status-badge').textContent, '500');
-  assert.equal(items[0].querySelector('.override-delay-badge').textContent, '⏱ 3000ms');
-  const failBadge = items[1].querySelector('.override-fail-badge');
-  assert.equal(failBadge.textContent, 'FAIL');
-  assert.equal(failBadge.title, 'TimedOut');
-});
-
-test('Import rejects invalid mock-power fields', async () => {
-  const harness = createUiHarness({ apis: [], tabUrl: `${TEST_DOMAIN}/` });
-  await flushUi(harness.window);
-
-  const attempts = [
-    { pattern: 'x', mode: 'text', body: '', statusCode: 99 },
-    { pattern: 'x', mode: 'text', body: '', statusCode: 'abc' },
-    { pattern: 'x', mode: 'text', body: '', delayMs: -1 },
-    { pattern: 'x', mode: 'text', body: '', delayMs: 999999 },
-    { pattern: 'x', mode: 'text', body: '', responseHeaders: [{ name: '', value: 'v' }] },
-    { pattern: 'x', mode: 'text', body: '', responseHeaders: 'not-an-array' },
-    { pattern: 'x', mode: 'text', body: '', failReason: 'Nope' },
-    { pattern: 'x', mode: 'text', body: '', failReason: 'Failed', redirectUrl: 'https://a.test/' },
-  ];
-  for (const rule of attempts) {
-    selectImportFile(
-      harness,
-      JSON.stringify({ version: 1, domain: TEST_DOMAIN, overrides: [rule] })
-    );
-    await flushUi(harness.window);
-  }
-  assert.equal(harness.alerts.length, attempts.length);
-  assert.equal(
-    harness.storageSets.find(set => `overrides_${TEST_DOMAIN}` in set),
-    undefined
-  );
-});
-
-test('Import keeps valid mock-power fields on the cleaned rule', async () => {
-  const harness = createUiHarness({ apis: [], tabUrl: `${TEST_DOMAIN}/` });
-  await flushUi(harness.window);
-
-  selectImportFile(
-    harness,
-    JSON.stringify({
-      version: 1,
-      domain: TEST_DOMAIN,
-      overrides: [
-        {
-          pattern: 'users',
-          mode: 'text',
-          body: '{}',
-          statusCode: 503,
-          delayMs: 1500,
-          responseHeaders: [{ name: 'X-Custom', value: 'yes' }],
-        },
-        { pattern: 'fail', mode: 'text', body: '', failReason: 'TimedOut' },
-      ],
-    })
-  );
-  await flushUi(harness.window);
-
-  assert.equal(harness.alerts.length, 0);
-  const rules = harness.storageSets.findLast(set => `overrides_${TEST_DOMAIN}` in set)[
-    `overrides_${TEST_DOMAIN}`
-  ];
-  assert.deepEqual(rules[0], {
-    pattern: 'users',
-    mode: 'text',
-    body: '{}',
-    statusCode: 503,
-    delayMs: 1500,
-    responseHeaders: [{ name: 'X-Custom', value: 'yes' }],
-  });
-  assert.deepEqual(rules[1], {
-    pattern: 'fail',
-    mode: 'text',
-    body: '',
-    failReason: 'TimedOut',
-  });
-});
-
-test('Duplicating a rule creates an exact copy in storage and UI', async () => {
-  const harness = createUiHarness({
-    storageState: {
-      enabled: true,
-      overrides: [{ pattern: 'users', body: '{"ok":1}', mode: 'text' }],
-    },
-  });
-
-  await flushUi(harness.window);
-
   harness.document
-    .querySelector('[data-tab="overrides"]')
+    .querySelector('.edit-btn')
     .dispatchEvent(new harness.window.MouseEvent('click', { bubbles: true }));
   await flushUi(harness.window);
 
-  const dupBtn = harness.document.querySelector('.duplicate-btn');
-  assert.ok(dupBtn, 'Duplicate button must exist');
-  dupBtn.dispatchEvent(new harness.window.MouseEvent('click', { bubbles: true }));
-  await flushUi(harness.window);
-
-  const rules = harness.localState.overrides;
-  assert.equal(rules.length, 2);
-  assert.deepEqual(rules[0], rules[1]);
-});
-
-test('Saving a body override with requestHeaders persists requestHeaders', async () => {
-  const harness = createUiHarness({ apis: [{ url: TEST_API_URL, type: 'Fetch' }] });
-
-  await flushUi(harness.window);
-
-  const apiItem = harness.document.querySelector('.api-item');
-  assert.ok(apiItem, 'api-item must exist');
-  apiItem.dispatchEvent(new harness.window.MouseEvent('click', { bubbles: true }));
-  await flushUi(harness.window);
-
-  const reqHeadersTextarea = harness.document.getElementById('modal-request-headers');
-  assert.ok(reqHeadersTextarea, 'modal-request-headers element must exist');
-  reqHeadersTextarea.value = 'Authorization: Bearer my-secret-token';
+  assert.equal(harness.document.getElementById('modal-method').value, 'ANY');
 
   harness.document
     .getElementById('save-override')
     .dispatchEvent(new harness.window.MouseEvent('click', { bubbles: true }));
   await flushUi(harness.window);
 
-  const savedRules = harness.localState.overrides;
-  assert.equal(savedRules.length, 1);
-  assert.deepEqual(savedRules[0].requestHeaders, [
-    { name: 'Authorization', value: 'Bearer my-secret-token' },
-  ]);
+  // Saving after the fallback must not silently persist an ANY method for what
+  // was originally a method-restricted rule with an out-of-range value; it
+  // should end up unset (ANY), which is the honest reflection of what the
+  // modal showed and the user had the chance to review.
+  assert.equal(harness.localState.overrides[0].method, undefined);
 });
diff --git a/tests/ui-components.test.mjs b/tests/ui-components.test.mjs
new file mode 100644
index 0000000..ca0f941
--- /dev/null
+++ b/tests/ui-components.test.mjs
@@ -0,0 +1,164 @@
+import test, { after } from 'node:test';
+import assert from 'node:assert/strict';
+import { createUiHarness, flushUi, closeAllUiHarnessWindows } from './test-harness.mjs';
+
+after(() => {
+  closeAllUiHarnessWindows();
+});
+
+test('UI parses cURL command into an OverrideRule', async () => {
+  const harness = createUiHarness();
+  const ui = harness.window.NetworkOverridesUi;
+
+  const curlStr = `curl -X POST "https://api.example.com/v1/users" -H "Authorization: Bearer token123" -H "Content-Type: application/json" --data-raw '{"name":"Alice"}'`;
+  const rule = ui.parseCurlToRule(curlStr);
+
+  assert.ok(rule, 'Rule must be parsed from cURL string');
+  assert.equal(rule.pattern, '/v1/users');
+  assert.equal(rule.method, 'POST');
+  assert.equal(rule.body, '{"name":"Alice"}');
+  assert.deepEqual(
+    Array.from(rule.requestHeaders, header => ({ ...header })),
+    [
+      { name: 'Authorization', value: 'Bearer token123' },
+      { name: 'Content-Type', value: 'application/json' },
+    ]
+  );
+});
+test('URL path patterns beginning with a slash are treated as text, not regex flags', () => {
+  const harness = createUiHarness();
+  const ui = harness.window.NetworkOverridesUi;
+
+  assert.equal(ui.patternMatches('/api/users', 'https://example.com/api/users'), true);
+});
+
+test('UI parses Swagger/OpenAPI JSON specification into OverrideRules', async () => {
+  const harness = createUiHarness();
+  const ui = harness.window.NetworkOverridesUi;
+
+  const swaggerJson = JSON.stringify({
+    openapi: '3.0.0',
+    paths: {
+      '/api/v1/users/{id}': {
+        get: {
+          responses: {
+            200: {
+              content: {
+                'application/json': {
+                  example: { id: 1, name: 'Bob' },
+                },
+              },
+            },
+          },
+        },
+      },
+    },
+  });
+
+  const rules = ui.parseSwaggerToRules(swaggerJson);
+  assert.equal(rules.length, 1, 'Must parse 1 rule from OpenAPI spec');
+  assert.equal(rules[0].pattern, '/api/v1/users/*');
+  assert.equal(rules[0].method, 'GET');
+  assert.ok(rules[0].body.includes('"name": "Bob"'));
+});
+
+test('Visual Header Table syncs bidirectional updates with Textarea', async () => {
+  const harness = createUiHarness();
+  const ui = harness.window.NetworkOverridesUi;
+
+  const tableContainer = harness.document.createElement('div');
+  const textarea = harness.document.createElement('textarea');
+  textarea.value = 'X-Custom-1: Value1\nX-Custom-2: Value2';
+
+  ui.renderHeaderTable(tableContainer, textarea);
+
+  const rows = tableContainer.querySelectorAll('.header-table-row');
+  assert.equal(rows.length, 2, 'Must render 2 table rows');
+
+  // Edit first row key in table
+  const keyInput = rows[0].querySelector('.header-row-key');
+  keyInput.value = 'X-Modified-Header';
+  keyInput.dispatchEvent(new harness.window.Event('input'));
+
+  assert.ok(
+    textarea.value.includes('X-Modified-Header: Value1'),
+    'Textarea must sync from table input'
+  );
+});
+
+test('Shared UI primitives normalize static and dynamic controls', async () => {
+  const harness = createUiHarness();
+  await flushUi(harness.window);
+
+  assert.equal(
+    harness.document.getElementById('modal-pattern').classList.contains('ui-control'),
+    true
+  );
+  assert.equal(
+    harness.document.getElementById('save-override').classList.contains('ui-btn--primary'),
+    true
+  );
+  assert.equal(
+    harness.document
+      .querySelector('#modal-request-headers')
+      .closest('label')
+      .classList.contains('ui-field'),
+    true
+  );
+
+  const container = harness.document.createElement('div');
+  const textarea = harness.document.createElement('textarea');
+  harness.window.NetworkOverridesUi.renderHeaderTable(container, textarea);
+  assert.equal(container.querySelector('.add-header-row-btn').classList.contains('ui-btn'), true);
+  assert.equal(
+    container.querySelector('.headers-editor-mode button').classList.contains('ui-btn'),
+    true
+  );
+
+  const refreshButton = harness.document.getElementById('refresh-apis');
+  const infoButton = harness.document.getElementById('info-btn');
+  assert.equal(refreshButton.getAttribute('aria-label'), 'Refresh captured requests');
+  assert.equal(infoButton.getAttribute('aria-label'), 'Open user guide');
+  assert.ok(refreshButton.querySelector('svg[aria-hidden="true"]'));
+  assert.ok(infoButton.querySelector('svg[aria-hidden="true"]'));
+  assert.ok(refreshButton.closest('.header-actions'));
+  assert.ok(infoButton.closest('.header-actions'));
+});
+
+test('Override modal keeps header and actions outside the scrollable body', async () => {
+  const harness = createUiHarness();
+  await flushUi(harness.window);
+
+  const modalContent = harness.document.querySelector('#override-modal .modal-content--override');
+  const header = modalContent.querySelector(':scope > .modal-header');
+  const scrollBody = modalContent.querySelector(':scope > .modal-scroll-body');
+  const footer = modalContent.querySelector(':scope > .modal-footer');
+
+  assert.ok(header.querySelector('#modal-title-text'));
+  assert.ok(header.querySelector('.modal-close'));
+  assert.ok(scrollBody.querySelector('#modal-pattern'));
+  assert.ok(footer.querySelector('#save-override'));
+  assert.equal(scrollBody.contains(header), false);
+  assert.equal(scrollBody.contains(footer), false);
+});
+
+test('Format JSON is the only body-type action and appears only for valid JSON', async () => {
+  const harness = createUiHarness();
+  await flushUi(harness.window);
+
+  const body = harness.document.getElementById('modal-body');
+  const formatButton = harness.document.getElementById('format-json-btn');
+  assert.equal(harness.document.getElementById('body-type-badge'), null);
+  assert.equal(formatButton.style.display, 'none');
+
+  body.value = 'plain text';
+  body.dispatchEvent(new harness.window.Event('input', { bubbles: true }));
+  assert.equal(formatButton.style.display, 'none');
+
+  body.value = '{"ok":true}';
+  body.dispatchEvent(new harness.window.Event('input', { bubbles: true }));
+  assert.equal(formatButton.style.display, 'inline-flex');
+
+  formatButton.dispatchEvent(new harness.window.MouseEvent('click', { bubbles: true }));
+  assert.equal(body.value, '{\n  "ok": true\n}');
+});
diff --git a/tests/ui-import-validation.test.mjs b/tests/ui-import-validation.test.mjs
new file mode 100644
index 0000000..4a7cfa6
--- /dev/null
+++ b/tests/ui-import-validation.test.mjs
@@ -0,0 +1,197 @@
+import test, { after } from 'node:test';
+import assert from 'node:assert/strict';
+import { createUiHarness, flushUi, closeAllUiHarnessWindows } from './test-harness.mjs';
+import { TEST_API_URL, TEST_DOMAIN } from './config.mjs';
+
+// Every createUiHarness() call in this file boots a real jsdom window whose
+// window.setInterval (from ui.ts's init) keeps running until the window is
+// closed. Close them all once, after this file's tests finish, so the
+// process can exit instead of hanging on leaked timers.
+after(() => {
+  closeAllUiHarnessWindows();
+});
+
+function selectImportFile(harness, jsonText) {
+  const file = new harness.window.File([jsonText], 'rules.json', { type: 'application/json' });
+  const input = harness.document.getElementById('import-rules-input');
+  Object.defineProperty(input, 'files', { value: [file], configurable: true });
+  input.dispatchEvent(new harness.window.Event('change', { bubbles: true }));
+}
+
+function clickDialog(harness, selector) {
+  harness.document
+    .querySelector(selector)
+    .dispatchEvent(new harness.window.MouseEvent('click', { bubbles: true }));
+}
+
+test('Import with mismatched domain shows a dialog and proceeds when accepted', async () => {
+  const harness = createUiHarness({
+    storageState: { enabled: true, overrides: [] },
+    apis: [],
+    tabUrl: `${TEST_DOMAIN}/`,
+  });
+
+  await flushUi(harness.window);
+  harness.document
+    .querySelector('[data-tab="overrides"]')
+    .dispatchEvent(new harness.window.MouseEvent('click', { bubbles: true }));
+  await flushUi(harness.window);
+
+  selectImportFile(
+    harness,
+    JSON.stringify({
+      version: 1,
+      domain: 'https://other-domain.example',
+      exportedAt: '2026-01-01T00:00:00.000Z',
+      overrides: [{ pattern: 'imported', body: '{}', mode: 'text' }],
+    })
+  );
+  await flushUi(harness.window);
+  assert.match(harness.document.querySelector('.ui-dialog__message').textContent, /other-domain/);
+  clickDialog(harness, '[data-dialog-action="primary"]');
+  await flushUi(harness.window);
+
+  assert.deepEqual(harness.localState.overrides, [
+    { pattern: 'imported', body: '{}', mode: 'text' },
+  ]);
+});
+
+test('Import with mismatched domain aborts with no changes when the dialog is cancelled', async () => {
+  const harness = createUiHarness({
+    storageState: {
+      enabled: true,
+      overrides: [{ pattern: 'existing', body: '{}', mode: 'text' }],
+    },
+    apis: [],
+    tabUrl: `${TEST_DOMAIN}/`,
+  });
+
+  await flushUi(harness.window);
+  harness.document
+    .querySelector('[data-tab="overrides"]')
+    .dispatchEvent(new harness.window.MouseEvent('click', { bubbles: true }));
+  await flushUi(harness.window);
+
+  selectImportFile(
+    harness,
+    JSON.stringify({
+      version: 1,
+      domain: 'https://other-domain.example',
+      exportedAt: '2026-01-01T00:00:00.000Z',
+      overrides: [{ pattern: 'imported', body: '{}', mode: 'text' }],
+    })
+  );
+  await flushUi(harness.window);
+  clickDialog(harness, '.ui-dialog__actions .ui-btn--secondary');
+  await flushUi(harness.window);
+
+  assert.equal(harness.document.querySelector('.ui-dialog'), null);
+  assert.deepEqual(harness.localState.overrides, [
+    { pattern: 'existing', body: '{}', mode: 'text' },
+  ]);
+  assert.equal(harness.alerts.length, 0);
+});
+
+test('UI shows attach status and unchecks the toggle on attach failure', async () => {
+  // Seed one captured API so init's loadApis succeeds immediately and the
+  // status port connects within flushUi instead of after the ~1s retry loop.
+  const harness = createUiHarness({
+    storageState: { enabled: true },
+    apis: [{ url: TEST_API_URL, type: 'fetch' }],
+  });
+  await flushUi(harness.window);
+
+  harness.emitPortMessage({ type: 'status', tabId: 99, attached: true });
+  const statusEl = harness.document.getElementById('attach-status');
+  assert.equal(statusEl.textContent, 'Intercepting requests');
+  assert.equal(statusEl.classList.contains('attach-status--on'), true);
+
+  harness.emitPortMessage({
+    type: 'status',
+    tabId: 99,
+    attached: false,
+    error: 'Another debugger is already attached',
+  });
+  await flushUi(harness.window);
+  assert.equal(statusEl.textContent, 'Attach failed: Another debugger is already attached');
+  assert.equal(statusEl.classList.contains('attach-status--error'), true);
+  assert.equal(harness.document.getElementById('enable').checked, false);
+  assert.equal(harness.localState.enabled, false);
+});
+
+test('UI queries getStatus on load', async () => {
+  const harness = createUiHarness();
+  await flushUi(harness.window);
+  assert.equal(
+    harness.sentMessages.some(msg => msg.type === 'getStatus'),
+    true
+  );
+});
+
+test('UI unchecks the toggle when getStatus itself reports an attach error', async () => {
+  const harness = createUiHarness({
+    storageState: { enabled: true },
+    statusResponse: {
+      type: 'statusResponse',
+      attached: false,
+      error: 'Cannot access a chrome:// URL',
+    },
+  });
+  await flushUi(harness.window);
+
+  const statusEl = harness.document.getElementById('attach-status');
+  assert.equal(statusEl.textContent, 'Attach failed: Cannot access a chrome:// URL');
+  assert.equal(harness.document.getElementById('enable').checked, false);
+  assert.equal(harness.localState.enabled, false);
+});
+
+test('Import rejects rules with an unknown mode or method', async () => {
+  const harness = createUiHarness({ apis: [], tabUrl: `${TEST_DOMAIN}/` });
+  await flushUi(harness.window);
+
+  selectImportFile(
+    harness,
+    JSON.stringify({
+      version: 1,
+      domain: TEST_DOMAIN,
+      overrides: [{ pattern: 'x', mode: 'yaml', body: '' }],
+    })
+  );
+  await flushUi(harness.window);
+  assert.equal(harness.document.querySelectorAll('.notification-toast--error').length, 1);
+  assert.match(
+    harness.document.querySelector('.notification-toast--error').textContent,
+    /invalid/i
+  );
+  assert.equal(harness.localState.overrides, undefined);
+
+  selectImportFile(
+    harness,
+    JSON.stringify({
+      version: 1,
+      domain: TEST_DOMAIN,
+      overrides: [{ pattern: 'x', mode: 'text', body: '', method: 'TRACE' }],
+    })
+  );
+  await flushUi(harness.window);
+  assert.equal(harness.document.querySelectorAll('.notification-toast--error').length, 1);
+  assert.equal(harness.localState.overrides, undefined);
+});
+
+test('Import normalizes method casing to uppercase', async () => {
+  const harness = createUiHarness({ apis: [], tabUrl: `${TEST_DOMAIN}/` });
+  await flushUi(harness.window);
+
+  selectImportFile(
+    harness,
+    JSON.stringify({
+      version: 1,
+      domain: TEST_DOMAIN,
+      overrides: [{ pattern: 'x', mode: 'text', body: '', method: 'get' }],
+    })
+  );
+  await flushUi(harness.window);
+
+  const saved = harness.storageSets.findLast(set => `overrides_${TEST_DOMAIN}` in set);
+  assert.equal(saved[`overrides_${TEST_DOMAIN}`][0].method, 'GET');
+});
diff --git a/tests/ui-modal-primitives.test.mjs b/tests/ui-modal-primitives.test.mjs
new file mode 100644
index 0000000..ebd5b41
--- /dev/null
+++ b/tests/ui-modal-primitives.test.mjs
@@ -0,0 +1,369 @@
+import test, { after } from 'node:test';
+import assert from 'node:assert/strict';
+import { createUiHarness, flushUi, closeAllUiHarnessWindows } from './test-harness.mjs';
+import { TEST_API_URL, TEST_DOMAIN } from './config.mjs';
+
+// Every createUiHarness() call in this file boots a real jsdom window whose
+// window.setInterval (from ui.ts's init) keeps running until the window is
+// closed. Close them all once, after this file's tests finish, so the
+// process can exit instead of hanging on leaked timers.
+after(() => {
+  closeAllUiHarnessWindows();
+});
+
+function selectImportFile(harness, jsonText) {
+  const file = new harness.window.File([jsonText], 'rules.json', { type: 'application/json' });
+  const input = harness.document.getElementById('import-rules-input');
+  Object.defineProperty(input, 'files', { value: [file], configurable: true });
+  input.dispatchEvent(new harness.window.Event('change', { bubbles: true }));
+}
+
+test('Saving a body override persists status, delay, and extra headers', async () => {
+  const harness = createUiHarness({
+    apis: [{ url: `${TEST_DOMAIN}/api/users`, type: 'fetch', method: 'GET' }],
+    tabUrl: `${TEST_DOMAIN}/`,
+  });
+  await flushUi(harness.window);
+
+  harness.document
+    .querySelector('#apis-list li.api-item')
+    .dispatchEvent(new harness.window.MouseEvent('click', { bubbles: true }));
+  await flushUi(harness.window);
+
+  harness.document.getElementById('modal-body').value = '{"mock":1}';
+  harness.document.getElementById('modal-status').value = '503';
+  harness.document.getElementById('modal-delay').value = '1500';
+  harness.document.getElementById('modal-headers').value =
+    'X-Custom: yes\nContent-Type: text/plain';
+  harness.document
+    .getElementById('save-override')
+    .dispatchEvent(new harness.window.MouseEvent('click', { bubbles: true }));
+  await flushUi(harness.window);
+
+  const saved = harness.storageSets.findLast(set => `overrides_${TEST_DOMAIN}` in set)[
+    `overrides_${TEST_DOMAIN}`
+  ][0];
+  assert.equal(saved.statusCode, 503);
+  assert.equal(saved.delayMs, 1500);
+  assert.deepEqual(saved.responseHeaders, [
+    { name: 'X-Custom', value: 'yes' },
+    { name: 'Content-Type', value: 'text/plain' },
+  ]);
+});
+
+test('Saving a fail rule persists failReason and delay with an empty body', async () => {
+  const harness = createUiHarness({ apis: [], tabUrl: `${TEST_DOMAIN}/` });
+  await flushUi(harness.window);
+
+  harness.document
+    .getElementById('add-api-btn')
+    .dispatchEvent(new harness.window.MouseEvent('click', { bubbles: true }));
+  await flushUi(harness.window);
+
+  harness.document.getElementById('modal-pattern').value = 'api/fail';
+  const failRadio = harness.document.querySelector(
+    'input[name="modal-override-type"][value="fail"]'
+  );
+  failRadio.checked = true;
+  failRadio.dispatchEvent(new harness.window.Event('change', { bubbles: true }));
+  harness.document.getElementById('modal-fail-reason').value = 'TimedOut';
+  harness.document.getElementById('modal-delay').value = '2000';
+  harness.document
+    .getElementById('save-override')
+    .dispatchEvent(new harness.window.MouseEvent('click', { bubbles: true }));
+  await flushUi(harness.window);
+
+  const saved = harness.storageSets.findLast(set => `overrides_${TEST_DOMAIN}` in set)[
+    `overrides_${TEST_DOMAIN}`
+  ][0];
+  assert.equal(saved.failReason, 'TimedOut');
+  assert.equal(saved.delayMs, 2000);
+  assert.equal(saved.body, '');
+  assert.equal(saved.redirectUrl, undefined);
+  assert.equal(saved.statusCode, undefined);
+});
+
+test('Modal save rejects out-of-range status and delay and malformed header lines', async () => {
+  const harness = createUiHarness({
+    apis: [{ url: `${TEST_DOMAIN}/api/users`, type: 'fetch' }],
+    tabUrl: `${TEST_DOMAIN}/`,
+  });
+  await flushUi(harness.window);
+
+  harness.document
+    .querySelector('#apis-list li.api-item')
+    .dispatchEvent(new harness.window.MouseEvent('click', { bubbles: true }));
+  await flushUi(harness.window);
+
+  const save = () =>
+    harness.document
+      .getElementById('save-override')
+      .dispatchEvent(new harness.window.MouseEvent('click', { bubbles: true }));
+
+  harness.document.getElementById('modal-status').value = '99';
+  save();
+  await flushUi(harness.window);
+  assert.match(harness.document.getElementById('modal-feedback').textContent, /status/i);
+  assert.equal(
+    harness.document.getElementById('modal-status').getAttribute('aria-invalid'),
+    'true'
+  );
+
+  harness.document.getElementById('modal-status').value = '';
+  harness.document.getElementById('modal-delay').value = '-5';
+  save();
+  await flushUi(harness.window);
+  assert.match(harness.document.getElementById('modal-feedback').textContent, /delay/i);
+  assert.equal(harness.document.getElementById('modal-delay').getAttribute('aria-invalid'), 'true');
+
+  harness.document.getElementById('modal-delay').value = '';
+  harness.document.getElementById('modal-headers').value = 'no colon here';
+  save();
+  await flushUi(harness.window);
+  assert.match(harness.document.getElementById('modal-feedback').textContent, /header/i);
+  assert.equal(
+    harness.document.getElementById('modal-headers').getAttribute('aria-invalid'),
+    'true'
+  );
+  assert.equal(harness.alerts.length, 0);
+
+  const saved = harness.storageSets.find(set => `overrides_${TEST_DOMAIN}` in set);
+  assert.equal(saved, undefined); // nothing was persisted
+});
+
+test('Modal keeps the editor open and explains storage failures', async () => {
+  const harness = createUiHarness({
+    apis: [{ url: `${TEST_DOMAIN}/api/users`, type: 'fetch' }],
+    tabUrl: `${TEST_DOMAIN}/`,
+    storageSetError: 'Storage quota exceeded',
+  });
+  await flushUi(harness.window);
+
+  harness.document
+    .querySelector('#apis-list li.api-item')
+    .dispatchEvent(new harness.window.MouseEvent('click', { bubbles: true }));
+  await flushUi(harness.window);
+
+  const saveButton = harness.document.getElementById('save-override');
+  saveButton.dispatchEvent(new harness.window.MouseEvent('click', { bubbles: true }));
+  assert.equal(saveButton.disabled, true);
+  assert.equal(saveButton.textContent, 'Saving…');
+  await flushUi(harness.window);
+
+  assert.equal(harness.document.getElementById('override-modal').style.display, 'block');
+  assert.match(harness.document.getElementById('modal-feedback').textContent, /quota exceeded/i);
+  assert.equal(saveButton.disabled, false);
+  assert.equal(saveButton.textContent, 'Save');
+  assert.equal(harness.localState.overrides, undefined);
+});
+
+test('Modal distinguishes saved rules from background apply failures', async () => {
+  const harness = createUiHarness({
+    apis: [{ url: `${TEST_DOMAIN}/api/users`, type: 'fetch' }],
+    tabUrl: `${TEST_DOMAIN}/`,
+    backgroundUpdateResponse: {
+      success: false,
+      error: 'Another debugger is already attached',
+    },
+  });
+  await flushUi(harness.window);
+
+  harness.document
+    .querySelector('#apis-list li.api-item')
+    .dispatchEvent(new harness.window.MouseEvent('click', { bubbles: true }));
+  await flushUi(harness.window);
+  harness.document
+    .getElementById('save-override')
+    .dispatchEvent(new harness.window.MouseEvent('click', { bubbles: true }));
+  await flushUi(harness.window);
+
+  assert.equal(harness.document.getElementById('override-modal').style.display, 'none');
+  assert.equal(harness.localState.overrides.length, 1);
+  const warning = harness.document.querySelector('.notification-toast--warning');
+  assert.match(warning.textContent, /saved/i);
+  assert.match(warning.textContent, /debugger/i);
+});
+
+test('Editing a fail rule pre-fills the fail type, reason, and delay', async () => {
+  const harness = createUiHarness({
+    storageState: {
+      overrides: [
+        {
+          pattern: 'api/fail',
+          body: '',
+          mode: 'text',
+          failReason: 'ConnectionRefused',
+          delayMs: 500,
+        },
+      ],
+    },
+    apis: [],
+    tabUrl: `${TEST_DOMAIN}/`,
+  });
+  await flushUi(harness.window);
+
+  harness.document
+    .querySelector('[data-tab="overrides"]')
+    .dispatchEvent(new harness.window.MouseEvent('click', { bubbles: true }));
+  await flushUi(harness.window);
+  harness.document
+    .querySelector('.edit-btn')
+    .dispatchEvent(new harness.window.MouseEvent('click', { bubbles: true }));
+  await flushUi(harness.window);
+
+  assert.equal(
+    harness.document.querySelector('input[name="modal-override-type"][value="fail"]').checked,
+    true
+  );
+  assert.equal(harness.document.getElementById('modal-fail-reason').value, 'ConnectionRefused');
+  assert.equal(harness.document.getElementById('modal-delay').value, '500');
+  assert.equal(harness.document.getElementById('modal-fail-fields').style.display, '');
+});
+
+test('Rules list shows status, delay, and FAIL badges', async () => {
+  const harness = createUiHarness({
+    storageState: {
+      overrides: [
+        { pattern: 'a', body: '{}', mode: 'text', statusCode: 500, delayMs: 3000 },
+        { pattern: 'b', body: '', mode: 'text', failReason: 'TimedOut' },
+      ],
+    },
+    apis: [],
+    tabUrl: `${TEST_DOMAIN}/`,
+  });
+  await flushUi(harness.window);
+  harness.document
+    .querySelector('[data-tab="overrides"]')
+    .dispatchEvent(new harness.window.MouseEvent('click', { bubbles: true }));
+  await flushUi(harness.window);
+
+  const items = harness.document.querySelectorAll('#list .override-item');
+  assert.equal(items[0].querySelector('.override-status-badge').textContent, '500');
+  assert.equal(items[0].querySelector('.override-delay-badge').textContent, '⏱ 3000ms');
+  const failBadge = items[1].querySelector('.override-fail-badge');
+  assert.equal(failBadge.textContent, 'FAIL');
+  assert.equal(failBadge.title, 'TimedOut');
+});
+
+test('Import rejects invalid mock-power fields', async () => {
+  const harness = createUiHarness({ apis: [], tabUrl: `${TEST_DOMAIN}/` });
+  await flushUi(harness.window);
+
+  const attempts = [
+    { pattern: 'x', mode: 'text', body: '', statusCode: 99 },
+    { pattern: 'x', mode: 'text', body: '', statusCode: 'abc' },
+    { pattern: 'x', mode: 'text', body: '', delayMs: -1 },
+    { pattern: 'x', mode: 'text', body: '', delayMs: 999999 },
+    { pattern: 'x', mode: 'text', body: '', responseHeaders: [{ name: '', value: 'v' }] },
+    { pattern: 'x', mode: 'text', body: '', responseHeaders: 'not-an-array' },
+    { pattern: 'x', mode: 'text', body: '', failReason: 'Nope' },
+    { pattern: 'x', mode: 'text', body: '', failReason: 'Failed', redirectUrl: 'https://a.test/' },
+  ];
+  for (const rule of attempts) {
+    selectImportFile(
+      harness,
+      JSON.stringify({ version: 1, domain: TEST_DOMAIN, overrides: [rule] })
+    );
+    await flushUi(harness.window);
+  }
+  assert.equal(harness.document.querySelectorAll('.notification-toast--error').length, 1);
+  assert.equal(
+    harness.storageSets.find(set => `overrides_${TEST_DOMAIN}` in set),
+    undefined
+  );
+});
+
+test('Import keeps valid mock-power fields on the cleaned rule', async () => {
+  const harness = createUiHarness({ apis: [], tabUrl: `${TEST_DOMAIN}/` });
+  await flushUi(harness.window);
+
+  selectImportFile(
+    harness,
+    JSON.stringify({
+      version: 1,
+      domain: TEST_DOMAIN,
+      overrides: [
+        {
+          pattern: 'users',
+          mode: 'text',
+          body: '{}',
+          statusCode: 503,
+          delayMs: 1500,
+          responseHeaders: [{ name: 'X-Custom', value: 'yes' }],
+        },
+        { pattern: 'fail', mode: 'text', body: '', failReason: 'TimedOut' },
+      ],
+    })
+  );
+  await flushUi(harness.window);
+
+  assert.equal(harness.alerts.length, 0);
+  const rules = harness.storageSets.findLast(set => `overrides_${TEST_DOMAIN}` in set)[
+    `overrides_${TEST_DOMAIN}`
+  ];
+  assert.deepEqual(rules[0], {
+    pattern: 'users',
+    mode: 'text',
+    body: '{}',
+    statusCode: 503,
+    delayMs: 1500,
+    responseHeaders: [{ name: 'X-Custom', value: 'yes' }],
+  });
+  assert.deepEqual(rules[1], {
+    pattern: 'fail',
+    mode: 'text',
+    body: '',
+    failReason: 'TimedOut',
+  });
+});
+
+test('Duplicating a rule creates an exact copy in storage and UI', async () => {
+  const harness = createUiHarness({
+    storageState: {
+      enabled: true,
+      overrides: [{ pattern: 'users', body: '{"ok":1}', mode: 'text' }],
+    },
+  });
+
+  await flushUi(harness.window);
+
+  harness.document
+    .querySelector('[data-tab="overrides"]')
+    .dispatchEvent(new harness.window.MouseEvent('click', { bubbles: true }));
+  await flushUi(harness.window);
+
+  const dupBtn = harness.document.querySelector('.duplicate-btn');
+  assert.ok(dupBtn, 'Duplicate button must exist');
+  dupBtn.dispatchEvent(new harness.window.MouseEvent('click', { bubbles: true }));
+  await flushUi(harness.window);
+
+  const rules = harness.localState.overrides;
+  assert.equal(rules.length, 2);
+  assert.deepEqual(rules[0], rules[1]);
+});
+
+test('Saving a body override with requestHeaders persists requestHeaders', async () => {
+  const harness = createUiHarness({ apis: [{ url: TEST_API_URL, type: 'Fetch' }] });
+
+  await flushUi(harness.window);
+
+  const apiItem = harness.document.querySelector('.api-item');
+  assert.ok(apiItem, 'api-item must exist');
+  apiItem.dispatchEvent(new harness.window.MouseEvent('click', { bubbles: true }));
+  await flushUi(harness.window);
+
+  const reqHeadersTextarea = harness.document.getElementById('modal-request-headers');
+  assert.ok(reqHeadersTextarea, 'modal-request-headers element must exist');
+  reqHeadersTextarea.value = 'Authorization: Bearer my-secret-token';
+
+  harness.document
+    .getElementById('save-override')
+    .dispatchEvent(new harness.window.MouseEvent('click', { bubbles: true }));
+  await flushUi(harness.window);
+
+  const savedRules = harness.localState.overrides;
+  assert.equal(savedRules.length, 1);
+  assert.deepEqual(savedRules[0].requestHeaders, [
+    { name: 'Authorization', value: 'Bearer my-secret-token' },
+  ]);
+});
diff --git a/tests/ui-notifications.test.mjs b/tests/ui-notifications.test.mjs
new file mode 100644
index 0000000..ecaecf0
--- /dev/null
+++ b/tests/ui-notifications.test.mjs
@@ -0,0 +1,110 @@
+import test, { after } from 'node:test';
+import assert from 'node:assert/strict';
+import { createUiHarness, flushUi, closeAllUiHarnessWindows } from './test-harness.mjs';
+
+after(() => {
+  closeAllUiHarnessWindows();
+});
+
+test('Shared notifications expose semantic success, warning, and error states', async () => {
+  const harness = createUiHarness();
+  await flushUi(harness.window);
+  const ui = harness.window.NetworkOverridesUi;
+
+  ui.showNotification('Saved successfully', 'success', 0);
+  ui.showNotification('Apply warning', 'warning', 0);
+  ui.showNotification('Storage failed', 'error', 0);
+
+  const toasts = harness.document.querySelectorAll('.notification-toast');
+  assert.equal(toasts.length, 3);
+  assert.equal(toasts[0].getAttribute('role'), 'status');
+  assert.equal(toasts[2].getAttribute('role'), 'alert');
+  assert.equal(toasts[2].dataset.kind, 'error');
+
+  toasts[2]
+    .querySelector('.notification-toast__close')
+    .dispatchEvent(new harness.window.MouseEvent('click', { bubbles: true }));
+  assert.equal(harness.document.querySelectorAll('.notification-toast').length, 2);
+});
+
+test('Persistence notifications distinguish applied rules from saved-only rules', async () => {
+  const harness = createUiHarness();
+  await flushUi(harness.window);
+  const ui = harness.window.NetworkOverridesUi;
+
+  ui.showPersistenceNotification('Override saved', { applied: true });
+  ui.showPersistenceNotification('Override saved', {
+    applied: false,
+    warning: 'Debugger unavailable',
+  });
+
+  assert.match(
+    harness.document.querySelector('.notification-toast--success').textContent,
+    /applied to the active tab/i
+  );
+  assert.match(
+    harness.document.querySelector('.notification-toast--warning').textContent,
+    /debugger unavailable/i
+  );
+});
+
+test('Notifications deduplicate repeated messages and keep only the three newest', async () => {
+  const harness = createUiHarness();
+  await flushUi(harness.window);
+  const ui = harness.window.NetworkOverridesUi;
+
+  ui.showNotification('Repeated', 'error', 0);
+  ui.showNotification('Repeated', 'error', 0);
+  ui.showNotification('Second', 'info', 0);
+  ui.showNotification('Third', 'warning', 0);
+  ui.showNotification('Fourth', 'success', 0);
+
+  const messages = Array.from(harness.document.querySelectorAll('.notification-toast')).map(
+    toast => toast.dataset.message
+  );
+  assert.deepEqual(messages, ['Second', 'Third', 'Fourth']);
+});
+
+test('A saved-only notification can retry applying interception', async () => {
+  const harness = createUiHarness();
+  await flushUi(harness.window);
+  let retryCount = 0;
+
+  harness.window.NetworkOverridesUi.showPersistenceNotification('Override saved', {
+    applied: false,
+    warning: 'Debugger unavailable',
+    retry: async () => {
+      retryCount += 1;
+    },
+  });
+  harness.document
+    .querySelector('.notification-toast__action')
+    .dispatchEvent(new harness.window.MouseEvent('click', { bubbles: true }));
+  await flushUi(harness.window);
+
+  assert.equal(retryCount, 1);
+  assert.match(
+    harness.document.querySelector('.notification-toast--success').textContent,
+    /interception updated/i
+  );
+});
+
+test('Shared prompt dialog validates input and resolves from the keyboard', async () => {
+  const harness = createUiHarness();
+  await flushUi(harness.window);
+  const pending = harness.window.NetworkOverridesUi.showPromptDialog(
+    'Save profile',
+    'Choose a profile name.',
+    'Profile name'
+  );
+  await flushUi(harness.window);
+  const input = harness.document.querySelector('.ui-dialog input');
+
+  input.dispatchEvent(new harness.window.KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+  assert.equal(input.getAttribute('aria-invalid'), 'true');
+  input.value = 'Error Flow';
+  input.dispatchEvent(new harness.window.KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+
+  assert.equal(await pending, 'Error Flow');
+  assert.equal(harness.document.querySelector('.ui-dialog'), null);
+});
diff --git a/tests/ui-rules-io.test.mjs b/tests/ui-rules-io.test.mjs
new file mode 100644
index 0000000..deac908
--- /dev/null
+++ b/tests/ui-rules-io.test.mjs
@@ -0,0 +1,422 @@
+import test, { after } from 'node:test';
+import assert from 'node:assert/strict';
+import { createUiHarness, flushUi, closeAllUiHarnessWindows } from './test-harness.mjs';
+import { TEST_API_URL, TEST_DOMAIN } from './config.mjs';
+
+// Every createUiHarness() call in this file boots a real jsdom window whose
+// window.setInterval (from ui.ts's init) keeps running until the window is
+// closed. Close them all once, after this file's tests finish, so the
+// process can exit instead of hanging on leaked timers.
+after(() => {
+  closeAllUiHarnessWindows();
+});
+
+test('Export builds the documented JSON envelope and triggers a download', async () => {
+  const harness = createUiHarness({
+    storageState: {
+      enabled: true,
+      overrides: [{ pattern: 'users', body: '{"ok":true}', mode: 'text' }],
+    },
+    apis: [],
+    tabUrl: `${TEST_DOMAIN}/`,
+  });
+
+  await flushUi(harness.window);
+
+  harness.document
+    .querySelector('[data-tab="overrides"]')
+    .dispatchEvent(new harness.window.MouseEvent('click', { bubbles: true }));
+  await flushUi(harness.window);
+
+  harness.document
+    .getElementById('export-rules-btn')
+    .dispatchEvent(new harness.window.MouseEvent('click', { bubbles: true }));
+  await flushUi(harness.window);
+
+  assert.equal(harness.downloads.length, 1);
+  const exported = JSON.parse(harness.downloads[0].content);
+  assert.equal(exported.version, 1);
+  assert.equal(exported.domain, TEST_DOMAIN);
+  assert.equal(typeof exported.exportedAt, 'string');
+  assert.deepEqual(exported.overrides, [{ pattern: 'users', body: { ok: true }, mode: 'text' }]);
+});
+
+test('Export compacts pretty-printed JSON bodies and leaves non-JSON bodies untouched', async () => {
+  const harness = createUiHarness({
+    storageState: {
+      enabled: true,
+      overrides: [
+        {
+          pattern: 'users',
+          body: '{\n  "ok": true,\n  "items": [\n    1,\n    2\n  ]\n}',
+          mode: 'text',
+        },
+        { pattern: 'plain', body: 'not json\nwith a newline', mode: 'text' },
+      ],
+    },
+    apis: [],
+    tabUrl: `${TEST_DOMAIN}/`,
+  });
+
+  await flushUi(harness.window);
+  harness.document
+    .querySelector('[data-tab="overrides"]')
+    .dispatchEvent(new harness.window.MouseEvent('click', { bubbles: true }));
+  await flushUi(harness.window);
+
+  harness.document
+    .getElementById('export-rules-btn')
+    .dispatchEvent(new harness.window.MouseEvent('click', { bubbles: true }));
+  await flushUi(harness.window);
+
+  const exported = JSON.parse(harness.downloads[0].content);
+  // JSON bodies are exported as real nested JSON (no escaped-string noise)
+  assert.deepEqual(exported.overrides[0].body, { ok: true, items: [1, 2] });
+  // non-JSON bodies must survive byte-for-byte
+  assert.equal(exported.overrides[1].body, 'not json\nwith a newline');
+  // the stored rules themselves must not be rewritten by exporting
+  assert.match(harness.localState.overrides[0].body, /\n/);
+});
+
+test('Import accepts a nested JSON body and stores it as a string rule body', async () => {
+  const harness = createUiHarness({ apis: [], tabUrl: `${TEST_DOMAIN}/` });
+  await flushUi(harness.window);
+
+  selectImportFile(
+    harness,
+    JSON.stringify({
+      version: 1,
+      domain: TEST_DOMAIN,
+      overrides: [
+        { pattern: 'users', mode: 'text', body: { ok: true, items: [1, 2] } },
+        { pattern: 'plain', mode: 'text', body: 'raw text' },
+      ],
+    })
+  );
+  await flushUi(harness.window);
+
+  assert.equal(harness.alerts.length, 0);
+  const saved = harness.storageSets.findLast(set => `overrides_${TEST_DOMAIN}` in set);
+  const rules = saved[`overrides_${TEST_DOMAIN}`];
+  assert.equal(rules[0].body, '{"ok":true,"items":[1,2]}');
+  assert.equal(rules[1].body, 'raw text');
+});
+
+test('Export shows an error notification and skips download when Blob construction fails', async () => {
+  const harness = createUiHarness({
+    storageState: {
+      enabled: true,
+      overrides: [{ pattern: 'users', body: '{"ok":true}', mode: 'text' }],
+    },
+    apis: [],
+    tabUrl: `${TEST_DOMAIN}/`,
+  });
+
+  await flushUi(harness.window);
+
+  harness.document
+    .querySelector('[data-tab="overrides"]')
+    .dispatchEvent(new harness.window.MouseEvent('click', { bubbles: true }));
+  await flushUi(harness.window);
+
+  const OriginalBlob = harness.window.Blob;
+  harness.window.Blob = function BrokenBlob() {
+    throw new Error('Blob construction boom');
+  };
+
+  try {
+    harness.document
+      .getElementById('export-rules-btn')
+      .dispatchEvent(new harness.window.MouseEvent('click', { bubbles: true }));
+    await flushUi(harness.window);
+
+    assert.equal(harness.downloads.length, 0);
+    assert.equal(harness.document.querySelectorAll('.notification-toast--error').length, 1);
+    assert.match(
+      harness.document.querySelector('.notification-toast--error').textContent,
+      /Failed to export rules/
+    );
+  } finally {
+    harness.window.Blob = OriginalBlob;
+  }
+});
+
+function selectImportFile(harness, jsonText) {
+  const file = new harness.window.File([jsonText], 'rules.json', { type: 'application/json' });
+  const input = harness.document.getElementById('import-rules-input');
+  Object.defineProperty(input, 'files', { value: [file], configurable: true });
+  input.dispatchEvent(new harness.window.Event('change', { bubbles: true }));
+}
+
+function clickDialog(harness, selector, inputValue) {
+  if (inputValue !== undefined) {
+    const input = harness.document.querySelector('.ui-dialog input');
+    input.value = inputValue;
+  }
+  harness.document
+    .querySelector(selector)
+    .dispatchEvent(new harness.window.MouseEvent('click', { bubbles: true }));
+}
+
+test('Import appends when Append rules is selected', async () => {
+  const harness = createUiHarness({
+    storageState: {
+      enabled: true,
+      overrides: [{ pattern: 'existing', body: '{}', mode: 'text' }],
+    },
+    apis: [],
+    tabUrl: `${TEST_DOMAIN}/`,
+  });
+
+  await flushUi(harness.window);
+  harness.document
+    .querySelector('[data-tab="overrides"]')
+    .dispatchEvent(new harness.window.MouseEvent('click', { bubbles: true }));
+  await flushUi(harness.window);
+
+  selectImportFile(
+    harness,
+    JSON.stringify({
+      version: 1,
+      domain: TEST_DOMAIN,
+      exportedAt: '2026-01-01T00:00:00.000Z',
+      overrides: [{ pattern: 'imported', body: '{}', mode: 'text' }],
+    })
+  );
+  await flushUi(harness.window);
+  clickDialog(harness, '[data-dialog-action="primary"]');
+  await flushUi(harness.window);
+
+  assert.equal(harness.localState.overrides.length, 2);
+  assert.equal(harness.localState.overrides[0].pattern, 'existing');
+  assert.equal(harness.localState.overrides[1].pattern, 'imported');
+});
+
+test('Import replaces when Replace rules is selected', async () => {
+  const harness = createUiHarness({
+    storageState: {
+      enabled: true,
+      overrides: [{ pattern: 'existing', body: '{}', mode: 'text' }],
+    },
+    apis: [],
+    tabUrl: `${TEST_DOMAIN}/`,
+  });
+
+  await flushUi(harness.window);
+  harness.document
+    .querySelector('[data-tab="overrides"]')
+    .dispatchEvent(new harness.window.MouseEvent('click', { bubbles: true }));
+  await flushUi(harness.window);
+
+  selectImportFile(
+    harness,
+    JSON.stringify({
+      version: 1,
+      domain: TEST_DOMAIN,
+      exportedAt: '2026-01-01T00:00:00.000Z',
+      overrides: [{ pattern: 'imported', body: '{}', mode: 'text' }],
+    })
+  );
+  await flushUi(harness.window);
+  clickDialog(harness, '[data-dialog-action="secondary"]');
+  await flushUi(harness.window);
+
+  assert.deepEqual(harness.localState.overrides, [
+    { pattern: 'imported', body: '{}', mode: 'text' },
+  ]);
+});
+
+test('Import shows a notification and makes no changes when the file is not valid JSON', async () => {
+  const harness = createUiHarness({
+    storageState: { enabled: true, overrides: [{ pattern: 'existing', body: '{}', mode: 'text' }] },
+    apis: [],
+  });
+
+  await flushUi(harness.window);
+  harness.document
+    .querySelector('[data-tab="overrides"]')
+    .dispatchEvent(new harness.window.MouseEvent('click', { bubbles: true }));
+  await flushUi(harness.window);
+
+  selectImportFile(harness, 'not json');
+  await flushUi(harness.window);
+
+  assert.equal(harness.localState.overrides.length, 1);
+  assert.equal(harness.localState.overrides[0].pattern, 'existing');
+  assert.equal(harness.document.querySelectorAll('.notification-toast--error').length, 1);
+});
+
+test('Import shows a notification and makes no changes when a rule has a non-string method', async () => {
+  const harness = createUiHarness({
+    storageState: { enabled: true, overrides: [{ pattern: 'existing', body: '{}', mode: 'text' }] },
+    apis: [],
+  });
+
+  await flushUi(harness.window);
+  harness.document
+    .querySelector('[data-tab="overrides"]')
+    .dispatchEvent(new harness.window.MouseEvent('click', { bubbles: true }));
+  await flushUi(harness.window);
+
+  selectImportFile(
+    harness,
+    JSON.stringify({
+      version: 1,
+      domain: TEST_DOMAIN,
+      exportedAt: '2026-01-01T00:00:00.000Z',
+      overrides: [{ pattern: 'imported', body: '{}', mode: 'text', method: 123 }],
+    })
+  );
+  await flushUi(harness.window);
+
+  assert.equal(harness.localState.overrides.length, 1);
+  assert.equal(harness.localState.overrides[0].pattern, 'existing');
+  assert.equal(harness.document.querySelectorAll('.notification-toast--error').length, 1);
+});
+
+test('Import shows a notification and makes no changes when an "overrides" entry is not an object', async () => {
+  const harness = createUiHarness({
+    storageState: { enabled: true, overrides: [{ pattern: 'existing', body: '{}', mode: 'text' }] },
+    apis: [],
+  });
+
+  await flushUi(harness.window);
+  harness.document
+    .querySelector('[data-tab="overrides"]')
+    .dispatchEvent(new harness.window.MouseEvent('click', { bubbles: true }));
+  await flushUi(harness.window);
+
+  selectImportFile(
+    harness,
+    JSON.stringify({
+      version: 1,
+      domain: TEST_DOMAIN,
+      exportedAt: '2026-01-01T00:00:00.000Z',
+      overrides: [null],
+    })
+  );
+  await flushUi(harness.window);
+
+  assert.equal(harness.localState.overrides.length, 1);
+  assert.equal(harness.localState.overrides[0].pattern, 'existing');
+  assert.equal(harness.document.querySelectorAll('.notification-toast--error').length, 1);
+});
+
+test('Import with no existing rules writes them directly and never prompts to merge or replace', async () => {
+  const harness = createUiHarness({
+    storageState: { enabled: true, overrides: [] },
+    apis: [],
+    tabUrl: `${TEST_DOMAIN}/`,
+  });
+
+  await flushUi(harness.window);
+  harness.document
+    .querySelector('[data-tab="overrides"]')
+    .dispatchEvent(new harness.window.MouseEvent('click', { bubbles: true }));
+  await flushUi(harness.window);
+
+  selectImportFile(
+    harness,
+    JSON.stringify({
+      version: 1,
+      domain: TEST_DOMAIN,
+      exportedAt: '2026-01-01T00:00:00.000Z',
+      overrides: [{ pattern: 'imported', body: '{}', mode: 'text' }],
+    })
+  );
+  await flushUi(harness.window);
+
+  assert.deepEqual(harness.localState.overrides, [
+    { pattern: 'imported', body: '{}', mode: 'text' },
+  ]);
+  assert.equal(harness.confirms.length, 0);
+});
+
+test('Import strips unknown fields from rule objects, keeping only known OverrideRule fields', async () => {
+  const harness = createUiHarness({
+    storageState: { enabled: true, overrides: [] },
+    apis: [],
+    tabUrl: `${TEST_DOMAIN}/`,
+  });
+
+  await flushUi(harness.window);
+  harness.document
+    .querySelector('[data-tab="overrides"]')
+    .dispatchEvent(new harness.window.MouseEvent('click', { bubbles: true }));
+  await flushUi(harness.window);
+
+  selectImportFile(
+    harness,
+    JSON.stringify({
+      version: 1,
+      domain: TEST_DOMAIN,
+      exportedAt: '2026-01-01T00:00:00.000Z',
+      overrides: [
+        {
+          pattern: 'imported',
+          body: '{}',
+          mode: 'text',
+          method: 'POST',
+          enabled: false,
+          redirectUrl: 'https://example.com/new',
+          notAKnownField: 'should be dropped',
+        },
+      ],
+    })
+  );
+  await flushUi(harness.window);
+
+  assert.deepEqual(harness.localState.overrides, [
+    {
+      pattern: 'imported',
+      body: '{}',
+      mode: 'text',
+      method: 'POST',
+      enabled: false,
+      redirectUrl: 'https://example.com/new',
+    },
+  ]);
+});
+
+test('Rule profiles report save and delete outcomes through shared notifications', async () => {
+  const harness = createUiHarness({
+    storageState: {
+      overrides: [{ pattern: 'users', body: '{}', mode: 'text' }],
+    },
+    tabUrl: `${TEST_DOMAIN}/`,
+  });
+  await flushUi(harness.window);
+
+  harness.document
+    .getElementById('save-profile-btn')
+    .dispatchEvent(new harness.window.MouseEvent('click', { bubbles: true }));
+  await flushUi(harness.window);
+  clickDialog(harness, '[data-dialog-action="primary"]', 'Error Flow');
+  await flushUi(harness.window);
+
+  const profileKey = `rule_profiles_${TEST_DOMAIN}`;
+  assert.deepEqual(harness.localState[profileKey]['Error Flow'], [
+    { pattern: 'users', body: '{}', mode: 'text' },
+  ]);
+  assert.match(
+    harness.document.querySelector('.notification-toast--success').textContent,
+    /profile.*saved/i
+  );
+
+  harness.document.getElementById('profiles-select').value = 'Error Flow';
+  harness.document
+    .getElementById('delete-profile-btn')
+    .dispatchEvent(new harness.window.MouseEvent('click', { bubbles: true }));
+  await flushUi(harness.window);
+  clickDialog(harness, '[data-dialog-action="primary"]');
+  await flushUi(harness.window);
+
+  assert.equal(harness.localState[profileKey]['Error Flow'], undefined);
+  const successMessages = Array.from(
+    harness.document.querySelectorAll('.notification-toast--success')
+  ).map(item => item.textContent);
+  assert.equal(
+    successMessages.some(message => /profile.*deleted/i.test(message)),
+    true
+  );
+});
diff --git a/tests/ui-shell.test.mjs b/tests/ui-shell.test.mjs
new file mode 100644
index 0000000..3f67fc3
--- /dev/null
+++ b/tests/ui-shell.test.mjs
@@ -0,0 +1,16 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import fs from 'node:fs';
+import { JSDOM } from 'jsdom';
+
+function sharedBodyMarkup(filename) {
+  const dom = new JSDOM(fs.readFileSync(filename, 'utf8'));
+  const { body } = dom.window.document;
+  body.removeAttribute('class');
+  body.querySelector('script[src="dist/popup.js"], script[src="dist/panel.js"]')?.remove();
+  return body.innerHTML.trim();
+}
+
+test('Popup and DevTools panel keep the same shared controls and labels', () => {
+  assert.equal(sharedBodyMarkup('popup.html'), sharedBodyMarkup('panel.html'));
+});