Merge branch 'master' into production

Author: dinex-dev

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,69 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: "[BUG]"
+labels: bug
+assignees: ''
+type: Bug
+
+---
+
+## Summary
+<!-- Briefly describe the issue -->
+
+## Environment
+
+| Field | Value |
+|---------|---------|
+| Requestly Version | |
+| Browser / App | |
+| OS | |
+
+## Steps to Reproduce
+
+1.
+2.
+3.
+
+## Expected Result
+
+<!-- What should have happened? -->
+
+## Actual Result
+
+<!-- What happened instead? -->
+
+## Interception Configuration
+
+### Rule Details
+Rule Type:
+  - [ ] Redirect Request
+  - [ ] Modify Request Headers
+  - [ ] Modify Response Headers
+  - [ ] Modify Request Body
+  - [ ] Modify API Response
+  - [ ] Delay Request
+  - [ ] Block Request
+  - [ ] Insert Script
+  - [ ] Other
+
+## Logs & Evidence
+
+### Console Errors
+```text
+Paste console errors here
+```
+
+### Network Logs
+```text
+Paste request/response details here
+```
+
+### Screenshots / Recordings
+<!-- Attach screenshots, videos, HAR files, or Requestly rule export -->
+
+## Workaround
+<!-- Any temporary workaround available? -->
+
+## Additional Notes
+<!-- Any other context that may help debugging -->

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,33 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: "[Feature Request]"
+labels: enhancement, type:feature
+assignees: ''
+type: Feature
+
+---
+
+## Summary
+<!-- Briefly describe the requested feature -->
+
+## Problem Statement
+
+<!-- What problem are you trying to solve? -->
+
+## Use Case
+
+<!-- Describe the real-world workflow or testing scenario -->
+
+## Proposed Solution
+
+<!-- Describe the desired functionality -->
+
+
+## Alternatives Considered
+
+<!-- Existing workarounds or competing solutions -->
+
+## Additional Context
+
+<!-- Screenshots, examples, links, references, related issues -->

app/src/config/constants/compatibility.js

@@ -184,7 +184,7 @@ export const FEATURE_COMPATIBLE_VERSION = {
   [FEATURES.COMPATIBLE_DESKTOP_APP]: {
     [GLOBAL_CONSTANTS.APP_MODES.DESKTOP]: {
       macOS: "25.5.20",
-      Windows: "25.6.25",
+      Windows: "26.6.8",
       Linux: "1.4.20",
     },
     [GLOBAL_CONSTANTS.APP_MODES.EXTENSION]: null,
@@ -193,7 +193,7 @@ export const FEATURE_COMPATIBLE_VERSION = {
   [FEATURES.NON_BREAKING_DESKTOP_APP]: {
     [GLOBAL_CONSTANTS.APP_MODES.DESKTOP]: {
       macOS: "25.5.20",
-      Windows: "25.6.25",
+      Windows: "26.6.8",
       Linux: "1.4.20",
     },
     [GLOBAL_CONSTANTS.APP_MODES.EXTENSION]: null,

browser-extension/common/claude.md

@@ -0,0 +1,81 @@
+Shared code used by the MV3 browser extension (and previously MV2, now deprecated). Contains the storage abstraction layer, popup UI, devtools panel, custom elements (in-page widgets), and shared constants/types.
+
+# Code Organization
+
+## Core Modules (`src/`)
+
+- **`storage.ts`** — Abstraction over `chrome.storage.local`. Provides CRUD operations (`saveRecord`, `getRecord`, `removeRecord`, `getAllRecords`) and a reactive change listener (`onRecordChange`) with filtering by change type, key, and value. All extension storage access should go through this module.
+- **`rulesStore.ts`** — Rule/group retrieval layer built on top of `storage.ts`. Provides `getRules`, `getGroups`, `getEnabledRules` (filters by status and group status), `onRuleOrGroupChange` (reactive listener that only fires on meaningful changes).
+- **`constants.ts`** — Message action constants (`EXTENSION_MESSAGES`, `CLIENT_MESSAGES`, `APP_MESSAGES`), storage keys, rule title mappings, and the `PUBLIC_NAMESPACE` (`__REQUESTLY__`).
+- **`types.ts`** — Core extension types: `Rule`, `Group`, `RuleType`, `ObjectType`, `Status`, `SourceOperator`, `SourceKey`, DNR-related types (`UpdateDynamicRuleOptions`).
+- **`config.ts`** — Runtime config (log level).
+- **`eventUtils.ts`** — Event tracking utility helpers.
+- **`utils.ts`** — General-purpose utility functions.
+
+## Popup (`src/popup/`)
+
+The extension popup UI — a standalone React app (Ant Design dark theme) rendered in the popup window.
+
+- Entry point: `index.tsx` — Renders `<Popup>` inside `RecordsProvider` and Ant Design `ConfigProvider`.
+- **`components/Popup/`** — Main popup component with header and tab navigation.
+- **`components/PopupTabs/`** — Tab navigation (recent rules, pinned rules, executed rules, session recording).
+- **`components/ExecutedRules/`** — Shows rules that fired on the current tab.
+- **`components/RecentRecords/`**, **`PinnedRecords/`** — Rule lists with pin/unpin actions.
+- **`components/SessionRecording/`** — Session recording controls.
+- **`components/ApiClientContainer/`** — API client entry point in popup.
+- **`components/DesktopAppProxy/`** — Desktop app connection status and controls.
+- **`components/HttpsRuleOptions/`** — HTTPS rule configuration.
+- **`contexts/RecordsContext/`** — React context + reducer for managing records state (rules, groups, pinned items) in the popup.
+
+## Devtools Panel (`src/devtools/`)
+
+Chrome DevTools panel integration — adds a "Requestly" panel to Chrome DevTools.
+
+- **`devtools.js`** — Panel registration via `chrome.devtools.panels.create`. Firefox gets plain text title; Chrome/others get emoji prefix.
+- **`index.tsx`** — Devtools panel React app entry point.
+- **`containers/network/`** — Network log viewer with request/response details, headers, payload tabs, and filtering toolbars.
+- **`containers/executions/`** — Rule execution log viewer showing which rules were applied.
+- **`containers/analytics-inspector/`** — Analytics event inspector for debugging third-party tracking.
+- **`components/`** — Shared devtools UI components (resource type filter, icon button, empty state placeholder).
+
+## Custom Elements (`src/custom-elements/`)
+
+Web Components (Custom Elements) injected into target pages for in-page UI:
+
+- **`toast/`** — Toast notification widget.
+- **`test-rule-widget/`** — Widgets shown during rule testing:
+  - `explicit-test-rule-widget/` — Shown when user explicitly tests a rule.
+  - `implicit-test-rule-widget/` — Shown for automatic rule testing feedback.
+- **`session-recording-widgets/`** — Session recording UI:
+  - `manual-mode-widget/` — Controls for manual recording.
+  - `auto-mode-widget/` — Controls for auto recording.
+  - `draft-session-viewer/` — Preview of recorded session.
+  - `post-session-save-widget/` — Post-save confirmation widget.
+- **`abstract-classes/draggable-widget.ts`** — Base class for draggable floating widgets.
+
+All custom elements are registered in `index.ts`.
+
+# Build System
+
+- **Bundler**: Rollup (`rollup.config.js`)
+- **Build command**: `npm run build` (output to `dist/`)
+- **Dependencies**: React 18, Ant Design 5, CodeMirror 6, `@devtools-ds/*` for devtools UI, `@requestly/analytics-vendors` (local package).
+- **Preprocessor**: Uses PostCSS + Sass for styles.
+- **Pre-install hook**: Builds the analytics vendor package via `scripts/build-analytics-vendor.sh`.
+
+# How MV3 Depends on Common
+
+The MV3 extension imports from this package as `common/*` (resolved at build time to `../common/src/*`). Key imports:
+- `common/storage` — Storage abstraction
+- `common/rulesStore` — Rule retrieval and change listeners
+- `common/constants` — Message types and storage keys
+- `common/types` — TypeScript type definitions
+- `common/config` — Runtime config
+
+The popup and devtools UIs are built separately by this package's Rollup config and output as HTML/JS bundles that the MV3 extension includes in its `dist/`.
+
+# Development
+
+- `npm run build` — Full build
+- `npm run watch` — Rollup watch mode
+- Changes here require rebuilding: from `../mv3/`, run `npm run build:common` or `npm run build` (which does both)

browser-extension/common/rollup.config.js

@@ -127,6 +127,36 @@ export default [
     },
     plugins: [...commonPlugins, nodeResolve()],
   },
+  {
+    ...commonConfig,
+    input: "src/sidepanel/network-recording/index.tsx",
+    output: {
+      file: `${OUTPUT_DIR}/sidepanel/network-recording/index.js`,
+      format: "iife",
+    },
+    context: "window",
+    plugins: [
+      copy({
+        targets: [
+          {
+            src: "src/sidepanel/network-recording/index.html",
+            dest: `${OUTPUT_DIR}/sidepanel/network-recording`,
+          },
+        ],
+      }),
+      nodeResolve(),
+      replace({
+        preventAssignment: true,
+        "process.env.NODE_ENV": JSON.stringify("production"),
+      }),
+      ...commonPlugins,
+      commonjs(),
+      postcss({
+        extract: true,
+      }),
+      svgr(),
+    ],
+  },
   {
     ...commonConfig,
     input: "src/custom-elements/index.ts",

browser-extension/common/src/constants.ts

@@ -43,10 +43,20 @@ export const EXTENSION_MESSAGES = {
   DESKTOP_APP_CONNECTION_STATUS_UPDATED: "desktopAppConnectionStatusUpdated",
   IS_SESSION_REPLAY_ENABLED: "isSessionReplayEnabled",
   TRIGGER_OPEN_CURL_MODAL: "triggerOpenCurlModal",
+  STOP_NETWORK_RECORDING: "stopNetworkRecording",
+  GET_NETWORK_RECORDING_STATE: "getNetworkRecordingState",
+  // v2 body capture: SW → client content script → page script (networkBodyRecorder) start/stop.
+  START_NETWORK_BODY_CAPTURE: "startNetworkBodyCapture",
+  STOP_NETWORK_BODY_CAPTURE: "stopNetworkBodyCapture",
+  // Floating widget: content script → SW request to reopen the closed side panel.
+  REOPEN_NETWORK_RECORDING_PANEL: "reopenNetworkRecordingPanel",
 };
 
 export const EXTENSION_EXTERNAL_MESSAGES = {
   GET_EXTENSION_METADATA: "getExtensionMetadata",
+  START_NETWORK_RECORDING: "startNetworkRecording",
+  STOP_NETWORK_RECORDING: "stopNetworkRecording",
+  GET_NETWORK_RECORDING_SUMMARY: "getNetworkRecordingSummary",
 };
 
 export const CLIENT_MESSAGES = {
@@ -72,6 +82,12 @@ export const CLIENT_MESSAGES = {
   NOTIFY_RECORD_UPDATED: "notifyRecordUpdated",
   NOTIFY_EXTENSION_STATUS_UPDATED: "notifyExtensionStatusUpdated",
   OPEN_CURL_IMPORT_MODAL: "openCurlImportModal",
+  NETWORK_EVENT_CAPTURED: "networkEventCaptured",
+  NETWORK_RECORDING_ENDED: "networkRecordingEnded",
+  NETWORK_BODY_CAPTURED: "networkBodyCaptured",
+  // Floating widget: SW → content script to show/hide the on-page reopen widget.
+  SHOW_NETWORK_RECORDING_WIDGET: "showNetworkRecordingWidget",
+  HIDE_NETWORK_RECORDING_WIDGET: "hideNetworkRecordingWidget",
 };
 
 export const STORAGE_TYPE = "local";

browser-extension/common/src/custom-elements/index.ts

@@ -5,3 +5,4 @@ import "./test-rule-widget/explicit-test-rule-widget";
 import "./test-rule-widget/implicit-test-rule-widget";
 import "./session-recording-widgets/draft-session-viewer";
 import "./session-recording-widgets/post-session-save-widget";
+import "./network-recording-widget";

browser-extension/common/src/custom-elements/network-recording-widget/index.css

@@ -0,0 +1,62 @@
+:host {
+  position: fixed !important;
+  z-index: 2147483647 !important;
+  /* Shrink-wrap to content so the pill keeps its shape at the viewport edge instead of being
+     squeezed by the fixed-position box (which caused the label/button to wrap). */
+  width: max-content !important;
+  max-width: max-content !important;
+}
+
+#container {
+  display: none;
+  align-items: center;
+  gap: 8px;
+  background: #212121;
+  color: #fff;
+  border: 1px solid #333;
+  border-radius: 8px;
+  padding: 8px 12px;
+  font-family: system-ui, -apple-system, sans-serif;
+  font-size: 13px;
+  line-height: 1.2;
+  white-space: nowrap;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+  cursor: grab;
+  user-select: none;
+}
+
+#container.visible {
+  display: flex;
+}
+
+.recording-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #e43434;
+  flex: none;
+  animation: rq-nr-blink 1s cubic-bezier(0.5, 0, 1, 1) infinite alternate;
+}
+
+@keyframes rq-nr-blink {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0.3;
+  }
+}
+
+.reopen {
+  cursor: pointer;
+  color: #4caf50;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 4px;
+  flex: none;
+  white-space: nowrap;
+}
+
+.reopen:hover {
+  background: rgba(76, 175, 80, 0.15);
+}