Update README

.github/workflows/build-test.yml

@@ -14,7 +14,7 @@ jobs:
           go-version: ${{ matrix.go }}
       - uses: actions/setup-node@v2
         with:
-          node-version: "14"
+          node-version: "16"
       - uses: actions/cache@v2
         with:
           path: |

.github/workflows/lint.yml

@@ -0,0 +1,16 @@
+name: Lint
+on: [push, pull_request]
+defaults:
+  run:
+    working-directory: ./admin
+jobs:
+  lint-admin:
+    runs-on: ubuntu-latest
+    name: Admin (Next.js)
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: "16"
+      - run: yarn install
+      - run: yarn run lint

.gitignore

@@ -1,4 +1,4 @@
-/.vscode
+*.vscode
 /dist
 /hetty
 /cmd/hetty/admin

.golangci.yml

@@ -12,6 +12,7 @@ linters:
     - test
     - unused
   disable:
+    - dupl
     - exhaustive
     - exhaustivestruct
     - gochecknoglobals
@@ -21,9 +22,11 @@ linters:
     - gomnd
     - interfacer
     - maligned
+    - nilnil
     - nlreturn
     - scopelint 
     - testpackage
+    - varnamelen
     - wrapcheck
 
 linters-settings:
@@ -31,6 +34,8 @@ linters-settings:
     local-prefixes: github.com/dstotijn/hetty
   godot:
     capital: true
+  ireturn:
+    allow: "error,empty,anon,stdlib,.*(or|er)$,github.com/99designs/gqlgen/graphql.Marshaler,github.com/dstotijn/hetty/pkg/api.QueryResolver,github.com/dstotijn/hetty/pkg/search.Expression"
     
 issues:
   exclude-rules:

.goreleaser.yml

@@ -28,6 +28,20 @@ archives:
       - goos: windows
         format: zip
 
+brews:
+  - tap:
+      owner: hettysoft
+      name: homebrew-tap
+    folder: Formula
+    homepage:  https://hetty.xyz
+    description: An HTTP toolkit for security research.
+    license: MIT
+    commit_author:
+      name: David Stotijn
+      email: dstotijn@gmail.com
+    test: |
+      system "#{bin}/hetty -v"
+
 checksum:
   name_template: "checksums.txt"
 

Makefile

@@ -1,13 +1,9 @@
 export CGO_ENABLED = 0
 export NEXT_TELEMETRY_DISABLED = 1
 
-.PHONY: clean
-clean:
-	rm -f hetty
-	rm -rf ./cmd/hetty/admin
-	rm -rf ./admin/node_modules
-	rm -rf ./admin/dist
-	rm -rf ./admin/.next
+.PHONY: build
+build: build-admin
+	go build ./cmd/hetty
 
 .PHONY: build-admin
 build-admin:
@@ -16,6 +12,9 @@ build-admin:
 	yarn run export && \
     mv dist ../cmd/hetty/admin
 
-.PHONY: build
-build: build-admin
-	go build ./cmd/hetty
+.PHONY: clean
+clean:
+	rm -f hetty
+	rm -rf ./cmd/hetty/admin
+	rm -rf ./admin/dist
+	rm -rf ./admin/.next

README.md

@@ -1,243 +1,148 @@
 <h1>
-  <a href="https://github.com/dstotijn/hetty">
-    <img src="https://hetty.xyz/assets/logo.png" width="293">
-  </a>
+  <img src="https://hetty.xyz/img/hetty_light.svg#gh-light-mode-only" width="240"/>
+  <img src="https://hetty.xyz/img/hetty_dark.svg#gh-dark-mode-only" width="240"/>
 </h1>
 
-[![Latest GitHub release](https://img.shields.io/github/v/release/dstotijn/hetty?color=18BA91&style=flat-square)](https://github.com/dstotijn/hetty/releases/latest)
-[![Build Status](https://img.shields.io/endpoint.svg?url=https://actions-badge.atrox.dev/dstotijn/hetty/badge&style=flat-square&label=build+%26+test&logo=none&color=18BA91)](https://github.com/dstotijn/hetty/actions/workflows/build-test.yml)
-![GitHub download count](https://img.shields.io/github/downloads/dstotijn/hetty/total?color=18BA91&style=flat-square)
-[![GitHub](https://img.shields.io/github/license/dstotijn/hetty?color=18BA91&style=flat-square)](https://github.com/dstotijn/hetty/blob/master/LICENSE)
-[![Documentation](https://img.shields.io/badge/hetty-docs-18BA91?style=flat-square)](https://hetty.xyz/)
+[![Latest GitHub release](https://img.shields.io/github/v/release/dstotijn/hetty?color=25ae8f)](https://github.com/dstotijn/hetty/releases/latest)
+[![Build Status](https://img.shields.io/endpoint.svg?url=https://actions-badge.atrox.dev/dstotijn/hetty/badge&label=build&logo=none&color=25ae8f)](https://github.com/dstotijn/hetty/actions/workflows/build-test.yml)
+![GitHub download count](https://img.shields.io/github/downloads/dstotijn/hetty/total?color=25ae8f)
+[![GitHub](https://img.shields.io/github/license/dstotijn/hetty?color=25ae8f)](https://github.com/dstotijn/hetty/blob/master/LICENSE)
+[![Documentation](https://img.shields.io/badge/hetty-docs-25ae8f)](https://hetty.xyz/)
 
 **Hetty** is an HTTP toolkit for security research. It aims to become an open
 source alternative to commercial software like Burp Suite Pro, with powerful
 features tailored to the needs of the infosec and bug bounty community.
 
-<img src="https://hetty.xyz/assets/hetty_v0.2.0_header.png">
+<img src="https://hetty.xyz/img/hero.png" width="907" alt="Hetty proxy logs (screenshot)" />
 
 ## Features
 
-- Man-in-the-middle (MITM) HTTP/1.1 proxy with logs
-- Project based database storage (SQLite)
-- Scope support
-- Headless management API using GraphQL
-- Embedded web interface (Next.js)
+- Machine-in-the-middle (MITM) HTTP proxy, with logs and advanced search
+- HTTP client for manually creating/editing requests, and replay proxied requests
+- Scope support, to help keep work organized
+- Easy-to-use web based admin interface
+- Project based database storage, to help keep work organized
 
-ℹ️ Hetty is in early development. Additional features are planned
-for a `v1.0` release. Please see the <a href="https://github.com/dstotijn/hetty/projects/1">backlog</a>
-for details.
+👷‍♂️ Hetty is under active development. Check the <a
+href="https://github.com/dstotijn/hetty/projects/1">backlog</a> for the current
+status.
 
-## Documentation
+📣 Are you pen testing professionaly in a team? I would love to hear your
+thoughts on tooling via [this 5 minute
+survey](https://forms.gle/36jtgNc3TJ2imi5A8). Thank you!
 
-📖 [Read the docs.](https://hetty.xyz/)
+## Getting started
 
-## Installation
+💡 The [Getting started](https://hetty.xyz/docs/getting-started) doc has more
+detailed install and usage instructions.
 
-Hetty compiles to a self-contained binary, with an embedded BadgerDB database
-and web based admin interface.
+### Installation
 
-### Install pre-built release (recommended)
+The quickest way to install and update Hetty is via a package manager:
 
-👉 Downloads for Linux, macOS and Windows are available on the [releases page](https://github.com/dstotijn/hetty/releases).
+#### macOS
 
-### Build from source
-
-#### Prerequisites
-
-- [Go 1.16](https://golang.org/)
-- [Yarn](https://yarnpkg.com/)
-
-When building from source, the static resources for the admin interface
-(Next.js) need to be generated via [Yarn](https://yarnpkg.com/). The generated
-files will be embedded (using the [embed](https://golang.org/pkg/embed/)
-package) when you use the `build` Makefile target.
-
-Clone the repository and use the `build` make target to create a binary:
-
-```
-$ git clone git@github.com:dstotijn/hetty.git
-$ cd hetty
-$ make build
+```sh
+brew install hettysoft/tap/hetty
 ```
 
-### Docker
+#### Linux
 
-A Docker image is available on Docker Hub: [`dstotijn/hetty`](https://hub.docker.com/r/dstotijn/hetty).
-For persistent storage of CA certificates and projects database, mount a volume:
-
-```
-$ mkdir -p $HOME/.hetty
-$ docker run -v $HOME/.hetty:/root/.hetty -p 8080:8080 dstotijn/hetty
+```sh
+sudo snap install hetty
 ```
 
-## Usage
+#### Windows
 
-When Hetty is run, by default it listens on `:8080` and is accessible via
-http://localhost:8080. Depending on incoming HTTP requests, it either acts as a
-MITM proxy, or it serves the API and web interface.
-
-By default, the projects database files and CA certificates are stored in a `.hetty`
-directory under the user's home directory (`$HOME` on Linux/macOS, `%USERPROFILE%`
-on Windows).
-
-To start, ensure `hetty` (downloaded from a release, or manually built) is in your
-`$PATH` and run:
-
-```
-$ hetty
+```sh
+scoop bucket add hettysoft https://github.com/hettysoft/scoop.git
+scoop install hettysoft/hetty
 ```
 
-An overview of configuration flags:
+#### Other
 
-```
-$ hetty -h
-Usage of ./hetty:
-  -addr string
-        TCP address to listen on, in the form "host:port" (default ":8080")
-  -adminPath string
-        File path to admin build
-  -cert string
-        CA certificate filepath. Creates a new CA certificate if file doesn't exist (default "~/.hetty/hetty_cert.pem")
-  -key string
-        CA private key filepath. Creates a new CA private key if file doesn't exist (default "~/.hetty/hetty_key.pem")
-  -db string
-        Database directory path (default "~/.hetty/db")
-```
+Alternatively, you can [download the latest release from
+GitHub](https://github.com/dstotijn/hetty/releases/latest) for your OS and
+architecture, and move the binary to a directory in your `$PATH`. If your OS is
+not available for one of the package managers or not listed in the GitHub
+releases, you can compile from source _(link coming soon)_ or use a Docker image
+_(link coming soon)_.
 
-You should see:
+### Usage
 
-```
-2022/01/26 10:34:24 [INFO] Hetty (v0.3.2) is running on :8080 ...
-```
-
-Then, visit [http://localhost:8080](http://localhost:8080) to get started.
-
-ℹ️ Detailed documentation is under development and will be available soon.
-
-## Certificate Setup and Installation
-
-In order for Hetty to proxy requests going to HTTPS endpoints, a root CA certificate for
-Hetty will need to be set up. Furthermore, the CA certificate may need to be
-installed to the host for them to be trusted by your browser. The following steps
-will cover how you can generate your certificate, provide them to hetty, and how
-you can install them in your local CA store.
-
-⚠️ _This process was done on a Linux machine but should_
-_provide guidance on Windows and macOS as well._
-
-### Generating CA certificates
-
-You can generate a CA keypair two different ways. The first is bundled directly
-with Hetty, and simplifies the process immensely. The alternative is using OpenSSL
-to generate them, which provides more control over expiration time and cryptography
-used, but requires you install the OpenSSL tooling. The first is suggested for any
-beginners trying to get started.
-
-#### Generating CA certificates with hetty
-
-Hetty will generate the default key and certificate on its own if none are supplied
-or found in `~/.hetty/` when first running the CLI. To generate a default key and
-certificate with hetty, simply run the command with no arguments
+Once installed, start Hetty via:
 
 ```sh
 hetty
 ```
 
-You should now have a key and certificate located at `~/.hetty/hetty_key.pem` and
-`~/.hetty/hetty_cert.pem` respectively.
+💡 Read the [Getting started](https://hetty.xyz/docs/getting-started) doc for
+more details.
 
-#### Generating CA certificates with OpenSSL
-
-You can start off by generating a new key and CA certificate which will both expire
-after a month.
-
-```sh
-mkdir ~/.hetty
-openssl req -newkey rsa:2048 -new -nodes -x509 -days 31 -keyout ~/.hetty/hetty_key.pem -out ~/.hetty/hetty_cert.pem
-```
-
-The default location which `hetty` will check for the key and CA certificate is under
-`~/.hetty/`, at `hetty_key.pem` and `hetty_cert.pem` respectively. You can move them
-here and `hetty` will detect them automatically. Otherwise, you can specify the
-location of these as arguments to `hetty`.
+To list all available options, run: `hetty --help`:
 
 ```
-hetty -key key.pem -cert cert.pem
+$ hetty --help
+
+Usage:
+    hetty [flags] [subcommand] [flags]
+
+Runs an HTTP server with (MITM) proxy, GraphQL service, and a web based admin interface.
+
+Options:
+    --cert         Path to root CA certificate. Creates file if it doesn't exist. (Default: "~/.hetty/hetty_cert.pem")
+    --key          Path to root CA private key. Creates file if it doesn't exist. (Default: "~/.hetty/hetty_key.pem")
+    --db           Database directory path. (Default: "~/.hetty/db")
+    --addr         TCP address for HTTP server to listen on, in the form \"host:port\". (Default: ":8080")
+    --chrome       Launch Chrome with proxy settings applied and certificate errors ignored. (Default: false)
+    --verbose      Enable verbose logging.
+    --json         Encode logs as JSON, instead of pretty/human readable output.
+    --version, -v  Output version.
+    --help, -h     Output this usage text.
+
+Subcommands:
+    - cert  Certificate management
+
+Run `hetty <subcommand> --help` for subcommand specific usage instructions.
+
+Visit https://hetty.xyz to learn more about Hetty.
 ```
 
-### Trusting the CA certificate
+## Documentation
 
-In order for your browser to allow traffic to the local Hetty proxy, you may need
-to install these certificates to your local CA store.
-
-On Ubuntu, you can update your local CA store with the certificate by running the
-following commands:
-
-```sh
-sudo cp ~/.hetty/hetty_cert.pem /usr/local/share/ca-certificates/hetty.crt
-sudo update-ca-certificates
-```
-
-On Windows, you would add your certificate by using the Certificate Manager. You
-can launch that by running the command:
-
-```batch
-certmgr.msc
-```
-
-On macOS, you can add your certificate by using the Keychain Access program. This
-can be found under `Application/Utilities/Keychain Access.app`. After opening this,
-drag the certificate into the app. Next, open the certificate in the app, enter the
-_Trust_ section, and under _When using this certificate_ select _Always Trust_.
-
-_Note: Various Linux distributions may require other steps or commands for updating_
-_their certificate authority. See the documentation relevant to your distribution for_
-_more information on how to update the system to trust your self-signed certificate._
-
-## Vision and roadmap
-
-- Fast core/engine, built with Go, with a minimal memory footprint.
-- Easy to use admin interface, built with Next.js and Material UI.
-- Headless management, via GraphQL API.
-- Extensibility is top of mind. All modules are written as Go packages, to
-  be used by Hetty, but also as libraries by other software.
-- Pluggable architecture for MITM proxy, projects, scope. It should be possible.
-  to build a plugin system in the (near) future.
-- Based on feedback and real-world usage of pentesters and bug bounty hunters.
-- Aim for a relatively small core feature set that the majority of security researchers need.
+📖 [Read the docs](https://hetty.xyz/docs)
 
 ## Support
 
 Use [issues](https://github.com/dstotijn/hetty/issues) for bug reports and
-feature requests, and [discussions](https://github.com/dstotijn/hetty/discussions)
-for questions and troubleshooting.
+feature requests, and
+[discussions](https://github.com/dstotijn/hetty/discussions) for questions and
+troubleshooting.
 
 ## Community
 
-💬 [Join the Hetty Discord server](https://discord.gg/3HVsj5pTFP).
+💬 [Join the Hetty Discord server](https://discord.gg/3HVsj5pTFP)
 
 ## Contributing
 
-Want to contribute? Great! Please check the [Contribution Guidelines](CONTRIBUTING.md)
-for details.
+Want to contribute? Great! Please check the [Contribution
+Guidelines](CONTRIBUTING.md) for details.
 
 ## Acknowledgements
 
 - Thanks to the [Hacker101 community on Discord](https://www.hacker101.com/discord)
-  for all the encouragement and feedback.
-- The font used in the logo and admin interface is [JetBrains Mono](https://www.jetbrains.com/lp/mono/).
+  for the encouragement and early feedback.
+- The font used in the logo and admin interface is [JetBrains
+  Mono](https://www.jetbrains.com/lp/mono/).
 
 ## Sponsors
 
 <a href="https://www.tines.com/?utm_source=oss&utm_medium=sponsorship&utm_campaign=hetty">
-<img src="https://hetty.xyz/assets/tines-sponsorship-badge.png" width="140" alt="Sponsored by Tines">
+<img src="https://hetty.xyz/img/tines-sponsorship-badge.png" width="140" alt="Sponsored by Tines">
 </a>
 
 ## License
 
-[MIT License](LICENSE)
+[MIT](LICENSE)
 
----
-
-© 2021 David Stotijn — [Twitter](https://twitter.com/dstotijn), [Email](mailto:dstotijn@gmail.com)
+© 2022 Hetty Software

admin/.eslintrc.json

@@ -1,6 +1,51 @@
 {
-  "extends": "next/core-web-vitals",
+  "root": true,
+  "extends": ["next/core-web-vitals", "prettier", "plugin:@typescript-eslint/recommended", "plugin:import/typescript"],
+  "plugins": ["prettier", "@typescript-eslint", "import"],
+  "ignorePatterns": ["next*", "src/lib/graphql/generated.tsx"],
+  "settings": {
+    "import/parsers": {
+      "@typescript-eslint/parser": [".ts", ".tsx"]
+    },
+    "import/resolver": {
+      "typescript": {
+        "alwaysTryTypes": true
+      }
+    }
+  },
   "rules": {
-    "@next/next/no-css-tags": "off"
+    "prettier/prettier": ["error"],
+    "@next/next/no-css-tags": "off",
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": "error",
+
+    "import/default": "off",
+
+    "import/no-unresolved": "error",
+    "import/named": "error",
+    "import/namespace": "error",
+    "import/export": "error",
+    "import/no-deprecated": "error",
+    "import/no-cycle": "error",
+
+    "import/no-named-as-default": "warn",
+    "import/no-named-as-default-member": "warn",
+    "import/no-duplicates": "warn",
+    "import/newline-after-import": "warn",
+    "import/order": [
+      "warn",
+      {
+        "alphabetize": { "order": "asc", "caseInsensitive": false },
+        "newlines-between": "always",
+        "groups": ["builtin", "external", "parent", "sibling", "index"]
+      }
+    ],
+    "import/no-unused-modules": [
+      "error",
+      {
+        "missingExports": true,
+        "ignoreExports": ["./src/pages"]
+      }
+    ]
   }
 }

admin/gqlcodegen.yml

@@ -0,0 +1,9 @@
+overwrite: true
+schema: "../pkg/api/schema.graphql"
+documents: "src/**/*.graphql"
+generates:
+  src/lib/graphql/generated.tsx:
+    plugins:
+      - "typescript"
+      - "typescript-operations"
+      - "typescript-react-apollo"

admin/package.json

@@ -7,7 +7,8 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "export": "next build && next export -o dist"
+    "export": "next build && next export -o dist",
+    "generate": "graphql-codegen --config gqlcodegen.yml"
   },
   "dependencies": {
     "@apollo/client": "^3.2.0",
@@ -18,6 +19,8 @@
     "@mui/icons-material": "^5.3.1",
     "@mui/lab": "^5.0.0-alpha.66",
     "@mui/material": "^5.3.1",
+    "@mui/styles": "^5.4.2",
+    "allotment": "^1.9.0",
     "deepmerge": "^4.2.2",
     "graphql": "^16.2.0",
     "lodash": "^4.17.21",
@@ -26,18 +29,28 @@
     "next-fonts": "^1.0.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "typescript": "^4.0.3"
+    "react-split-pane": "^0.1.92"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0",
+    "@graphql-codegen/cli": "2.6.1",
+    "@graphql-codegen/introspection": "2.1.1",
+    "@graphql-codegen/typescript": "2.4.3",
+    "@graphql-codegen/typescript-operations": "2.3.0",
+    "@graphql-codegen/typescript-react-apollo": "3.2.6",
     "@types/lodash": "^4.14.178",
     "@types/node": "^17.0.12",
     "@types/react": "^17.0.38",
+    "@typescript-eslint/eslint-plugin": "^5.12.0",
+    "@typescript-eslint/parser": "^5.12.0",
     "eslint": "^8.7.0",
     "eslint-config-next": "12.0.8",
     "eslint-config-prettier": "^8.3.0",
+    "eslint-import-resolver-typescript": "^2.5.0",
+    "eslint-plugin-import": "^2.25.4",
     "eslint-plugin-prettier": "^4.0.0",
     "prettier": "^2.1.2",
+    "typescript": "^4.0.3",
     "webpack": "^5.67.0"
   }
 }

admin/public/site.webmanifest

@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

admin/src/components/CenteredPaper.tsx

@@ -1,21 +0,0 @@
-import { Paper } from "@mui/material";
-
-function CenteredPaper({ children }: { children: React.ReactNode }): JSX.Element {
-  return (
-    <div>
-      <Paper
-        elevation={0}
-        style={{
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          padding: 36,
-        }}
-      >
-        {children}
-      </Paper>
-    </div>
-  );
-}
-
-export default CenteredPaper;

admin/src/components/projects/NewProject.tsx

@@ -1,117 +0,0 @@
-import { gql, useMutation } from "@apollo/client";
-import { Box, Button, CircularProgress, TextField, Typography } from "@mui/material";
-import AddIcon from "@mui/icons-material/Add";
-import React, { useState } from "react";
-
-const CREATE_PROJECT = gql`
-  mutation CreateProject($name: String!) {
-    createProject(name: $name) {
-      id
-      name
-    }
-  }
-`;
-
-const OPEN_PROJECT = gql`
-  mutation OpenProject($id: ID!) {
-    openProject(id: $id) {
-      id
-      name
-      isActive
-    }
-  }
-`;
-
-function NewProject(): JSX.Element {
-  const [name, setName] = useState("");
-
-  const [createProject, { error: createProjErr, loading: createProjLoading }] = useMutation(CREATE_PROJECT, {
-    onError: () => {},
-    onCompleted(data) {
-      setName("");
-      openProject({ variables: { id: data.createProject.id } });
-    },
-  });
-  const [openProject, { error: openProjErr, loading: openProjLoading }] = useMutation(OPEN_PROJECT, {
-    onError: () => {},
-    update(cache, { data: { openProject } }) {
-      cache.modify({
-        fields: {
-          activeProject() {
-            const activeProjRef = cache.writeFragment({
-              id: openProject.id,
-              data: openProject,
-              fragment: gql`
-                fragment ActiveProject on Project {
-                  id
-                  name
-                  isActive
-                  type
-                }
-              `,
-            });
-            return activeProjRef;
-          },
-          projects(_, { DELETE }) {
-            cache.writeFragment({
-              id: openProject.id,
-              data: openProject,
-              fragment: gql`
-                fragment OpenProject on Project {
-                  id
-                  name
-                  isActive
-                  type
-                }
-              `,
-            });
-            return DELETE;
-          },
-        },
-      });
-    },
-  });
-
-  const handleCreateAndOpenProjectForm = (e: React.SyntheticEvent) => {
-    e.preventDefault();
-    createProject({ variables: { name } });
-  };
-
-  return (
-    <div>
-      <Box mb={3}>
-        <Typography variant="h6">New project</Typography>
-      </Box>
-      <form onSubmit={handleCreateAndOpenProjectForm} autoComplete="off">
-        <TextField
-          sx={{
-            mr: 2,
-          }}
-          color="primary"
-          size="small"
-          label="Project name"
-          placeholder="Project name…"
-          onChange={(e) => setName(e.target.value)}
-          error={Boolean(createProjErr || openProjErr)}
-          helperText={(createProjErr && createProjErr.message) || (openProjErr && openProjErr.message)}
-        />
-        <Button
-          type="submit"
-          variant="contained"
-          color="primary"
-          size="large"
-          sx={{
-            pt: 0.9,
-            pb: 0.7,
-          }}
-          disabled={createProjLoading || openProjLoading}
-          startIcon={createProjLoading || openProjLoading ? <CircularProgress size={22} /> : <AddIcon />}
-        >
-          Create & open project
-        </Button>
-      </form>
-    </div>
-  );
-}
-
-export default NewProject;

admin/src/components/reqlog/HttpHeadersTable.tsx

@@ -1,104 +0,0 @@
-import { Table, TableBody, TableCell, TableContainer, TableRow, Snackbar } from "@mui/material";
-import { Alert } from "@mui/lab";
-import React, { useState } from "react";
-
-const baseCellStyle = {
-  px: 0,
-  py: 0.33,
-  verticalAlign: "top",
-  border: "none",
-  whiteSpace: "nowrap" as any,
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  "&:hover": {
-    color: "primary.main",
-    whiteSpace: "inherit" as any,
-    overflow: "inherit",
-    textOverflow: "inherit",
-    cursor: "copy",
-  },
-};
-
-const keyCellStyle = {
-  ...baseCellStyle,
-  pr: 1,
-  width: "40%",
-  fontWeight: "bold",
-  fontSize: ".75rem",
-};
-
-const valueCellStyle = {
-  ...baseCellStyle,
-  width: "60%",
-  border: "none",
-  fontSize: ".75rem",
-};
-
-interface Props {
-  headers: Array<{ key: string; value: string }>;
-}
-
-function HttpHeadersTable({ headers }: Props): JSX.Element {
-  const [open, setOpen] = useState(false);
-
-  const handleClick = (e: React.MouseEvent) => {
-    e.preventDefault();
-
-    const windowSel = window.getSelection();
-
-    if (!windowSel || !document) {
-      return;
-    }
-
-    const r = document.createRange();
-    r.selectNode(e.currentTarget);
-    windowSel.removeAllRanges();
-    windowSel.addRange(r);
-    document.execCommand("copy");
-    windowSel.removeAllRanges();
-
-    setOpen(true);
-  };
-
-  const handleClose = (event: Event | React.SyntheticEvent, reason?: string) => {
-    if (reason === "clickaway") {
-      return;
-    }
-
-    setOpen(false);
-  };
-
-  return (
-    <div>
-      <Snackbar open={open} autoHideDuration={3000} onClose={handleClose}>
-        <Alert onClose={handleClose} severity="info">
-          Copied to clipboard.
-        </Alert>
-      </Snackbar>
-      <TableContainer>
-        <Table
-          sx={{
-            tableLayout: "fixed",
-            width: "100%",
-          }}
-          size="small"
-        >
-          <TableBody>
-            {headers.map(({ key, value }, index) => (
-              <TableRow key={index}>
-                <TableCell component="th" scope="row" sx={keyCellStyle} onClick={handleClick}>
-                  <code>{key}:</code>
-                </TableCell>
-                <TableCell sx={valueCellStyle} onClick={handleClick}>
-                  <code>{value}</code>
-                </TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </TableContainer>
-    </div>
-  );
-}
-
-export default HttpHeadersTable;

admin/src/components/reqlog/LogDetail.tsx

@@ -1,80 +0,0 @@
-import { gql, useQuery } from "@apollo/client";
-import { Box, Grid, Paper, CircularProgress } from "@mui/material";
-
-import ResponseDetail from "./ResponseDetail";
-import RequestDetail from "./RequestDetail";
-import Alert from "@mui/lab/Alert";
-
-const HTTP_REQUEST_LOG = gql`
-  query HttpRequestLog($id: ID!) {
-    httpRequestLog(id: $id) {
-      id
-      method
-      url
-      proto
-      headers {
-        key
-        value
-      }
-      body
-      response {
-        proto
-        headers {
-          key
-          value
-        }
-        statusCode
-        statusReason
-        body
-      }
-    }
-  }
-`;
-
-interface Props {
-  requestId: string;
-}
-
-function LogDetail({ requestId: id }: Props): JSX.Element {
-  const { loading, error, data } = useQuery(HTTP_REQUEST_LOG, {
-    variables: { id },
-  });
-
-  if (loading) {
-    return <CircularProgress />;
-  }
-  if (error) {
-    return <Alert severity="error">Error fetching logs details: {error.message}</Alert>;
-  }
-
-  if (!data.httpRequestLog) {
-    return (
-      <Alert severity="warning">
-        Request <strong>{id}</strong> was not found.
-      </Alert>
-    );
-  }
-
-  const { method, url, proto, headers, body, response } = data.httpRequestLog;
-
-  return (
-    <div>
-      <Grid container item spacing={2}>
-        <Grid item xs={6}>
-          <Box component={Paper}>
-            <RequestDetail request={{ method, url, proto, headers, body }} />
-          </Box>
-        </Grid>
-        <Grid item xs={6}>
-          {response && (
-            <Box component={Paper}>
-              <ResponseDetail response={response} />
-            </Box>
-          )}
-        </Grid>
-      </Grid>
-    </div>
-  );
-}
-
-export default LogDetail;

admin/src/components/reqlog/LogsOverview.tsx

@@ -1,59 +0,0 @@
-import { useRouter } from "next/router";
-import Link from "next/link";
-import { Box, CircularProgress, Link as MaterialLink, Typography } from "@mui/material";
-import Alert from "@mui/lab/Alert";
-
-import RequestList from "./RequestList";
-import LogDetail from "./LogDetail";
-import CenteredPaper from "../CenteredPaper";
-import { useHttpRequestLogs } from "./hooks/useHttpRequestLogs";
-
-function LogsOverview(): JSX.Element {
-  const router = useRouter();
-  const detailReqLogId = router.query.id as string | undefined;
-  const { loading, error, data } = useHttpRequestLogs();
-
-  const handleLogClick = (reqId: string) => {
-    router.push("/proxy/logs?id=" + reqId, undefined, {
-      shallow: false,
-    });
-  };
-
-  if (loading) {
-    return <CircularProgress />;
-  }
-  if (error) {
-    if (error.graphQLErrors[0]?.extensions?.code === "no_active_project") {
-      return (
-        <Alert severity="info">
-          There is no project active.{" "}
-          <Link href="/projects" passHref>
-            <MaterialLink color="primary">Create or open</MaterialLink>
-          </Link>{" "}
-          one first.
-        </Alert>
-      );
-    }
-    return <Alert severity="error">Error fetching logs: {error.message}</Alert>;
-  }
-
-  const { httpRequestLogs: logs } = data;
-
-  return (
-    <div>
-      <Box mb={2}>
-        <RequestList logs={logs || []} selectedReqLogId={detailReqLogId} onLogClick={handleLogClick} />
-      </Box>
-      <Box>
-        {detailReqLogId && <LogDetail requestId={detailReqLogId} />}
-        {logs.length !== 0 && !detailReqLogId && (
-          <CenteredPaper>
-            <Typography>Select a log entry…</Typography>
-          </CenteredPaper>
-        )}
-      </Box>
-    </div>
-  );
-}
-
-export default LogsOverview;

admin/src/components/reqlog/RequestDetail.tsx

@@ -1,56 +0,0 @@
-import React from "react";
-import { Typography, Box, Divider } from "@mui/material";
-
-import HttpHeadersTable from "./HttpHeadersTable";
-import Editor from "./Editor";
-
-interface Props {
-  request: {
-    method: string;
-    url: string;
-    proto: string;
-    headers: Array<{ key: string; value: string }>;
-    body?: string;
-  };
-}
-
-function RequestDetail({ request }: Props): JSX.Element {
-  const { method, url, proto, headers, body } = request;
-
-  const contentType = headers.find((header) => header.key === "Content-Type")?.value;
-  const parsedUrl = new URL(url);
-
-  return (
-    <div>
-      <Box p={2}>
-        <Typography variant="overline" color="textSecondary" style={{ float: "right" }}>
-          Request
-        </Typography>
-        <Typography
-          sx={{
-            width: "calc(100% - 80px)",
-            fontSize: "1rem",
-            wordBreak: "break-all",
-            whiteSpace: "pre-wrap",
-          }}
-          variant="h6"
-        >
-          {method} {decodeURIComponent(parsedUrl.pathname + parsedUrl.search)}{" "}
-          <Typography component="span" color="textSecondary" style={{ fontFamily: "'JetBrains Mono', monospace" }}>
-            {proto}
-          </Typography>
-        </Typography>
-      </Box>
-
-      <Divider />
-
-      <Box p={2}>
-        <HttpHeadersTable headers={headers} />
-      </Box>
-
-      {body && <Editor content={body} contentType={contentType} />}
-    </div>
-  );
-}
-
-export default RequestDetail;

admin/src/components/reqlog/RequestList.tsx

@@ -1,113 +0,0 @@
-import {
-  TableContainer,
-  Paper,
-  Table,
-  TableHead,
-  TableRow,
-  TableCell,
-  TableBody,
-  Typography,
-  Box,
-  useTheme,
-} from "@mui/material";
-
-import HttpStatusIcon from "./HttpStatusCode";
-import CenteredPaper from "../CenteredPaper";
-import { RequestLog } from "../../lib/requestLogs";
-
-interface Props {
-  logs: RequestLog[];
-  selectedReqLogId?: string;
-  onLogClick(requestId: string): void;
-}
-
-export default function RequestList({ logs, onLogClick, selectedReqLogId }: Props): JSX.Element {
-  return (
-    <div>
-      <RequestListTable onLogClick={onLogClick} logs={logs} selectedReqLogId={selectedReqLogId} />
-      {logs.length === 0 && (
-        <Box my={1}>
-          <CenteredPaper>
-            <Typography>No logs found.</Typography>
-          </CenteredPaper>
-        </Box>
-      )}
-    </div>
-  );
-}
-
-interface RequestListTableProps {
-  logs: RequestLog[];
-  selectedReqLogId?: string;
-  onLogClick(requestId: string): void;
-}
-
-function RequestListTable({ logs, selectedReqLogId, onLogClick }: RequestListTableProps): JSX.Element {
-  const theme = useTheme();
-
-  return (
-    <TableContainer
-      component={Paper}
-      style={{
-        minHeight: logs.length ? 200 : 0,
-        height: logs.length ? "24vh" : "inherit",
-      }}
-    >
-      <Table stickyHeader size="small">
-        <TableHead>
-          <TableRow>
-            <TableCell>Method</TableCell>
-            <TableCell>Origin</TableCell>
-            <TableCell>Path</TableCell>
-            <TableCell>Status</TableCell>
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {logs.map(({ id, method, url, response }) => {
-            const { origin, pathname, search, hash } = new URL(url);
-
-            const cellStyle = {
-              whiteSpace: "nowrap",
-              overflow: "hidden",
-              textOverflow: "ellipsis",
-            } as any;
-
-            return (
-              <TableRow
-                key={id}
-                sx={{
-                  "&:hover": {
-                    cursor: "pointer",
-                  },
-                  ...(id === selectedReqLogId && {
-                    bgcolor: theme.palette.action.selected,
-                  }),
-                }}
-                hover
-                onClick={() => onLogClick(id)}
-              >
-                <TableCell style={{ ...cellStyle, width: "100px" }}>
-                  <code>{method}</code>
-                </TableCell>
-                <TableCell sx={{ ...cellStyle, maxWidth: "100px" }}>{origin}</TableCell>
-                <TableCell sx={{ ...cellStyle, maxWidth: "200px" }}>
-                  {decodeURIComponent(pathname + search + hash)}
-                </TableCell>
-                <TableCell style={{ maxWidth: "100px" }}>
-                  {response && (
-                    <div>
-                      <HttpStatusIcon status={response.statusCode} />{" "}
-                      <code>
-                        {response.statusCode} {response.statusReason}
-                      </code>
-                    </div>
-                  )}
-                </TableCell>
-              </TableRow>
-            );
-          })}
-        </TableBody>
-      </Table>
-    </TableContainer>
-  );
-}

admin/src/components/reqlog/ResponseDetail.tsx

@@ -1,47 +0,0 @@
-import { Typography, Box, Divider } from "@mui/material";
-
-import HttpStatusIcon from "./HttpStatusCode";
-import Editor from "./Editor";
-import HttpHeadersTable from "./HttpHeadersTable";
-
-interface Props {
-  response: {
-    proto: string;
-    statusCode: number;
-    statusReason: string;
-    headers: Array<{ key: string; value: string }>;
-    body?: string;
-  };
-}
-
-function ResponseDetail({ response }: Props): JSX.Element {
-  const contentType = response.headers.find((header) => header.key === "Content-Type")?.value;
-  return (
-    <div>
-      <Box p={2}>
-        <Typography variant="overline" color="textSecondary" style={{ float: "right" }}>
-          Response
-        </Typography>
-        <Typography variant="h6" style={{ fontSize: "1rem", whiteSpace: "nowrap" }}>
-          <HttpStatusIcon status={response.statusCode} />{" "}
-          <Typography component="span" color="textSecondary">
-            <Typography component="span" color="textSecondary" style={{ fontFamily: "'JetBrains Mono', monospace" }}>
-              {response.proto}
-            </Typography>
-          </Typography>{" "}
-          {response.statusCode} {response.statusReason}
-        </Typography>
-      </Box>
-
-      <Divider />
-
-      <Box p={2}>
-        <HttpHeadersTable headers={response.headers} />
-      </Box>
-
-      {response.body && <Editor content={response.body} contentType={contentType} />}
-    </div>
-  );
-}
-
-export default ResponseDetail;

admin/src/components/reqlog/hooks/useClearHTTPRequestLog.ts

@@ -1,16 +0,0 @@
-import { gql, useMutation } from "@apollo/client";
-import { HTTP_REQUEST_LOGS } from "./useHttpRequestLogs";
-
-const CLEAR_HTTP_REQUEST_LOG = gql`
-  mutation ClearHTTPRequestLog {
-    clearHTTPRequestLog {
-      success
-    }
-  }
-`;
-
-export function useClearHTTPRequestLog() {
-  return useMutation(CLEAR_HTTP_REQUEST_LOG, {
-    refetchQueries: [{ query: HTTP_REQUEST_LOGS }],
-  });
-}

admin/src/components/reqlog/hooks/useHttpRequestLogs.ts

@@ -1,22 +0,0 @@
-import { gql, useQuery } from "@apollo/client";
-
-export const HTTP_REQUEST_LOGS = gql`
-  query HttpRequestLogs {
-    httpRequestLogs {
-      id
-      method
-      url
-      timestamp
-      response {
-        statusCode
-        statusReason
-      }
-    }
-  }
-`;
-
-export function useHttpRequestLogs() {
-  return useQuery(HTTP_REQUEST_LOGS, {
-    pollInterval: 1000,
-  });
-}

admin/src/features/Layout.tsx

@@ -1,4 +1,11 @@
-import React from "react";
+import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
+import FolderIcon from "@mui/icons-material/Folder";
+import HomeIcon from "@mui/icons-material/Home";
+import LocationSearchingIcon from "@mui/icons-material/LocationSearching";
+import MenuIcon from "@mui/icons-material/Menu";
+import SendIcon from "@mui/icons-material/Send";
+import SettingsEthernetIcon from "@mui/icons-material/SettingsEthernet";
 import {
   Theme,
   useTheme,
@@ -18,14 +25,9 @@ import MuiDrawer from "@mui/material/Drawer";
 import MuiListItemButton, { ListItemButtonProps } from "@mui/material/ListItemButton";
 import MuiListItemIcon, { ListItemIconProps } from "@mui/material/ListItemIcon";
 import Link from "next/link";
-import MenuIcon from "@mui/icons-material/Menu";
-import HomeIcon from "@mui/icons-material/Home";
-import SettingsEthernetIcon from "@mui/icons-material/SettingsEthernet";
-import SendIcon from "@mui/icons-material/Send";
-import FolderIcon from "@mui/icons-material/Folder";
-import LocationSearchingIcon from "@mui/icons-material/LocationSearching";
-import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
-import ChevronRightIcon from "@mui/icons-material/ChevronRight";
+import React, { useState } from "react";
+
+import { useActiveProject } from "lib/ActiveProjectContext";
 
 export enum Page {
   Home,
@@ -132,8 +134,9 @@ interface Props {
 }
 
 export function Layout({ title, page, children }: Props): JSX.Element {
+  const activeProject = useActiveProject();
   const theme = useTheme();
-  const [open, setOpen] = React.useState(false);
+  const [open, setOpen] = useState(false);
 
   const handleDrawerOpen = () => {
     setOpen(true);
@@ -151,7 +154,7 @@ export function Layout({ title, page, children }: Props): JSX.Element {
   });
 
   return (
-    <Box sx={{ display: "flex" }}>
+    <Box sx={{ display: "flex", height: "100%" }}>
       <AppBar position="fixed" open={open}>
         <Toolbar>
           <IconButton
@@ -200,7 +203,7 @@ export function Layout({ title, page, children }: Props): JSX.Element {
             </ListItemButton>
           </Link>
           <Link href="/proxy/logs" passHref>
-            <ListItemButton key="proxyLogs" selected={page === Page.ProxyLogs}>
+            <ListItemButton key="proxyLogs" disabled={!activeProject} selected={page === Page.ProxyLogs}>
               <Tooltip title="Proxy">
                 <ListItemIcon>
                   <SettingsEthernetIcon />
@@ -210,7 +213,7 @@ export function Layout({ title, page, children }: Props): JSX.Element {
             </ListItemButton>
           </Link>
           <Link href="/sender" passHref>
-            <ListItemButton key="sender" selected={page === Page.Sender}>
+            <ListItemButton key="sender" disabled={!activeProject} selected={page === Page.Sender}>
               <Tooltip title="Sender">
                 <ListItemIcon>
                   <SendIcon />
@@ -220,7 +223,7 @@ export function Layout({ title, page, children }: Props): JSX.Element {
             </ListItemButton>
           </Link>
           <Link href="/scope" passHref>
-            <ListItemButton key="scope" selected={page === Page.Scope}>
+            <ListItemButton key="scope" disabled={!activeProject} selected={page === Page.Scope}>
               <Tooltip title="Scope">
                 <ListItemIcon>
                   <LocationSearchingIcon />
@@ -241,12 +244,9 @@ export function Layout({ title, page, children }: Props): JSX.Element {
           </Link>
         </List>
       </Drawer>
-      <Box component="main" sx={{ flexGrow: 1, p: 3 }}>
-        <DrawerHeader />
+      <Box component="main" sx={{ flexGrow: 1, mx: 3, mt: 11 }}>
         {children}
       </Box>
     </Box>
   );
 }
-
-export default Layout;

admin/src/features/projects/components/NewProject.tsx

@@ -0,0 +1,67 @@
+import AddIcon from "@mui/icons-material/Add";
+import { Box, Button, CircularProgress, TextField, Typography } from "@mui/material";
+import React, { useState } from "react";
+
+import useOpenProjectMutation from "../hooks/useOpenProjectMutation";
+
+import { useCreateProjectMutation } from "lib/graphql/generated";
+
+function NewProject(): JSX.Element {
+  const [name, setName] = useState("");
+
+  const [createProject, createProjResult] = useCreateProjectMutation({
+    onCompleted(data) {
+      setName("");
+      if (data?.createProject) {
+        openProject({ variables: { id: data.createProject?.id } });
+      }
+    },
+  });
+  const [openProject, openProjResult] = useOpenProjectMutation();
+
+  const handleCreateAndOpenProjectForm = (e: React.SyntheticEvent) => {
+    e.preventDefault();
+    createProject({ variables: { name } });
+  };
+
+  return (
+    <div>
+      <Box mb={3}>
+        <Typography variant="h6">New project</Typography>
+      </Box>
+      <form onSubmit={handleCreateAndOpenProjectForm} autoComplete="off">
+        <TextField
+          sx={{
+            mr: 2,
+          }}
+          color="primary"
+          size="small"
+          label="Project name"
+          placeholder="Project name…"
+          onChange={(e) => setName(e.target.value)}
+          error={Boolean(createProjResult.error || openProjResult.error)}
+          helperText={
+            (createProjResult.error && createProjResult.error.message) ||
+            (openProjResult.error && openProjResult.error.message)
+          }
+        />
+        <Button
+          type="submit"
+          variant="contained"
+          color="primary"
+          size="large"
+          sx={{
+            pt: 0.9,
+            pb: 0.7,
+          }}
+          disabled={createProjResult.loading || openProjResult.loading}
+          startIcon={createProjResult.loading || openProjResult.loading ? <CircularProgress size={22} /> : <AddIcon />}
+        >
+          Create & open project
+        </Button>
+      </form>
+    </div>
+  );
+}
+
+export default NewProject;

admin/src/features/projects/components/ProjectList.tsx

@@ -1,4 +1,8 @@
-import { gql, useMutation, useQuery } from "@apollo/client";
+import CloseIcon from "@mui/icons-material/Close";
+import DeleteIcon from "@mui/icons-material/Delete";
+import DescriptionIcon from "@mui/icons-material/Description";
+import LaunchIcon from "@mui/icons-material/Launch";
+import { Alert } from "@mui/lab";
 import {
   Avatar,
   Box,
@@ -21,102 +25,26 @@ import {
   Typography,
   useTheme,
 } from "@mui/material";
-import CloseIcon from "@mui/icons-material/Close";
-import DescriptionIcon from "@mui/icons-material/Description";
-import DeleteIcon from "@mui/icons-material/Delete";
-import LaunchIcon from "@mui/icons-material/Launch";
-import { Alert } from "@mui/lab";
 import React, { useState } from "react";
 
-import { Project } from "../../lib/Project";
+import useOpenProjectMutation from "../hooks/useOpenProjectMutation";
 
-const PROJECTS = gql`
-  query Projects {
-    projects {
-      id
-      name
-      isActive
-    }
-  }
-`;
-
-const OPEN_PROJECT = gql`
-  mutation OpenProject($id: ID!) {
-    openProject(id: $id) {
-      id
-      name
-      isActive
-    }
-  }
-`;
-
-const CLOSE_PROJECT = gql`
-  mutation CloseProject {
-    closeProject {
-      success
-    }
-  }
-`;
-
-const DELETE_PROJECT = gql`
-  mutation DeleteProject($id: ID!) {
-    deleteProject(id: $id) {
-      success
-    }
-  }
-`;
+import {
+  ProjectsQuery,
+  useCloseProjectMutation,
+  useDeleteProjectMutation,
+  useProjectsQuery,
+} from "lib/graphql/generated";
 
 function ProjectList(): JSX.Element {
   const theme = useTheme();
-  const { loading: projLoading, error: projErr, data: projData } = useQuery<{ projects: Project[] }>(PROJECTS);
-  const [openProject, { error: openProjErr, loading: openProjLoading }] = useMutation<{ openProject: Project }>(
-    OPEN_PROJECT,
-    {
+  const projResult = useProjectsQuery({ fetchPolicy: "network-only" });
+  const [openProject, openProjResult] = useOpenProjectMutation();
+  const [closeProject, closeProjResult] = useCloseProjectMutation({
     errorPolicy: "all",
-      onError: () => {},
-      update(cache, { data }) {
-        cache.modify({
-          fields: {
-            activeProject() {
-              const activeProjRef = cache.writeFragment({
-                data: data?.openProject,
-                fragment: gql`
-                  fragment ActiveProject on Project {
-                    id
-                    name
-                    isActive
-                    type
-                  }
-                `,
-              });
-              return activeProjRef;
+    onCompleted() {
+      closeProjResult.client.resetStore();
     },
-            projects(_, { DELETE }) {
-              cache.writeFragment({
-                id: data?.openProject.id,
-                data: openProject,
-                fragment: gql`
-                  fragment OpenProject on Project {
-                    id
-                    name
-                    isActive
-                    type
-                  }
-                `,
-              });
-              return DELETE;
-            },
-            httpRequestLogFilter(_, { DELETE }) {
-              return DELETE;
-            },
-          },
-        });
-      },
-    }
-  );
-  const [closeProject, { error: closeProjErr }] = useMutation(CLOSE_PROJECT, {
-    errorPolicy: "all",
-    onError: () => {},
     update(cache) {
       cache.modify({
         fields: {
@@ -133,9 +61,8 @@ function ProjectList(): JSX.Element {
       });
     },
   });
-  const [deleteProject, { loading: deleteProjLoading, error: deleteProjErr }] = useMutation(DELETE_PROJECT, {
+  const [deleteProject, deleteProjResult] = useDeleteProjectMutation({
     errorPolicy: "all",
-    onError: () => {},
     update(cache) {
       cache.modify({
         fields: {
@@ -149,14 +76,16 @@ function ProjectList(): JSX.Element {
     },
   });
 
-  const [deleteProj, setDeleteProj] = useState<Project>();
+  const [deleteProj, setDeleteProj] = useState<ProjectsQuery["projects"][number]>();
   const [deleteDiagOpen, setDeleteDiagOpen] = useState(false);
-  const handleDeleteButtonClick = (project: any) => {
+  const handleDeleteButtonClick = (project: ProjectsQuery["projects"][number]) => {
     setDeleteProj(project);
     setDeleteDiagOpen(true);
   };
   const handleDeleteConfirm = () => {
-    deleteProject({ variables: { id: deleteProj?.id } });
+    if (deleteProj) {
+      deleteProject({ variables: { id: deleteProj.id } });
+    }
   };
   const handleDeleteCancel = () => {
     setDeleteDiagOpen(false);
@@ -180,7 +109,9 @@ function ProjectList(): JSX.Element {
           <DialogContentText>
             Deleting a project permanently removes all its data from the database. This action is irreversible.
           </DialogContentText>
-          {deleteProjErr && <Alert severity="error">Error closing project: {deleteProjErr.message}</Alert>}
+          {deleteProjResult.error && (
+            <Alert severity="error">Error closing project: {deleteProjResult.error.message}</Alert>
+          )}
         </DialogContent>
         <DialogActions>
           <Button onClick={handleDeleteCancel} autoFocus color="secondary" variant="contained">
@@ -195,7 +126,7 @@ function ProjectList(): JSX.Element {
               },
             }}
             onClick={handleDeleteConfirm}
-            disabled={deleteProjLoading}
+            disabled={deleteProjResult.loading}
             variant="contained"
           >
             Delete
@@ -219,16 +150,18 @@ function ProjectList(): JSX.Element {
       </Box>
 
       <Box mb={4}>
-        {projLoading && <CircularProgress />}
-        {projErr && <Alert severity="error">Error fetching projects: {projErr.message}</Alert>}
-        {openProjErr && <Alert severity="error">Error opening project: {openProjErr.message}</Alert>}
-        {closeProjErr && <Alert severity="error">Error closing project: {closeProjErr.message}</Alert>}
+        {projResult.loading && <CircularProgress />}
+        {projResult.error && <Alert severity="error">Error fetching projects: {projResult.error.message}</Alert>}
+        {openProjResult.error && <Alert severity="error">Error opening project: {openProjResult.error.message}</Alert>}
+        {closeProjResult.error && (
+          <Alert severity="error">Error closing project: {closeProjResult.error.message}</Alert>
+        )}
       </Box>
 
-      {projData && projData.projects.length > 0 && (
+      {projResult.data && projResult.data.projects.length > 0 && (
         <Paper>
           <List>
-            {projData.projects.map((project) => (
+            {projResult.data.projects.map((project) => (
               <ListItem key={project.id}>
                 <ListItemAvatar>
                   <Avatar
@@ -257,7 +190,7 @@ function ProjectList(): JSX.Element {
                     <Tooltip title="Open project">
                       <span>
                         <IconButton
-                          disabled={openProjLoading || projLoading}
+                          disabled={openProjResult.loading || projResult.loading}
                           onClick={() =>
                             openProject({
                               variables: { id: project.id },
@@ -282,7 +215,7 @@ function ProjectList(): JSX.Element {
           </List>
         </Paper>
       )}
-      {projData?.projects.length === 0 && (
+      {projResult.data?.projects.length === 0 && (
         <Alert severity="info">There are no projects. Create one to get started.</Alert>
       )}
     </div>

admin/src/features/projects/graphql/closeProject.graphql

@@ -0,0 +1,5 @@
+mutation CloseProject {
+  closeProject {
+    success
+  }
+}

admin/src/features/projects/graphql/createProject.graphql

@@ -0,0 +1,6 @@
+mutation CreateProject($name: String!) {
+  createProject(name: $name) {
+    id
+    name
+  }
+}

admin/src/features/projects/graphql/deleteProject.graphql

@@ -0,0 +1,5 @@
+mutation DeleteProject($id: ID!) {
+  deleteProject(id: $id) {
+    success
+  }
+}

admin/src/features/projects/graphql/openProject.graphql

@@ -0,0 +1,7 @@
+mutation OpenProject($id: ID!) {
+  openProject(id: $id) {
+    id
+    name
+    isActive
+  }
+}

admin/src/features/projects/graphql/projects.graphql

@@ -0,0 +1,7 @@
+query Projects {
+  projects {
+    id
+    name
+    isActive
+  }
+}

admin/src/features/projects/hooks/useOpenProjectMutation.ts

@@ -0,0 +1,47 @@
+import { gql } from "@apollo/client";
+
+import { useOpenProjectMutation as _useOpenProjectMutation } from "lib/graphql/generated";
+
+export default function useOpenProjectMutation() {
+  return _useOpenProjectMutation({
+    errorPolicy: "all",
+    update(cache, { data }) {
+      cache.modify({
+        fields: {
+          activeProject() {
+            const activeProjRef = cache.writeFragment({
+              data: data?.openProject,
+              fragment: gql`
+                fragment ActiveProject on Project {
+                  id
+                  name
+                  isActive
+                  type
+                }
+              `,
+            });
+            return activeProjRef;
+          },
+          projects(_, { DELETE }) {
+            cache.writeFragment({
+              id: data?.openProject?.id,
+              data: data?.openProject,
+              fragment: gql`
+                fragment OpenProject on Project {
+                  id
+                  name
+                  isActive
+                  type
+                }
+              `,
+            });
+            return DELETE;
+          },
+          httpRequestLogFilter(_, { DELETE }) {
+            return DELETE;
+          },
+        },
+      });
+    },
+  });
+}

admin/src/features/reqlog/components/LogDetail.tsx

@@ -0,0 +1,57 @@
+import Alert from "@mui/lab/Alert";
+import { Box, CircularProgress, Paper, Typography } from "@mui/material";
+
+import RequestDetail from "./RequestDetail";
+
+import Response from "lib/components/Response";
+import SplitPane from "lib/components/SplitPane";
+import { useHttpRequestLogQuery } from "lib/graphql/generated";
+
+interface Props {
+  id?: string;
+}
+
+function LogDetail({ id }: Props): JSX.Element {
+  const { loading, error, data } = useHttpRequestLogQuery({
+    variables: { id: id as string },
+    skip: id === undefined,
+  });
+
+  if (loading) {
+    return <CircularProgress />;
+  }
+  if (error) {
+    return <Alert severity="error">Error fetching logs details: {error.message}</Alert>;
+  }
+
+  if (data && !data.httpRequestLog) {
+    return (
+      <Alert severity="warning">
+        Request <strong>{id}</strong> was not found.
+      </Alert>
+    );
+  }
+
+  if (!data?.httpRequestLog) {
+    return (
+      <Paper variant="centered" sx={{ mt: 2 }}>
+        <Typography>Select a log entry…</Typography>
+      </Paper>
+    );
+  }
+
+  const reqLog = data.httpRequestLog;
+
+  return (
+    <SplitPane split="vertical" size={"50%"}>
+      <RequestDetail request={reqLog} />
+      {reqLog.response && (
+        <Box sx={{ height: "100%", pt: 1, pl: 2, pb: 2 }}>
+          <Response response={reqLog.response} />
+        </Box>
+      )}
+    </SplitPane>
+  );
+}
+
+export default LogDetail;

admin/src/features/reqlog/components/RequestDetail.tsx

@@ -0,0 +1,47 @@
+import { Typography, Box } from "@mui/material";
+import React from "react";
+
+import RequestTabs from "lib/components/RequestTabs";
+import { HttpRequestLogQuery } from "lib/graphql/generated";
+import { queryParamsFromURL } from "lib/queryParamsFromURL";
+
+interface Props {
+  request: NonNullable<HttpRequestLogQuery["httpRequestLog"]>;
+}
+
+function RequestDetail({ request }: Props): JSX.Element {
+  const { method, url, headers, body } = request;
+
+  const parsedUrl = new URL(url);
+
+  return (
+    <Box sx={{ height: "100%", display: "flex", flexDirection: "column", pr: 2, pb: 2 }}>
+      <Box sx={{ p: 2, pb: 0 }}>
+        <Typography variant="overline" color="textSecondary" style={{ float: "right" }}>
+          Request
+        </Typography>
+        <Typography
+          variant="h6"
+          component="h2"
+          sx={{
+            fontSize: "1rem",
+            fontFamily: "'JetBrains Mono', monospace",
+            display: "block",
+            overflow: "hidden",
+            whiteSpace: "nowrap",
+            textOverflow: "ellipsis",
+            pr: 2,
+          }}
+        >
+          {method} {decodeURIComponent(parsedUrl.pathname + parsedUrl.search)}
+        </Typography>
+      </Box>
+
+      <Box flex="1 auto" overflow="scroll">
+        <RequestTabs headers={headers} queryParams={queryParamsFromURL(url)} body={body} />
+      </Box>
+    </Box>
+  );
+}
+
+export default RequestDetail;

admin/src/features/reqlog/components/RequestLogs.tsx

@@ -0,0 +1,129 @@
+import ContentCopyIcon from "@mui/icons-material/ContentCopy";
+import {
+  Alert,
+  Box,
+  IconButton,
+  Link,
+  MenuItem,
+  Snackbar,
+  styled,
+  TableCell,
+  TableCellProps,
+  Tooltip,
+} from "@mui/material";
+import { useRouter } from "next/router";
+import { useState } from "react";
+
+import LogDetail from "./LogDetail";
+import Search from "./Search";
+
+import RequestsTable from "lib/components/RequestsTable";
+import SplitPane from "lib/components/SplitPane";
+import useContextMenu from "lib/components/useContextMenu";
+import { useCreateSenderRequestFromHttpRequestLogMutation, useHttpRequestLogsQuery } from "lib/graphql/generated";
+
+const ActionsTableCell = styled(TableCell)<TableCellProps>(() => ({
+  paddingTop: 0,
+  paddingBottom: 0,
+}));
+
+export function RequestLogs(): JSX.Element {
+  const router = useRouter();
+  const id = router.query.id as string | undefined;
+  const { data } = useHttpRequestLogsQuery({
+    pollInterval: 1000,
+  });
+
+  const [createSenderReqFromLog] = useCreateSenderRequestFromHttpRequestLogMutation({
+    onCompleted({ createSenderRequestFromHttpRequestLog }) {
+      const { id } = createSenderRequestFromHttpRequestLog;
+      setNewSenderReqId(id);
+      setCopiedReqNotifOpen(true);
+    },
+  });
+
+  const [copyToSenderId, setCopyToSenderId] = useState("");
+  const [Menu, handleContextMenu, handleContextMenuClose] = useContextMenu();
+
+  const handleCopyToSenderClick = () => {
+    createSenderReqFromLog({
+      variables: {
+        id: copyToSenderId,
+      },
+    });
+    handleContextMenuClose();
+  };
+
+  const [newSenderReqId, setNewSenderReqId] = useState("");
+  const [copiedReqNotifOpen, setCopiedReqNotifOpen] = useState(false);
+  const handleCloseCopiedNotif = (_: Event | React.SyntheticEvent, reason?: string) => {
+    if (reason === "clickaway") {
+      return;
+    }
+    setCopiedReqNotifOpen(false);
+  };
+
+  const handleRowClick = (id: string) => {
+    router.push(`/proxy/logs?id=${id}`);
+  };
+
+  const handleRowContextClick = (e: React.MouseEvent, id: string) => {
+    setCopyToSenderId(id);
+    handleContextMenu(e);
+  };
+
+  const actionsCell = (id: string) => (
+    <ActionsTableCell>
+      <Tooltip title="Copy to Sender">
+        <IconButton
+          size="small"
+          onClick={() => {
+            setCopyToSenderId(id);
+            createSenderReqFromLog({
+              variables: {
+                id,
+              },
+            });
+          }}
+        >
+          <ContentCopyIcon fontSize="small" />
+        </IconButton>
+      </Tooltip>
+    </ActionsTableCell>
+  );
+
+  return (
+    <Box display="flex" flexDirection="column" height="100%">
+      <Search />
+      <Box sx={{ display: "flex", flex: "1 auto", position: "relative" }}>
+        <SplitPane split="horizontal" size={"40%"}>
+          <Box sx={{ width: "100%", height: "100%", pb: 2 }}>
+            <Box sx={{ width: "100%", height: "100%", overflow: "scroll" }}>
+              <Menu>
+                <MenuItem onClick={handleCopyToSenderClick}>Copy request to Sender</MenuItem>
+              </Menu>
+              <Snackbar
+                open={copiedReqNotifOpen}
+                autoHideDuration={3000}
+                onClose={handleCloseCopiedNotif}
+                anchorOrigin={{ horizontal: "center", vertical: "bottom" }}
+              >
+                <Alert onClose={handleCloseCopiedNotif} severity="info">
+                  Request was copied. <Link href={`/sender?id=${newSenderReqId}`}>Edit in Sender.</Link>
+                </Alert>
+              </Snackbar>
+              <RequestsTable
+                requests={data?.httpRequestLogs || []}
+                activeRowId={id}
+                actionsCell={actionsCell}
+                onRowClick={handleRowClick}
+                onContextMenu={handleRowContextClick}
+              />
+            </Box>
+          </Box>
+          <LogDetail id={id} />
+        </SplitPane>
+      </Box>
+    </Box>
+  );
+}

admin/src/features/reqlog/components/Search.tsx

@@ -1,3 +1,7 @@
+import DeleteIcon from "@mui/icons-material/Delete";
+import FilterListIcon from "@mui/icons-material/FilterList";
+import SearchIcon from "@mui/icons-material/Search";
+import { Alert } from "@mui/lab";
 import {
   Box,
   Checkbox,
@@ -11,68 +15,43 @@ import {
   useTheme,
 } from "@mui/material";
 import IconButton from "@mui/material/IconButton";
-import SearchIcon from "@mui/icons-material/Search";
-import FilterListIcon from "@mui/icons-material/FilterList";
-import DeleteIcon from "@mui/icons-material/Delete";
 import React, { useRef, useState } from "react";
-import { gql, useMutation, useQuery } from "@apollo/client";
-import { withoutTypename } from "../../lib/omitTypename";
-import { Alert } from "@mui/lab";
-import { useClearHTTPRequestLog } from "./hooks/useClearHTTPRequestLog";
-import { ConfirmationDialog, useConfirmationDialog } from "./ConfirmationDialog";
 
-const FILTER = gql`
-  query HttpRequestLogFilter {
-    httpRequestLogFilter {
-      onlyInScope
-      searchExpression
-    }
-  }
-`;
-
-const SET_FILTER = gql`
-  mutation SetHttpRequestLogFilter($filter: HttpRequestLogFilterInput) {
-    setHttpRequestLogFilter(filter: $filter) {
-      onlyInScope
-      searchExpression
-    }
-  }
-`;
-
-export interface SearchFilter {
-  onlyInScope: boolean;
-  searchExpression: string;
-}
+import { ConfirmationDialog, useConfirmationDialog } from "lib/components/ConfirmationDialog";
+import {
+  HttpRequestLogFilterDocument,
+  HttpRequestLogsDocument,
+  useClearHttpRequestLogMutation,
+  useHttpRequestLogFilterQuery,
+  useSetHttpRequestLogFilterMutation,
+} from "lib/graphql/generated";
+import { withoutTypename } from "lib/graphql/omitTypename";
 
 function Search(): JSX.Element {
   const theme = useTheme();
 
   const [searchExpr, setSearchExpr] = useState("");
-  const {
-    loading: filterLoading,
-    error: filterErr,
-    data: filter,
-  } = useQuery(FILTER, {
+  const filterResult = useHttpRequestLogFilterQuery({
     onCompleted: (data) => {
       setSearchExpr(data.httpRequestLogFilter?.searchExpression || "");
     },
   });
+  const filter = filterResult.data?.httpRequestLogFilter;
 
-  const [setFilterMutate, { error: setFilterErr, loading: setFilterLoading }] = useMutation<{
-    setHttpRequestLogFilter: SearchFilter | null;
-  }>(SET_FILTER, {
+  const [setFilterMutate, setFilterResult] = useSetHttpRequestLogFilterMutation({
     update(cache, { data }) {
       cache.writeQuery({
-        query: FILTER,
+        query: HttpRequestLogFilterDocument,
         data: {
           httpRequestLogFilter: data?.setHttpRequestLogFilter,
         },
       });
     },
-    onError: () => {},
   });
 
-  const [clearHTTPRequestLog, clearHTTPRequestLogResult] = useClearHTTPRequestLog();
+  const [clearHTTPRequestLog, clearHTTPRequestLogResult] = useClearHttpRequestLogMutation({
+    refetchQueries: [{ query: HttpRequestLogsDocument }],
+  });
   const clearHTTPConfirmationDialog = useConfirmationDialog();
 
   const filterRef = useRef<HTMLFormElement>(null);
@@ -82,7 +61,7 @@ function Search(): JSX.Element {
     setFilterMutate({
       variables: {
         filter: {
-          ...withoutTypename(filter?.httpRequestLogFilter),
+          ...withoutTypename(filter),
           searchExpression: searchExpr,
         },
       },
@@ -100,8 +79,8 @@ function Search(): JSX.Element {
 
   return (
     <Box>
-      <Error prefix="Error fetching filter" error={filterErr} />
-      <Error prefix="Error setting filter" error={setFilterErr} />
+      <Error prefix="Error fetching filter" error={filterResult.error} />
+      <Error prefix="Error setting filter" error={setFilterResult.error} />
       <Error prefix="Error clearing all HTTP logs" error={clearHTTPRequestLogResult.error} />
       <Box style={{ display: "flex", flex: 1 }}>
         <ClickAwayListener onClickAway={handleClickAway}>
@@ -121,10 +100,10 @@ function Search(): JSX.Element {
                 onClick={() => setFilterOpen(!filterOpen)}
                 sx={{
                   p: 1,
-                  color: filter?.httpRequestLogFilter?.onlyInScope ? "primary.main" : "inherit",
+                  color: filter?.onlyInScope ? "primary.main" : "inherit",
                 }}
               >
-                {filterLoading || setFilterLoading ? (
+                {filterResult.loading || setFilterResult.loading ? (
                   <CircularProgress sx={{ color: theme.palette.text.primary }} size={23} />
                 ) : (
                   <FilterListIcon />
@@ -162,13 +141,13 @@ function Search(): JSX.Element {
                 <FormControlLabel
                   control={
                     <Checkbox
-                      checked={filter?.httpRequestLogFilter?.onlyInScope ? true : false}
-                      disabled={filterLoading || setFilterLoading}
+                      checked={filter?.onlyInScope ? true : false}
+                      disabled={filterResult.loading || setFilterResult.loading}
                       onChange={(e) =>
                         setFilterMutate({
                           variables: {
                             filter: {
-                              ...withoutTypename(filter?.httpRequestLogFilter),
+                              ...withoutTypename(filter),
                               onlyInScope: e.target.checked,
                             },
                           },

admin/src/features/reqlog/graphql/clearHttpRequestLog.graphql

@@ -0,0 +1,5 @@
+mutation ClearHTTPRequestLog {
+  clearHTTPRequestLog {
+    success
+  }
+}

admin/src/features/reqlog/graphql/httpRequestLog.graphql

@@ -0,0 +1,24 @@
+query HttpRequestLog($id: ID!) {
+  httpRequestLog(id: $id) {
+    id
+    method
+    url
+    proto
+    headers {
+      key
+      value
+    }
+    body
+    response {
+      id
+      proto
+      headers {
+        key
+        value
+      }
+      statusCode
+      statusReason
+      body
+    }
+  }
+}

admin/src/features/reqlog/graphql/httpRequestLogFilter.graphql

@@ -0,0 +1,6 @@
+query HttpRequestLogFilter {
+  httpRequestLogFilter {
+    onlyInScope
+    searchExpression
+  }
+}

admin/src/features/reqlog/graphql/httpRequestLogs.graphql

@@ -0,0 +1,12 @@
+query HttpRequestLogs {
+  httpRequestLogs {
+    id
+    method
+    url
+    timestamp
+    response {
+      statusCode
+      statusReason
+    }
+  }
+}

admin/src/features/reqlog/graphql/setHttpRequestLogFilter.graphql

@@ -0,0 +1,6 @@
+mutation SetHttpRequestLogFilter($filter: HttpRequestLogFilterInput) {
+  setHttpRequestLogFilter(filter: $filter) {
+    onlyInScope
+    searchExpression
+  }
+}

admin/src/features/reqlog/index.ts

@@ -0,0 +1,3 @@
+import { RequestLogs } from "./components/RequestLogs";
+
+export default RequestLogs;

admin/src/features/scope/components/AddRule.tsx

@@ -1,4 +1,6 @@
-import { gql, useApolloClient, useMutation } from "@apollo/client";
+import { useApolloClient } from "@apollo/client";
+import AddIcon from "@mui/icons-material/Add";
+import { Alert } from "@mui/lab";
 import {
   Box,
   Button,
@@ -10,35 +12,22 @@ import {
   RadioGroup,
   TextField,
 } from "@mui/material";
-import AddIcon from "@mui/icons-material/Add";
-import { Alert } from "@mui/lab";
-import React from "react";
-import { SCOPE } from "./Rules";
-import { ScopeRule } from "../../lib/scope";
+import React, { useState } from "react";
 
-const SET_SCOPE = gql`
-  mutation SetScope($scope: [ScopeRuleInput!]!) {
-    setScope(scope: $scope) {
-      url
-    }
-  }
-`;
+import { ScopeDocument, ScopeQuery, ScopeRule, useSetScopeMutation } from "lib/graphql/generated";
 
 function AddRule(): JSX.Element {
-  const [ruleType, setRuleType] = React.useState("url");
-  const [expression, setExpression] = React.useState("");
+  const [ruleType, setRuleType] = useState("url");
+  const [expression, setExpression] = useState("");
 
   const client = useApolloClient();
-  const [setScope, { error, loading }] = useMutation(SET_SCOPE, {
-    onError() {},
-    onCompleted() {
-      setExpression("");
-    },
-    update(_, { data: { setScope } }) {
+  const [setScope, { error, loading }] = useSetScopeMutation({
+    onCompleted({ setScope }) {
       client.writeQuery({
-        query: SCOPE,
+        query: ScopeDocument,
         data: { scope: setScope },
       });
+      setExpression("");
     },
   });
 
@@ -50,8 +39,8 @@ function AddRule(): JSX.Element {
     let scope: ScopeRule[] = [];
 
     try {
-      const data = client.readQuery<{ scope: ScopeRule[] }>({
-        query: SCOPE,
+      const data = client.readQuery<ScopeQuery>({
+        query: ScopeDocument,
       });
       if (data) {
         scope = data.scope;

admin/src/features/scope/components/RuleListItem.tsx

@@ -1,4 +1,6 @@
-import { gql, useApolloClient, useMutation, useQuery } from "@apollo/client";
+import { useApolloClient } from "@apollo/client";
+import CodeIcon from "@mui/icons-material/Code";
+import DeleteIcon from "@mui/icons-material/Delete";
 import {
   Avatar,
   Chip,
@@ -9,32 +11,24 @@ import {
   ListItemText,
   Tooltip,
 } from "@mui/material";
-import CodeIcon from "@mui/icons-material/Code";
-import DeleteIcon from "@mui/icons-material/Delete";
 import React from "react";
-import { SCOPE } from "./Rules";
-import { ScopeRule } from "../../lib/scope";
 
-const SET_SCOPE = gql`
-  mutation SetScope($scope: [ScopeRuleInput!]!) {
-    setScope(scope: $scope) {
-      url
-    }
-  }
-`;
+import { ScopeDocument, ScopeQuery, useSetScopeMutation } from "lib/graphql/generated";
+
+type ScopeRule = ScopeQuery["scope"][number];
 
 type RuleListItemProps = {
-  scope: ScopeRule[];
+  scope: ScopeQuery["scope"];
   rule: ScopeRule;
   index: number;
 };
 
 function RuleListItem({ scope, rule, index }: RuleListItemProps): JSX.Element {
   const client = useApolloClient();
-  const [setScope, { loading }] = useMutation(SET_SCOPE, {
-    update(_, { data: { setScope } }) {
+  const [setScope, { loading }] = useSetScopeMutation({
+    onCompleted({ setScope }) {
       client.writeQuery({
-        query: SCOPE,
+        query: ScopeDocument,
         data: { scope: setScope },
       });
     },

admin/src/features/scope/components/Rules.tsx

@@ -1,20 +1,13 @@
-import { gql, useQuery } from "@apollo/client";
-import { CircularProgress, List } from "@mui/material";
 import { Alert } from "@mui/lab";
+import { CircularProgress, List } from "@mui/material";
 import React from "react";
-import RuleListItem from "./RuleListItem";
-import { ScopeRule } from "../../lib/scope";
 
-export const SCOPE = gql`
-  query Scope {
-    scope {
-      url
-    }
-  }
-`;
+import RuleListItem from "./RuleListItem";
+
+import { useScopeQuery } from "lib/graphql/generated";
 
 function Rules(): JSX.Element {
-  const { loading, error, data } = useQuery<{ scope: ScopeRule[] }>(SCOPE);
+  const { loading, error, data } = useScopeQuery();
 
   return (
     <div>

admin/src/features/scope/graphql/scope.graphql

@@ -0,0 +1,5 @@
+query Scope {
+  scope {
+    url
+  }
+}

admin/src/features/scope/graphql/setScope.graphql

@@ -0,0 +1,5 @@
+mutation SetScope($scope: [ScopeRuleInput!]!) {
+  setScope(scope: $scope) {
+    url
+  }
+}

admin/src/features/sender/components/EditRequest.tsx

@@ -0,0 +1,356 @@
+import {
+  Alert,
+  Box,
+  BoxProps,
+  Button,
+  InputLabel,
+  FormControl,
+  MenuItem,
+  Select,
+  TextField,
+  Typography,
+} from "@mui/material";
+import { useRouter } from "next/router";
+import React, { useState } from "react";
+
+import { KeyValuePair, sortKeyValuePairs } from "lib/components/KeyValuePair";
+import RequestTabs from "lib/components/RequestTabs";
+import Response from "lib/components/Response";
+import SplitPane from "lib/components/SplitPane";
+import {
+  GetSenderRequestQuery,
+  useCreateOrUpdateSenderRequestMutation,
+  HttpProtocol,
+  useGetSenderRequestQuery,
+  useSendRequestMutation,
+} from "lib/graphql/generated";
+import { queryParamsFromURL } from "lib/queryParamsFromURL";
+
+enum HttpMethod {
+  Get = "GET",
+  Post = "POST",
+  Put = "PUT",
+  Patch = "PATCH",
+  Delete = "DELETE",
+  Head = "HEAD",
+  Options = "OPTIONS",
+  Connect = "CONNECT",
+  Trace = "TRACE",
+}
+
+enum HttpProto {
+  Http10 = "HTTP/1.0",
+  Http11 = "HTTP/1.1",
+  Http20 = "HTTP/2.0",
+}
+
+const httpProtoMap = new Map([
+  [HttpProto.Http10, HttpProtocol.Http10],
+  [HttpProto.Http11, HttpProtocol.Http11],
+  [HttpProto.Http20, HttpProtocol.Http20],
+]);
+
+function updateKeyPairItem(key: string, value: string, idx: number, items: KeyValuePair[]): KeyValuePair[] {
+  const updated = [...items];
+  updated[idx] = { key, value };
+
+  // Append an empty key-value pair if the last item in the array isn't blank
+  // anymore.
+  if (items.length - 1 === idx && items[idx].key === "" && items[idx].value === "") {
+    updated.push({ key: "", value: "" });
+  }
+
+  return updated;
+}
+
+function updateURLQueryParams(url: string, queryParams: KeyValuePair[]) {
+  // Note: We don't use the `URL` interface, because we're potentially dealing
+  // with malformed/incorrect URLs, which would yield TypeErrors when constructed
+  // via `URL`.
+  let newURL = url;
+
+  const questionMarkIndex = url.indexOf("?");
+  if (questionMarkIndex !== -1) {
+    newURL = newURL.slice(0, questionMarkIndex);
+  }
+
+  const searchParams = new URLSearchParams();
+  for (const { key, value } of queryParams.filter(({ key }) => key !== "")) {
+    searchParams.append(key, value);
+  }
+
+  const rawQueryParams = decodeURI(searchParams.toString());
+
+  if (rawQueryParams == "") {
+    return newURL;
+  }
+
+  return newURL + "?" + rawQueryParams;
+}
+
+function EditRequest(): JSX.Element {
+  const router = useRouter();
+  const reqId = router.query.id as string | undefined;
+
+  const [method, setMethod] = useState(HttpMethod.Get);
+  const [url, setURL] = useState("");
+  const [proto, setProto] = useState(HttpProto.Http20);
+  const [queryParams, setQueryParams] = useState<KeyValuePair[]>([{ key: "", value: "" }]);
+  const [headers, setHeaders] = useState<KeyValuePair[]>([{ key: "", value: "" }]);
+  const [body, setBody] = useState("");
+
+  const handleQueryParamChange = (key: string, value: string, idx: number) => {
+    setQueryParams((prev) => {
+      const updated = updateKeyPairItem(key, value, idx, prev);
+      setURL((prev) => updateURLQueryParams(prev, updated));
+      return updated;
+    });
+  };
+  const handleQueryParamDelete = (idx: number) => {
+    setQueryParams((prev) => {
+      const updated = prev.slice(0, idx).concat(prev.slice(idx + 1, prev.length));
+      setURL((prev) => updateURLQueryParams(prev, updated));
+      return updated;
+    });
+  };
+
+  const handleHeaderChange = (key: string, value: string, idx: number) => {
+    setHeaders((prev) => updateKeyPairItem(key, value, idx, prev));
+  };
+  const handleHeaderDelete = (idx: number) => {
+    setHeaders((prev) => prev.slice(0, idx).concat(prev.slice(idx + 1, prev.length)));
+  };
+
+  const handleURLChange = (url: string) => {
+    setURL(url);
+
+    const questionMarkIndex = url.indexOf("?");
+    if (questionMarkIndex === -1) {
+      setQueryParams([{ key: "", value: "" }]);
+      return;
+    }
+
+    const newQueryParams = queryParamsFromURL(url);
+    // Push empty row.
+    newQueryParams.push({ key: "", value: "" });
+    setQueryParams(newQueryParams);
+  };
+
+  const [response, setResponse] = useState<NonNullable<GetSenderRequestQuery["senderRequest"]>["response"]>(null);
+  const getReqResult = useGetSenderRequestQuery({
+    variables: { id: reqId as string },
+    skip: reqId === undefined,
+    onCompleted: ({ senderRequest }) => {
+      if (!senderRequest) {
+        return;
+      }
+
+      setURL(senderRequest.url);
+      setMethod(senderRequest.method);
+      setBody(senderRequest.body || "");
+
+      const newQueryParams = queryParamsFromURL(senderRequest.url);
+      // Push empty row.
+      newQueryParams.push({ key: "", value: "" });
+      setQueryParams(newQueryParams);
+
+      const newHeaders = sortKeyValuePairs(senderRequest.headers || []);
+      setHeaders([...newHeaders.map(({ key, value }) => ({ key, value })), { key: "", value: "" }]);
+      setResponse(senderRequest.response);
+    },
+  });
+
+  const [createOrUpdateRequest, createResult] = useCreateOrUpdateSenderRequestMutation();
+  const [sendRequest, sendResult] = useSendRequestMutation();
+
+  const createOrUpdateRequestAndSend = () => {
+    const senderReq = getReqResult?.data?.senderRequest;
+    createOrUpdateRequest({
+      variables: {
+        request: {
+          // Update existing sender request if it was cloned from a request log
+          // and it doesn't have a response body yet (e.g. not sent yet).
+          ...(senderReq && senderReq.sourceRequestLogID && !senderReq.response && { id: senderReq.id }),
+          url,
+          method,
+          proto: httpProtoMap.get(proto),
+          headers: headers.filter((kv) => kv.key !== ""),
+          body: body || undefined,
+        },
+      },
+      onCompleted: ({ createOrUpdateSenderRequest }) => {
+        const { id } = createOrUpdateSenderRequest;
+        sendRequestAndPushRoute(id);
+      },
+    });
+  };
+
+  const sendRequestAndPushRoute = (id: string) => {
+    sendRequest({
+      errorPolicy: "all",
+      onCompleted: () => {
+        router.push(`/sender?id=${id}`);
+      },
+      variables: {
+        id,
+      },
+    });
+  };
+
+  const handleFormSubmit: React.FormEventHandler = (e) => {
+    e.preventDefault();
+    createOrUpdateRequestAndSend();
+  };
+
+  return (
+    <Box display="flex" flexDirection="column" height="100%" gap={2}>
+      <Box component="form" autoComplete="off" onSubmit={handleFormSubmit}>
+        <Box sx={{ display: "flex", gap: 1, flexWrap: "wrap" }}>
+          <UrlBar
+            method={method}
+            onMethodChange={setMethod}
+            url={url.toString()}
+            onUrlChange={handleURLChange}
+            proto={proto}
+            onProtoChange={setProto}
+            sx={{ flex: "1 auto" }}
+          />
+          <Button
+            variant="contained"
+            disableElevation
+            sx={{ width: "8rem" }}
+            type="submit"
+            disabled={createResult.loading || sendResult.loading}
+          >
+            Send
+          </Button>
+        </Box>
+        {createResult.error && (
+          <Alert severity="error" sx={{ mt: 1 }}>
+            {createResult.error.message}
+          </Alert>
+        )}
+        {sendResult.error && (
+          <Alert severity="error" sx={{ mt: 1 }}>
+            {sendResult.error.message}
+          </Alert>
+        )}
+      </Box>
+
+      <Box flex="1 auto" position="relative">
+        <SplitPane split="vertical" size={"50%"}>
+          <Box sx={{ height: "100%", mr: 2, pb: 2, position: "relative" }}>
+            <Typography variant="overline" color="textSecondary" sx={{ position: "absolute", right: 0, mt: 1.2 }}>
+              Request
+            </Typography>
+            <RequestTabs
+              queryParams={queryParams}
+              headers={headers}
+              body={body}
+              onQueryParamChange={handleQueryParamChange}
+              onQueryParamDelete={handleQueryParamDelete}
+              onHeaderChange={handleHeaderChange}
+              onHeaderDelete={handleHeaderDelete}
+              onBodyChange={setBody}
+            />
+          </Box>
+          <Box sx={{ height: "100%", position: "relative", ml: 2, pb: 2 }}>
+            <Response response={response} />
+          </Box>
+        </SplitPane>
+      </Box>
+    </Box>
+  );
+}
+
+interface UrlBarProps extends BoxProps {
+  method: HttpMethod;
+  onMethodChange: (method: HttpMethod) => void;
+  url: string;
+  onUrlChange: (url: string) => void;
+  proto: HttpProto;
+  onProtoChange: (proto: HttpProto) => void;
+}
+
+function UrlBar(props: UrlBarProps) {
+  const { method, onMethodChange, url, onUrlChange, proto, onProtoChange, ...other } = props;
+
+  return (
+    <Box {...other} sx={{ ...other.sx, display: "flex" }}>
+      <FormControl>
+        <InputLabel id="req-method-label">Method</InputLabel>
+        <Select
+          labelId="req-method-label"
+          id="req-method"
+          value={method}
+          label="Method"
+          onChange={(e) => onMethodChange(e.target.value as HttpMethod)}
+          sx={{
+            width: "8rem",
+            ".MuiOutlinedInput-notchedOutline": {
+              borderRightWidth: 0,
+              borderTopRightRadius: 0,
+              borderBottomRightRadius: 0,
+            },
+            "&:hover .MuiOutlinedInput-notchedOutline": {
+              borderRightWidth: 1,
+            },
+          }}
+        >
+          {Object.values(HttpMethod).map((method) => (
+            <MenuItem key={method} value={method}>
+              {method}
+            </MenuItem>
+          ))}
+        </Select>
+      </FormControl>
+      <TextField
+        label="URL"
+        placeholder="E.g. “https://example.com/foobar”"
+        value={url}
+        onChange={(e) => onUrlChange(e.target.value)}
+        required
+        variant="outlined"
+        InputLabelProps={{
+          shrink: true,
+        }}
+        InputProps={{
+          sx: {
+            ".MuiOutlinedInput-notchedOutline": {
+              borderRadius: 0,
+            },
+          },
+        }}
+        sx={{ flexGrow: 1 }}
+      />
+      <FormControl>
+        <InputLabel id="req-proto-label">Protocol</InputLabel>
+        <Select
+          labelId="req-proto-label"
+          id="req-proto"
+          value={proto}
+          label="Protocol"
+          onChange={(e) => onProtoChange(e.target.value as HttpProto)}
+          sx={{
+            ".MuiOutlinedInput-notchedOutline": {
+              borderLeftWidth: 0,
+              borderTopLeftRadius: 0,
+              borderBottomLeftRadius: 0,
+            },
+            "&:hover .MuiOutlinedInput-notchedOutline": {
+              borderLeftWidth: 1,
+            },
+          }}
+        >
+          {Object.values(HttpProto).map((proto) => (
+            <MenuItem key={proto} value={proto}>
+              {proto}
+            </MenuItem>
+          ))}
+        </Select>
+      </FormControl>
+    </Box>
+  );
+}
+
+export default EditRequest;

admin/src/features/sender/components/History.tsx

@@ -0,0 +1,35 @@
+import { Box, Paper, Typography } from "@mui/material";
+import { useRouter } from "next/router";
+
+import RequestsTable from "lib/components/RequestsTable";
+import { useGetSenderRequestsQuery } from "lib/graphql/generated";
+
+function History(): JSX.Element {
+  const { data, loading } = useGetSenderRequestsQuery({
+    pollInterval: 1000,
+  });
+
+  const router = useRouter();
+  const activeId = router.query.id as string | undefined;
+
+  const handleRowClick = (id: string) => {
+    router.push(`/sender?id=${id}`);
+  };
+
+  return (
+    <Box>
+      {!loading && data?.senderRequests && data?.senderRequests.length > 0 && (
+        <RequestsTable requests={data.senderRequests} onRowClick={handleRowClick} activeRowId={activeId} />
+      )}
+      <Box sx={{ mt: 2, height: "100%" }}>
+        {!loading && data?.senderRequests.length === 0 && (
+          <Paper variant="centered">
+            <Typography>No requests created yet.</Typography>
+          </Paper>
+        )}
+      </Box>
+    </Box>
+  );
+}
+
+export default History;

admin/src/features/sender/components/Sender.tsx

@@ -0,0 +1,21 @@
+import { Box } from "@mui/material";
+
+import EditRequest from "./EditRequest";
+import History from "./History";
+
+import SplitPane from "lib/components/SplitPane";
+
+export default function Sender(): JSX.Element {
+  return (
+    <Box sx={{ height: "100%", position: "relative" }}>
+      <SplitPane split="horizontal" size="70%">
+        <Box sx={{ width: "100%", pt: "0.75rem" }}>
+          <EditRequest />
+        </Box>
+        <Box sx={{ height: "100%", overflow: "scroll" }}>
+          <History />
+        </Box>
+      </SplitPane>
+    </Box>
+  );
+}

admin/src/features/sender/graphql/createOrUpdateRequest.graphql

@@ -0,0 +1,5 @@
+mutation CreateOrUpdateSenderRequest($request: SenderRequestInput!) {
+  createOrUpdateSenderRequest(request: $request) {
+    id
+  }
+}

admin/src/features/sender/graphql/createSenderRequestFromRequestLog.graphql

@@ -0,0 +1,5 @@
+mutation CreateSenderRequestFromHttpRequestLog($id: ID!) {
+  createSenderRequestFromHttpRequestLog(id: $id) {
+    id
+  }
+}

admin/src/features/sender/graphql/sendRequest.graphql

@@ -0,0 +1,5 @@
+mutation SendRequest($id: ID!) {
+  sendRequest(id: $id) {
+    id
+  }
+}

admin/src/features/sender/graphql/senderRequest.graphql

@@ -0,0 +1,26 @@
+query GetSenderRequest($id: ID!) {
+  senderRequest(id: $id) {
+    id
+    sourceRequestLogID
+    url
+    method
+    proto
+    headers {
+      key
+      value
+    }
+    body
+    timestamp
+    response {
+      id
+      proto
+      statusCode
+      statusReason
+      body
+      headers {
+        key
+        value
+      }
+    }
+  }
+}

admin/src/features/sender/graphql/senderRequests.graphql

@@ -0,0 +1,12 @@
+query GetSenderRequests {
+  senderRequests {
+    id
+    url
+    method
+    response {
+      id
+      statusCode
+      statusReason
+    }
+  }
+}

admin/src/features/sender/index.ts

@@ -0,0 +1,3 @@
+import Sender from "./components/Sender";
+
+export default Sender;

admin/src/lib/ActiveProjectContext.tsx

@@ -0,0 +1,20 @@
+import React, { createContext, useContext } from "react";
+
+import { Project, useProjectsQuery } from "./graphql/generated";
+
+const ActiveProjectContext = createContext<Project | null>(null);
+
+interface Props {
+  children?: React.ReactNode | undefined;
+}
+
+export function ActiveProjectProvider({ children }: Props): JSX.Element {
+  const { data } = useProjectsQuery();
+  const project = data?.projects.find((project) => project.isActive) || null;
+
+  return <ActiveProjectContext.Provider value={project}>{children}</ActiveProjectContext.Provider>;
+}
+
+export function useActiveProject() {
+  return useContext(ActiveProjectContext);
+}

admin/src/lib/Project.ts

@@ -1,5 +0,0 @@
-export type Project = {
-    id: string
-    name: string
-    isActive: boolean
-}

admin/src/lib/components/ConfirmationDialog.tsx

@@ -1,10 +1,10 @@
-import React, { useState } from "react";
 import Button from "@mui/material/Button";
 import Dialog from "@mui/material/Dialog";
 import DialogActions from "@mui/material/DialogActions";
 import DialogContent from "@mui/material/DialogContent";
 import DialogContentText from "@mui/material/DialogContentText";
 import DialogTitle from "@mui/material/DialogTitle";
+import React, { useState } from "react";
 
 export function useConfirmationDialog() {
   const [isOpen, setIsOpen] = useState(false);

admin/src/lib/components/Editor.tsx

@@ -1,7 +1,6 @@
-import MonacoEditor from "@monaco-editor/react";
-import monaco from "monaco-editor/esm/vs/editor/editor.api";
+import MonacoEditor, { EditorProps } from "@monaco-editor/react";
 
-const monacoOptions: monaco.editor.IEditorOptions = {
+const defaultMonacoOptions: EditorProps["options"] = {
   readOnly: true,
   wordWrap: "on",
   minimap: {
@@ -12,8 +11,9 @@ const monacoOptions: monaco.editor.IEditorOptions = {
 type language = "html" | "typescript" | "json";
 
 function languageForContentType(contentType?: string): language | undefined {
-  switch (contentType) {
+  switch (contentType?.toLowerCase()) {
     case "text/html":
+    case "text/html; charset=utf-8":
       return "html";
     case "application/json":
     case "application/json; charset=utf-8":
@@ -29,16 +29,18 @@ function languageForContentType(contentType?: string): language | undefined {
 interface Props {
   content: string;
   contentType?: string;
+  monacoOptions?: EditorProps["options"];
+  onChange?: EditorProps["onChange"];
 }
 
-function Editor({ content, contentType }: Props): JSX.Element {
+function Editor({ content, contentType, monacoOptions, onChange }: Props): JSX.Element {
   return (
     <MonacoEditor
-      height={"600px"}
       language={languageForContentType(contentType)}
       theme="vs-dark"
-      options={monacoOptions}
+      options={{ ...defaultMonacoOptions, ...monacoOptions }}
       value={content}
+      onChange={onChange}
     />
   );
 }

admin/src/lib/components/HttpStatusIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIconTypeMap } from "@mui/material";
 import FiberManualRecordIcon from "@mui/icons-material/FiberManualRecord";
+import { SvgIconTypeMap } from "@mui/material";
 
 interface Props {
   status: number;

admin/src/lib/components/KeyValuePair.tsx

@@ -0,0 +1,203 @@
+import ClearIcon from "@mui/icons-material/Clear";
+import {
+  Alert,
+  IconButton,
+  InputBase,
+  InputBaseProps,
+  Snackbar,
+  styled,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  TableRowProps,
+} from "@mui/material";
+import { useState } from "react";
+
+const StyledInputBase = styled(InputBase)<InputBaseProps>(() => ({
+  fontSize: "0.875rem",
+  "&.MuiInputBase-root input": {
+    p: 0,
+  },
+}));
+
+const StyledTableRow = styled(TableRow)<TableRowProps>(() => ({
+  "& .delete-button": {
+    visibility: "hidden",
+  },
+  "&:hover .delete-button": {
+    visibility: "inherit",
+  },
+}));
+
+export interface KeyValuePair {
+  key: string;
+  value: string;
+}
+
+export interface KeyValuePairTableProps {
+  items: KeyValuePair[];
+  onChange?: (key: string, value: string, index: number) => void;
+  onDelete?: (index: number) => void;
+}
+
+export function KeyValuePairTable({ items, onChange, onDelete }: KeyValuePairTableProps): JSX.Element {
+  const [copyConfOpen, setCopyConfOpen] = useState(false);
+
+  const handleCellClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+
+    const windowSel = window.getSelection();
+
+    if (!windowSel || !document) {
+      return;
+    }
+
+    const r = document.createRange();
+    r.selectNode(e.currentTarget);
+    windowSel.removeAllRanges();
+    windowSel.addRange(r);
+    document.execCommand("copy");
+    windowSel.removeAllRanges();
+
+    setCopyConfOpen(true);
+  };
+
+  const handleCopyConfClose = (_: Event | React.SyntheticEvent, reason?: string) => {
+    if (reason === "clickaway") {
+      return;
+    }
+
+    setCopyConfOpen(false);
+  };
+
+  return (
+    <div>
+      <Snackbar open={copyConfOpen} autoHideDuration={3000} onClose={handleCopyConfClose}>
+        <Alert onClose={handleCopyConfClose} severity="info">
+          Copied to clipboard.
+        </Alert>
+      </Snackbar>
+      <TableContainer sx={{ overflowX: "initial" }}>
+        <Table size="small" stickyHeader>
+          <TableHead>
+            <TableRow>
+              <TableCell>Key</TableCell>
+              <TableCell>Value</TableCell>
+              {onDelete && <TableCell padding="checkbox"></TableCell>}
+            </TableRow>
+          </TableHead>
+          <TableBody
+            sx={{
+              "td, th, input": {
+                fontFamily: "'JetBrains Mono', monospace",
+                fontSize: "0.75rem",
+                py: 0.2,
+              },
+              "td span, th span": {
+                display: "block",
+                py: 0.7,
+              },
+            }}
+          >
+            {items.map(({ key, value }, idx) => (
+              <StyledTableRow key={idx} hover>
+                <TableCell
+                  component="th"
+                  scope="row"
+                  onClick={(e) => {
+                    !onChange && handleCellClick(e);
+                  }}
+                  sx={{
+                    ...(!onChange && {
+                      "&:hover": {
+                        cursor: "copy",
+                      },
+                    }),
+                  }}
+                >
+                  {!onChange && <span>{key}</span>}
+                  {onChange && (
+                    <StyledInputBase
+                      size="small"
+                      fullWidth
+                      placeholder="Key"
+                      value={key}
+                      onChange={(e) => {
+                        onChange && onChange(e.target.value, value, idx);
+                      }}
+                    />
+                  )}
+                </TableCell>
+                <TableCell
+                  onClick={(e) => {
+                    !onChange && handleCellClick(e);
+                  }}
+                  sx={{
+                    width: "60%",
+                    wordBreak: "break-all",
+                    ...(!onChange && {
+                      "&:hover": {
+                        cursor: "copy",
+                      },
+                    }),
+                  }}
+                >
+                  {!onChange && value}
+                  {onChange && (
+                    <StyledInputBase
+                      size="small"
+                      fullWidth
+                      placeholder="Value"
+                      value={value}
+                      onChange={(e) => {
+                        onChange && onChange(key, e.target.value, idx);
+                      }}
+                    />
+                  )}
+                </TableCell>
+                {onDelete && (
+                  <TableCell>
+                    <div className="delete-button">
+                      <IconButton
+                        size="small"
+                        onClick={() => {
+                          onDelete && onDelete(idx);
+                        }}
+                        sx={{
+                          visibility: onDelete === undefined || items.length === idx + 1 ? "hidden" : "inherit",
+                        }}
+                      >
+                        <ClearIcon fontSize="inherit" />
+                      </IconButton>
+                    </div>
+                  </TableCell>
+                )}
+              </StyledTableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+    </div>
+  );
+}
+
+export function sortKeyValuePairs(items: KeyValuePair[]): KeyValuePair[] {
+  const sorted = [...items];
+
+  sorted.sort((a, b) => {
+    if (a.key < b.key) {
+      return -1;
+    }
+    if (a.key > b.key) {
+      return 1;
+    }
+    return 0;
+  });
+
+  return sorted;
+}
+
+export default KeyValuePairTable;

admin/src/lib/components/RequestTabs.tsx

@@ -0,0 +1,91 @@
+import { TabContext, TabList, TabPanel } from "@mui/lab";
+import { Box, Tab } from "@mui/material";
+import React, { useState } from "react";
+
+import { KeyValuePairTable, KeyValuePair, KeyValuePairTableProps } from "./KeyValuePair";
+
+import Editor from "lib/components/Editor";
+
+enum TabValue {
+  QueryParams = "queryParams",
+  Headers = "headers",
+  Body = "body",
+}
+
+interface RequestTabsProps {
+  queryParams: KeyValuePair[];
+  headers: KeyValuePair[];
+  onQueryParamChange?: KeyValuePairTableProps["onChange"];
+  onQueryParamDelete?: KeyValuePairTableProps["onDelete"];
+  onHeaderChange?: KeyValuePairTableProps["onChange"];
+  onHeaderDelete?: KeyValuePairTableProps["onDelete"];
+  body?: string | null;
+  onBodyChange?: (value: string) => void;
+}
+
+function RequestTabs(props: RequestTabsProps): JSX.Element {
+  const {
+    queryParams,
+    onQueryParamChange,
+    onQueryParamDelete,
+    headers,
+    onHeaderChange,
+    onHeaderDelete,
+    body,
+    onBodyChange,
+  } = props;
+  const [tabValue, setTabValue] = useState(TabValue.QueryParams);
+
+  const tabSx = {
+    textTransform: "none",
+  };
+
+  const queryParamsLength = onQueryParamChange ? queryParams.length - 1 : queryParams.length;
+  const headersLength = onHeaderChange ? headers.length - 1 : headers.length;
+
+  return (
+    <Box sx={{ display: "flex", flexDirection: "column", height: "100%" }}>
+      <TabContext value={tabValue}>
+        <Box sx={{ borderBottom: 1, borderColor: "divider", mb: 1 }}>
+          <TabList onChange={(_, value) => setTabValue(value)}>
+            <Tab
+              value={TabValue.QueryParams}
+              label={"Query Params" + (queryParamsLength ? ` (${queryParamsLength})` : "")}
+              sx={tabSx}
+            />
+            <Tab value={TabValue.Headers} label={"Headers" + (headersLength ? ` (${headersLength})` : "")} sx={tabSx} />
+            <Tab
+              value={TabValue.Body}
+              label={"Body" + (body?.length ? ` (${body.length} byte` + (body.length > 1 ? "s" : "") + ")" : "")}
+              sx={tabSx}
+            />
+          </TabList>
+        </Box>
+        <Box flex="1 auto" overflow="scroll" height="100%">
+          <TabPanel value={TabValue.QueryParams} sx={{ p: 0, height: "100%" }}>
+            <Box>
+              <KeyValuePairTable items={queryParams} onChange={onQueryParamChange} onDelete={onQueryParamDelete} />
+            </Box>
+          </TabPanel>
+          <TabPanel value={TabValue.Headers} sx={{ p: 0, height: "100%" }}>
+            <Box>
+              <KeyValuePairTable items={headers} onChange={onHeaderChange} onDelete={onHeaderDelete} />
+            </Box>
+          </TabPanel>
+          <TabPanel value={TabValue.Body} sx={{ p: 0, height: "100%" }}>
+            <Editor
+              content={body || ""}
+              onChange={(value) => {
+                onBodyChange && onBodyChange(value || "");
+              }}
+              monacoOptions={{ readOnly: onBodyChange === undefined }}
+              contentType={headers.find(({ key }) => key.toLowerCase() === "content-type")?.value}
+            />
+          </TabPanel>
+        </Box>
+      </TabContext>
+    </Box>
+  );
+}
+
+export default RequestTabs;

admin/src/lib/components/RequestsTable.tsx

@@ -0,0 +1,128 @@
+import {
+  TableContainer,
+  Table,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableBody,
+  styled,
+  TableCellProps,
+  TableRowProps,
+} from "@mui/material";
+
+import HttpStatusIcon from "./HttpStatusIcon";
+
+import { HttpMethod } from "lib/graphql/generated";
+
+const baseCellStyle = {
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+} as const;
+
+const MethodTableCell = styled(TableCell)<TableCellProps>(() => ({
+  ...baseCellStyle,
+  width: "100px",
+}));
+
+const OriginTableCell = styled(TableCell)<TableCellProps>(() => ({
+  ...baseCellStyle,
+  maxWidth: "100px",
+}));
+
+const PathTableCell = styled(TableCell)<TableCellProps>(() => ({
+  ...baseCellStyle,
+  maxWidth: "200px",
+}));
+
+const StatusTableCell = styled(TableCell)<TableCellProps>(() => ({
+  ...baseCellStyle,
+  width: "100px",
+}));
+
+const RequestTableRow = styled(TableRow)<TableRowProps>(() => ({
+  "&:hover": {
+    cursor: "pointer",
+  },
+}));
+
+interface HttpRequest {
+  id: string;
+  url: string;
+  method: HttpMethod;
+  response?: HttpResponse | null;
+}
+
+interface HttpResponse {
+  statusCode: number;
+  statusReason: string;
+  body?: string;
+}
+
+interface Props {
+  requests: HttpRequest[];
+  activeRowId?: string;
+  actionsCell?: (id: string) => JSX.Element;
+  onRowClick?: (id: string) => void;
+  onContextMenu?: (e: React.MouseEvent, id: string) => void;
+}
+
+export default function RequestsTable(props: Props): JSX.Element {
+  const { requests, activeRowId, actionsCell, onRowClick, onContextMenu } = props;
+
+  return (
+    <TableContainer sx={{ overflowX: "initial" }}>
+      <Table size="small" stickyHeader>
+        <TableHead>
+          <TableRow>
+            <TableCell>Method</TableCell>
+            <TableCell>Origin</TableCell>
+            <TableCell>Path</TableCell>
+            <TableCell>Status</TableCell>
+            {actionsCell && <TableCell padding="checkbox"></TableCell>}
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {requests.map(({ id, method, url, response }) => {
+            const { origin, pathname, search, hash } = new URL(url);
+
+            return (
+              <RequestTableRow
+                key={id}
+                hover
+                selected={id === activeRowId}
+                onClick={() => {
+                  onRowClick && onRowClick(id);
+                }}
+                onContextMenu={(e) => {
+                  onContextMenu && onContextMenu(e, id);
+                }}
+              >
+                <MethodTableCell>
+                  <code>{method}</code>
+                </MethodTableCell>
+                <OriginTableCell>{origin}</OriginTableCell>
+                <PathTableCell>{decodeURIComponent(pathname + search + hash)}</PathTableCell>
+                <StatusTableCell>
+                  {response && <Status code={response.statusCode} reason={response.statusReason} />}
+                </StatusTableCell>
+                {actionsCell && actionsCell(id)}
+              </RequestTableRow>
+            );
+          })}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+}
+
+function Status({ code, reason }: { code: number; reason: string }): JSX.Element {
+  return (
+    <div>
+      <HttpStatusIcon status={code} />{" "}
+      <code>
+        {code} {reason}
+      </code>
+    </div>
+  );
+}

admin/src/lib/components/Response.tsx

@@ -0,0 +1,39 @@
+import { Box, Typography } from "@mui/material";
+
+import { sortKeyValuePairs } from "./KeyValuePair";
+import ResponseTabs from "./ResponseTabs";
+
+import ResponseStatus from "lib/components/ResponseStatus";
+import { HttpResponseLog } from "lib/graphql/generated";
+
+interface ResponseProps {
+  response?: HttpResponseLog | null;
+}
+
+function Response({ response }: ResponseProps): JSX.Element {
+  return (
+    <Box height="100%">
+      <Box sx={{ position: "absolute", right: 0, mt: 1.4 }}>
+        <Typography variant="overline" color="textSecondary" sx={{ float: "right", ml: 3 }}>
+          Response
+        </Typography>
+        {response && (
+          <Box sx={{ float: "right", mt: 0.2 }}>
+            <ResponseStatus
+              proto={response.proto}
+              statusCode={response.statusCode}
+              statusReason={response.statusReason}
+            />
+          </Box>
+        )}
+      </Box>
+      <ResponseTabs
+        body={response?.body}
+        headers={sortKeyValuePairs(response?.headers || [])}
+        hasResponse={response !== undefined && response !== null}
+      />
+    </Box>
+  );
+}
+
+export default Response;

admin/src/lib/components/ResponseStatus.tsx

@@ -0,0 +1,38 @@
+import { Typography } from "@mui/material";
+
+import HttpStatusIcon from "./HttpStatusIcon";
+
+import { HttpProtocol } from "lib/graphql/generated";
+
+type ResponseStatusProps = {
+  proto: HttpProtocol;
+  statusCode: number;
+  statusReason: string;
+};
+
+function mapProto(proto: HttpProtocol): string {
+  switch (proto) {
+    case HttpProtocol.Http10:
+      return "HTTP/1.0";
+    case HttpProtocol.Http11:
+      return "HTTP/1.1";
+    case HttpProtocol.Http20:
+      return "HTTP/2.0";
+    default:
+      return proto;
+  }
+}
+
+export default function ResponseStatus({ proto, statusCode, statusReason }: ResponseStatusProps): JSX.Element {
+  return (
+    <Typography variant="h6" style={{ fontSize: "1rem", whiteSpace: "nowrap" }}>
+      <HttpStatusIcon status={statusCode} />{" "}
+      <Typography component="span" color="textSecondary">
+        <Typography component="span" color="textSecondary" style={{ fontFamily: "'JetBrains Mono', monospace" }}>
+          {mapProto(proto)}
+        </Typography>
+      </Typography>{" "}
+      {statusCode} {statusReason}
+    </Typography>
+  );
+}

admin/src/lib/components/ResponseTabs.tsx

@@ -0,0 +1,68 @@
+import { TabContext, TabList, TabPanel } from "@mui/lab";
+import { Box, Paper, Tab, Typography } from "@mui/material";
+import React, { useState } from "react";
+
+import Editor from "lib/components/Editor";
+import { KeyValuePairTable } from "lib/components/KeyValuePair";
+import { HttpResponseLog } from "lib/graphql/generated";
+
+interface ResponseTabsProps {
+  headers: HttpResponseLog["headers"];
+  body: HttpResponseLog["body"];
+  hasResponse: boolean;
+}
+
+enum TabValue {
+  Body = "body",
+  Headers = "headers",
+}
+
+const reqNotSent = (
+  <Paper variant="centered">
+    <Typography>Response not received yet.</Typography>
+  </Paper>
+);
+
+function ResponseTabs(props: ResponseTabsProps): JSX.Element {
+  const { headers, body, hasResponse } = props;
+  const [tabValue, setTabValue] = useState(TabValue.Body);
+
+  const contentType = headers.find((header) => header.key.toLowerCase() === "content-type")?.value;
+
+  const tabSx = {
+    textTransform: "none",
+  };
+
+  return (
+    <Box height="100%" sx={{ display: "flex", flexDirection: "column" }}>
+      <TabContext value={tabValue}>
+        <Box sx={{ borderBottom: 1, borderColor: "divider", mb: 1 }}>
+          <TabList onChange={(_, value) => setTabValue(value)}>
+            <Tab
+              value={TabValue.Body}
+              label={"Body" + (body?.length ? ` (${body.length} byte` + (body.length > 1 ? "s" : "") + ")" : "")}
+              sx={tabSx}
+            />
+            <Tab
+              value={TabValue.Headers}
+              label={"Headers" + (headers.length ? ` (${headers.length})` : "")}
+              sx={tabSx}
+            />
+          </TabList>
+        </Box>
+        <Box flex="1 auto" overflow="hidden">
+          <TabPanel value={TabValue.Body} sx={{ p: 0, height: "100%" }}>
+            {body && <Editor content={body} contentType={contentType} />}
+            {!hasResponse && reqNotSent}
+          </TabPanel>
+          <TabPanel value={TabValue.Headers} sx={{ p: 0, height: "100%", overflow: "scroll" }}>
+            {headers.length > 0 && <KeyValuePairTable items={headers} />}
+            {!hasResponse && reqNotSent}
+          </TabPanel>
+        </Box>
+      </TabContext>
+    </Box>
+  );
+}
+
+export default ResponseTabs;

admin/src/lib/components/SplitPane.tsx

@@ -0,0 +1,53 @@
+import { alpha, styled } from "@mui/material/styles";
+import ReactSplitPane, { SplitPaneProps } from "react-split-pane";
+
+const BORDER_WIDTH_FACTOR = 1.75;
+const SIZE_FACTOR = 4;
+const MARGIN_FACTOR = -1.75;
+
+const SplitPane = styled(ReactSplitPane)<SplitPaneProps>(({ theme }) => ({
+  ".Resizer": {
+    zIndex: theme.zIndex.mobileStepper,
+    boxSizing: "border-box",
+    backgroundClip: "padding-box",
+    backgroundColor: alpha(theme.palette.grey[400], 0.05),
+  },
+  ".Resizer:hover": {
+    transition: "all 0.5s ease",
+    backgroundColor: alpha(theme.palette.primary.main, 1),
+  },
+
+  ".Resizer.horizontal": {
+    height: theme.spacing(SIZE_FACTOR),
+    marginTop: theme.spacing(MARGIN_FACTOR),
+    marginBottom: theme.spacing(MARGIN_FACTOR),
+    borderTop: `${theme.spacing(BORDER_WIDTH_FACTOR)} solid rgba(255, 255, 255, 0)`,
+    borderBottom: `${theme.spacing(BORDER_WIDTH_FACTOR)} solid rgba(255, 255, 255, 0)`,
+    borderBottomColor: "rgba(255, 255, 255, 0)",
+    cursor: "row-resize",
+    width: "100%",
+  },
+
+  ".Resizer.vertical": {
+    width: theme.spacing(SIZE_FACTOR),
+    marginLeft: theme.spacing(MARGIN_FACTOR),
+    marginRight: theme.spacing(MARGIN_FACTOR),
+    borderLeft: `${theme.spacing(BORDER_WIDTH_FACTOR)} solid rgba(255, 255, 255, 0)`,
+    borderRight: `${theme.spacing(BORDER_WIDTH_FACTOR)} solid rgba(255, 255, 255, 0)`,
+    cursor: "col-resize",
+  },
+
+  ".Resizer.disabled": {
+    cursor: "not-allowed",
+  },
+
+  ".Resizer.disabled:hover": {
+    borderColor: "transparent",
+  },
+
+  ".Pane": {
+    overflow: "hidden",
+  },
+}));
+
+export default SplitPane;

admin/src/lib/components/useContextMenu.tsx

@@ -0,0 +1,49 @@
+import { Menu } from "@mui/material";
+import React, { useState } from "react";
+
+interface ContextMenuProps {
+  children?: React.ReactNode;
+}
+
+export default function useContextMenu(): [
+  (props: ContextMenuProps) => JSX.Element,
+  (e: React.MouseEvent) => void,
+  () => void
+] {
+  const [contextMenu, setContextMenu] = useState<{
+    mouseX: number;
+    mouseY: number;
+  } | null>(null);
+
+  const handleContextMenu = (event: React.MouseEvent) => {
+    event.preventDefault();
+    setContextMenu(
+      contextMenu === null
+        ? {
+            mouseX: event.clientX - 2,
+            mouseY: event.clientY - 4,
+          }
+        : // repeated contextmenu when it is already open closes it with Chrome 84 on Ubuntu
+          // Other native context menus might behave different.
+          // With this behavior we prevent contextmenu from the backdrop to re-locale existing context menus.
+          null
+    );
+  };
+
+  const handleClose = () => {
+    setContextMenu(null);
+  };
+
+  const menu = ({ children }: ContextMenuProps): JSX.Element => (
+    <Menu
+      open={contextMenu !== null}
+      onClose={handleClose}
+      anchorReference="anchorPosition"
+      anchorPosition={contextMenu !== null ? { top: contextMenu.mouseY, left: contextMenu.mouseX } : undefined}
+    >
+      {children}
+    </Menu>
+  );
+
+  return [menu, handleContextMenu, handleClose];
+}

admin/src/lib/graphql.ts

@@ -1,61 +0,0 @@
-import { useMemo } from "react";
-import { ApolloClient, HttpLink, InMemoryCache, NormalizedCacheObject } from "@apollo/client";
-import merge from "deepmerge";
-import isEqual from "lodash/isEqual";
-
-export const APOLLO_STATE_PROP_NAME = "__APOLLO_STATE__";
-
-let apolloClient: ApolloClient<NormalizedCacheObject>;
-
-function createApolloClient() {
-  return new ApolloClient({
-    ssrMode: typeof window === "undefined",
-    link: new HttpLink({
-      uri: "/api/graphql/",
-    }),
-    cache: new InMemoryCache(),
-  });
-}
-
-export function initializeApollo(initialState = null) {
-  const _apolloClient = apolloClient ?? createApolloClient();
-
-  // If your page has Next.js data fetching methods that use Apollo Client, the initial state
-  // gets hydrated here
-  if (initialState) {
-    // Get existing cache, loaded during client side data fetching
-    const existingCache = _apolloClient.extract();
-
-    // Merge the existing cache into data passed from getStaticProps/getServerSideProps
-    const data = merge(initialState, existingCache, {
-      // combine arrays using object equality (like in sets)
-      arrayMerge: (destinationArray, sourceArray) => [
-        ...sourceArray,
-        ...destinationArray.filter((d) => sourceArray.every((s) => !isEqual(d, s))),
-      ],
-    });
-
-    // Restore the cache with the merged data
-    _apolloClient.cache.restore(data);
-  }
-  // For SSG and SSR always create a new Apollo Client
-  if (typeof window === "undefined") return _apolloClient;
-  // Create the Apollo Client once in the client
-  if (!apolloClient) apolloClient = _apolloClient;
-
-  return _apolloClient;
-}
-
-export function addApolloState(client: ApolloClient<NormalizedCacheObject>, pageProps: any) {
-  if (pageProps?.props) {
-    pageProps.props[APOLLO_STATE_PROP_NAME] = client.cache.extract();
-  }
-
-  return pageProps;
-}
-
-export function useApollo(pageProps: any) {
-  const state = pageProps[APOLLO_STATE_PROP_NAME];
-  const store = useMemo(() => initializeApollo(state), [state]);
-  return store;
-}

admin/src/lib/graphql/generated.tsx

@@ -0,0 +1,985 @@
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+export type Maybe<T> = T | null;
+export type InputMaybe<T> = Maybe<T>;
+export type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] };
+export type MakeOptional<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]?: Maybe<T[SubKey]> };
+export type MakeMaybe<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]: Maybe<T[SubKey]> };
+const defaultOptions = {} as const;
+/** All built-in and custom scalars, mapped to their actual values */
+export type Scalars = {
+  ID: string;
+  String: string;
+  Boolean: boolean;
+  Int: number;
+  Float: number;
+  Regexp: any;
+  Time: any;
+  URL: any;
+};
+
+export type ClearHttpRequestLogResult = {
+  __typename?: 'ClearHTTPRequestLogResult';
+  success: Scalars['Boolean'];
+};
+
+export type CloseProjectResult = {
+  __typename?: 'CloseProjectResult';
+  success: Scalars['Boolean'];
+};
+
+export type DeleteProjectResult = {
+  __typename?: 'DeleteProjectResult';
+  success: Scalars['Boolean'];
+};
+
+export type DeleteSenderRequestsResult = {
+  __typename?: 'DeleteSenderRequestsResult';
+  success: Scalars['Boolean'];
+};
+
+export type HttpHeader = {
+  __typename?: 'HttpHeader';
+  key: Scalars['String'];
+  value: Scalars['String'];
+};
+
+export type HttpHeaderInput = {
+  key: Scalars['String'];
+  value: Scalars['String'];
+};
+
+export enum HttpMethod {
+  Connect = 'CONNECT',
+  Delete = 'DELETE',
+  Get = 'GET',
+  Head = 'HEAD',
+  Options = 'OPTIONS',
+  Patch = 'PATCH',
+  Post = 'POST',
+  Put = 'PUT',
+  Trace = 'TRACE'
+}
+
+export enum HttpProtocol {
+  Http10 = 'HTTP10',
+  Http11 = 'HTTP11',
+  Http20 = 'HTTP20'
+}
+
+export type HttpRequestLog = {
+  __typename?: 'HttpRequestLog';
+  body?: Maybe<Scalars['String']>;
+  headers: Array<HttpHeader>;
+  id: Scalars['ID'];
+  method: HttpMethod;
+  proto: Scalars['String'];
+  response?: Maybe<HttpResponseLog>;
+  timestamp: Scalars['Time'];
+  url: Scalars['String'];
+};
+
+export type HttpRequestLogFilter = {
+  __typename?: 'HttpRequestLogFilter';
+  onlyInScope: Scalars['Boolean'];
+  searchExpression?: Maybe<Scalars['String']>;
+};
+
+export type HttpRequestLogFilterInput = {
+  onlyInScope?: InputMaybe<Scalars['Boolean']>;
+  searchExpression?: InputMaybe<Scalars['String']>;
+};
+
+export type HttpResponseLog = {
+  __typename?: 'HttpResponseLog';
+  body?: Maybe<Scalars['String']>;
+  headers: Array<HttpHeader>;
+  /** Will be the same ID as its related request ID. */
+  id: Scalars['ID'];
+  proto: HttpProtocol;
+  statusCode: Scalars['Int'];
+  statusReason: Scalars['String'];
+};
+
+export type Mutation = {
+  __typename?: 'Mutation';
+  clearHTTPRequestLog: ClearHttpRequestLogResult;
+  closeProject: CloseProjectResult;
+  createOrUpdateSenderRequest: SenderRequest;
+  createProject?: Maybe<Project>;
+  createSenderRequestFromHttpRequestLog: SenderRequest;
+  deleteProject: DeleteProjectResult;
+  deleteSenderRequests: DeleteSenderRequestsResult;
+  openProject?: Maybe<Project>;
+  sendRequest: SenderRequest;
+  setHttpRequestLogFilter?: Maybe<HttpRequestLogFilter>;
+  setScope: Array<ScopeRule>;
+  setSenderRequestFilter?: Maybe<SenderRequestFilter>;
+};
+
+
+export type MutationCreateOrUpdateSenderRequestArgs = {
+  request: SenderRequestInput;
+};
+
+
+export type MutationCreateProjectArgs = {
+  name: Scalars['String'];
+};
+
+
+export type MutationCreateSenderRequestFromHttpRequestLogArgs = {
+  id: Scalars['ID'];
+};
+
+
+export type MutationDeleteProjectArgs = {
+  id: Scalars['ID'];
+};
+
+
+export type MutationOpenProjectArgs = {
+  id: Scalars['ID'];
+};
+
+
+export type MutationSendRequestArgs = {
+  id: Scalars['ID'];
+};
+
+
+export type MutationSetHttpRequestLogFilterArgs = {
+  filter?: InputMaybe<HttpRequestLogFilterInput>;
+};
+
+
+export type MutationSetScopeArgs = {
+  scope: Array<ScopeRuleInput>;
+};
+
+
+export type MutationSetSenderRequestFilterArgs = {
+  filter?: InputMaybe<SenderRequestFilterInput>;
+};
+
+export type Project = {
+  __typename?: 'Project';
+  id: Scalars['ID'];
+  isActive: Scalars['Boolean'];
+  name: Scalars['String'];
+};
+
+export type Query = {
+  __typename?: 'Query';
+  activeProject?: Maybe<Project>;
+  httpRequestLog?: Maybe<HttpRequestLog>;
+  httpRequestLogFilter?: Maybe<HttpRequestLogFilter>;
+  httpRequestLogs: Array<HttpRequestLog>;
+  projects: Array<Project>;
+  scope: Array<ScopeRule>;
+  senderRequest?: Maybe<SenderRequest>;
+  senderRequests: Array<SenderRequest>;
+};
+
+
+export type QueryHttpRequestLogArgs = {
+  id: Scalars['ID'];
+};
+
+
+export type QuerySenderRequestArgs = {
+  id: Scalars['ID'];
+};
+
+export type ScopeHeader = {
+  __typename?: 'ScopeHeader';
+  key?: Maybe<Scalars['Regexp']>;
+  value?: Maybe<Scalars['Regexp']>;
+};
+
+export type ScopeHeaderInput = {
+  key?: InputMaybe<Scalars['Regexp']>;
+  value?: InputMaybe<Scalars['Regexp']>;
+};
+
+export type ScopeRule = {
+  __typename?: 'ScopeRule';
+  body?: Maybe<Scalars['Regexp']>;
+  header?: Maybe<ScopeHeader>;
+  url?: Maybe<Scalars['Regexp']>;
+};
+
+export type ScopeRuleInput = {
+  body?: InputMaybe<Scalars['Regexp']>;
+  header?: InputMaybe<ScopeHeaderInput>;
+  url?: InputMaybe<Scalars['Regexp']>;
+};
+
+export type SenderRequest = {
+  __typename?: 'SenderRequest';
+  body?: Maybe<Scalars['String']>;
+  headers?: Maybe<Array<HttpHeader>>;
+  id: Scalars['ID'];
+  method: HttpMethod;
+  proto: HttpProtocol;
+  response?: Maybe<HttpResponseLog>;
+  sourceRequestLogID?: Maybe<Scalars['ID']>;
+  timestamp: Scalars['Time'];
+  url: Scalars['URL'];
+};
+
+export type SenderRequestFilter = {
+  __typename?: 'SenderRequestFilter';
+  onlyInScope: Scalars['Boolean'];
+  searchExpression?: Maybe<Scalars['String']>;
+};
+
+export type SenderRequestFilterInput = {
+  onlyInScope?: InputMaybe<Scalars['Boolean']>;
+  searchExpression?: InputMaybe<Scalars['String']>;
+};
+
+export type SenderRequestInput = {
+  body?: InputMaybe<Scalars['String']>;
+  headers?: InputMaybe<Array<HttpHeaderInput>>;
+  id?: InputMaybe<Scalars['ID']>;
+  method?: InputMaybe<HttpMethod>;
+  proto?: InputMaybe<HttpProtocol>;
+  url: Scalars['URL'];
+};
+
+export type CloseProjectMutationVariables = Exact<{ [key: string]: never; }>;
+
+
+export type CloseProjectMutation = { __typename?: 'Mutation', closeProject: { __typename?: 'CloseProjectResult', success: boolean } };
+
+export type CreateProjectMutationVariables = Exact<{
+  name: Scalars['String'];
+}>;
+
+
+export type CreateProjectMutation = { __typename?: 'Mutation', createProject?: { __typename?: 'Project', id: string, name: string } | null };
+
+export type DeleteProjectMutationVariables = Exact<{
+  id: Scalars['ID'];
+}>;
+
+
+export type DeleteProjectMutation = { __typename?: 'Mutation', deleteProject: { __typename?: 'DeleteProjectResult', success: boolean } };
+
+export type OpenProjectMutationVariables = Exact<{
+  id: Scalars['ID'];
+}>;
+
+
+export type OpenProjectMutation = { __typename?: 'Mutation', openProject?: { __typename?: 'Project', id: string, name: string, isActive: boolean } | null };
+
+export type ProjectsQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type ProjectsQuery = { __typename?: 'Query', projects: Array<{ __typename?: 'Project', id: string, name: string, isActive: boolean }> };
+
+export type ClearHttpRequestLogMutationVariables = Exact<{ [key: string]: never; }>;
+
+
+export type ClearHttpRequestLogMutation = { __typename?: 'Mutation', clearHTTPRequestLog: { __typename?: 'ClearHTTPRequestLogResult', success: boolean } };
+
+export type HttpRequestLogQueryVariables = Exact<{
+  id: Scalars['ID'];
+}>;
+
+
+export type HttpRequestLogQuery = { __typename?: 'Query', httpRequestLog?: { __typename?: 'HttpRequestLog', id: string, method: HttpMethod, url: string, proto: string, body?: string | null, headers: Array<{ __typename?: 'HttpHeader', key: string, value: string }>, response?: { __typename?: 'HttpResponseLog', id: string, proto: HttpProtocol, statusCode: number, statusReason: string, body?: string | null, headers: Array<{ __typename?: 'HttpHeader', key: string, value: string }> } | null } | null };
+
+export type HttpRequestLogFilterQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type HttpRequestLogFilterQuery = { __typename?: 'Query', httpRequestLogFilter?: { __typename?: 'HttpRequestLogFilter', onlyInScope: boolean, searchExpression?: string | null } | null };
+
+export type HttpRequestLogsQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type HttpRequestLogsQuery = { __typename?: 'Query', httpRequestLogs: Array<{ __typename?: 'HttpRequestLog', id: string, method: HttpMethod, url: string, timestamp: any, response?: { __typename?: 'HttpResponseLog', statusCode: number, statusReason: string } | null }> };
+
+export type SetHttpRequestLogFilterMutationVariables = Exact<{
+  filter?: InputMaybe<HttpRequestLogFilterInput>;
+}>;
+
+
+export type SetHttpRequestLogFilterMutation = { __typename?: 'Mutation', setHttpRequestLogFilter?: { __typename?: 'HttpRequestLogFilter', onlyInScope: boolean, searchExpression?: string | null } | null };
+
+export type ScopeQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type ScopeQuery = { __typename?: 'Query', scope: Array<{ __typename?: 'ScopeRule', url?: any | null }> };
+
+export type SetScopeMutationVariables = Exact<{
+  scope: Array<ScopeRuleInput> | ScopeRuleInput;
+}>;
+
+
+export type SetScopeMutation = { __typename?: 'Mutation', setScope: Array<{ __typename?: 'ScopeRule', url?: any | null }> };
+
+export type CreateOrUpdateSenderRequestMutationVariables = Exact<{
+  request: SenderRequestInput;
+}>;
+
+
+export type CreateOrUpdateSenderRequestMutation = { __typename?: 'Mutation', createOrUpdateSenderRequest: { __typename?: 'SenderRequest', id: string } };
+
+export type CreateSenderRequestFromHttpRequestLogMutationVariables = Exact<{
+  id: Scalars['ID'];
+}>;
+
+
+export type CreateSenderRequestFromHttpRequestLogMutation = { __typename?: 'Mutation', createSenderRequestFromHttpRequestLog: { __typename?: 'SenderRequest', id: string } };
+
+export type SendRequestMutationVariables = Exact<{
+  id: Scalars['ID'];
+}>;
+
+
+export type SendRequestMutation = { __typename?: 'Mutation', sendRequest: { __typename?: 'SenderRequest', id: string } };
+
+export type GetSenderRequestQueryVariables = Exact<{
+  id: Scalars['ID'];
+}>;
+
+
+export type GetSenderRequestQuery = { __typename?: 'Query', senderRequest?: { __typename?: 'SenderRequest', id: string, sourceRequestLogID?: string | null, url: any, method: HttpMethod, proto: HttpProtocol, body?: string | null, timestamp: any, headers?: Array<{ __typename?: 'HttpHeader', key: string, value: string }> | null, response?: { __typename?: 'HttpResponseLog', id: string, proto: HttpProtocol, statusCode: number, statusReason: string, body?: string | null, headers: Array<{ __typename?: 'HttpHeader', key: string, value: string }> } | null } | null };
+
+export type GetSenderRequestsQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type GetSenderRequestsQuery = { __typename?: 'Query', senderRequests: Array<{ __typename?: 'SenderRequest', id: string, url: any, method: HttpMethod, response?: { __typename?: 'HttpResponseLog', id: string, statusCode: number, statusReason: string } | null }> };
+
+
+export const CloseProjectDocument = gql`
+    mutation CloseProject {
+  closeProject {
+    success
+  }
+}
+    `;
+export type CloseProjectMutationFn = Apollo.MutationFunction<CloseProjectMutation, CloseProjectMutationVariables>;
+
+/**
+ * __useCloseProjectMutation__
+ *
+ * To run a mutation, you first call `useCloseProjectMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useCloseProjectMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [closeProjectMutation, { data, loading, error }] = useCloseProjectMutation({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useCloseProjectMutation(baseOptions?: Apollo.MutationHookOptions<CloseProjectMutation, CloseProjectMutationVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<CloseProjectMutation, CloseProjectMutationVariables>(CloseProjectDocument, options);
+      }
+export type CloseProjectMutationHookResult = ReturnType<typeof useCloseProjectMutation>;
+export type CloseProjectMutationResult = Apollo.MutationResult<CloseProjectMutation>;
+export type CloseProjectMutationOptions = Apollo.BaseMutationOptions<CloseProjectMutation, CloseProjectMutationVariables>;
+export const CreateProjectDocument = gql`
+    mutation CreateProject($name: String!) {
+  createProject(name: $name) {
+    id
+    name
+  }
+}
+    `;
+export type CreateProjectMutationFn = Apollo.MutationFunction<CreateProjectMutation, CreateProjectMutationVariables>;
+
+/**
+ * __useCreateProjectMutation__
+ *
+ * To run a mutation, you first call `useCreateProjectMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useCreateProjectMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [createProjectMutation, { data, loading, error }] = useCreateProjectMutation({
+ *   variables: {
+ *      name: // value for 'name'
+ *   },
+ * });
+ */
+export function useCreateProjectMutation(baseOptions?: Apollo.MutationHookOptions<CreateProjectMutation, CreateProjectMutationVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<CreateProjectMutation, CreateProjectMutationVariables>(CreateProjectDocument, options);
+      }
+export type CreateProjectMutationHookResult = ReturnType<typeof useCreateProjectMutation>;
+export type CreateProjectMutationResult = Apollo.MutationResult<CreateProjectMutation>;
+export type CreateProjectMutationOptions = Apollo.BaseMutationOptions<CreateProjectMutation, CreateProjectMutationVariables>;
+export const DeleteProjectDocument = gql`
+    mutation DeleteProject($id: ID!) {
+  deleteProject(id: $id) {
+    success
+  }
+}
+    `;
+export type DeleteProjectMutationFn = Apollo.MutationFunction<DeleteProjectMutation, DeleteProjectMutationVariables>;
+
+/**
+ * __useDeleteProjectMutation__
+ *
+ * To run a mutation, you first call `useDeleteProjectMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useDeleteProjectMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [deleteProjectMutation, { data, loading, error }] = useDeleteProjectMutation({
+ *   variables: {
+ *      id: // value for 'id'
+ *   },
+ * });
+ */
+export function useDeleteProjectMutation(baseOptions?: Apollo.MutationHookOptions<DeleteProjectMutation, DeleteProjectMutationVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<DeleteProjectMutation, DeleteProjectMutationVariables>(DeleteProjectDocument, options);
+      }
+export type DeleteProjectMutationHookResult = ReturnType<typeof useDeleteProjectMutation>;
+export type DeleteProjectMutationResult = Apollo.MutationResult<DeleteProjectMutation>;
+export type DeleteProjectMutationOptions = Apollo.BaseMutationOptions<DeleteProjectMutation, DeleteProjectMutationVariables>;
+export const OpenProjectDocument = gql`
+    mutation OpenProject($id: ID!) {
+  openProject(id: $id) {
+    id
+    name
+    isActive
+  }
+}
+    `;
+export type OpenProjectMutationFn = Apollo.MutationFunction<OpenProjectMutation, OpenProjectMutationVariables>;
+
+/**
+ * __useOpenProjectMutation__
+ *
+ * To run a mutation, you first call `useOpenProjectMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useOpenProjectMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [openProjectMutation, { data, loading, error }] = useOpenProjectMutation({
+ *   variables: {
+ *      id: // value for 'id'
+ *   },
+ * });
+ */
+export function useOpenProjectMutation(baseOptions?: Apollo.MutationHookOptions<OpenProjectMutation, OpenProjectMutationVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<OpenProjectMutation, OpenProjectMutationVariables>(OpenProjectDocument, options);
+      }
+export type OpenProjectMutationHookResult = ReturnType<typeof useOpenProjectMutation>;
+export type OpenProjectMutationResult = Apollo.MutationResult<OpenProjectMutation>;
+export type OpenProjectMutationOptions = Apollo.BaseMutationOptions<OpenProjectMutation, OpenProjectMutationVariables>;
+export const ProjectsDocument = gql`
+    query Projects {
+  projects {
+    id
+    name
+    isActive
+  }
+}
+    `;
+
+/**
+ * __useProjectsQuery__
+ *
+ * To run a query within a React component, call `useProjectsQuery` and pass it any options that fit your needs.
+ * When your component renders, `useProjectsQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useProjectsQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useProjectsQuery(baseOptions?: Apollo.QueryHookOptions<ProjectsQuery, ProjectsQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<ProjectsQuery, ProjectsQueryVariables>(ProjectsDocument, options);
+      }
+export function useProjectsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ProjectsQuery, ProjectsQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<ProjectsQuery, ProjectsQueryVariables>(ProjectsDocument, options);
+        }
+export type ProjectsQueryHookResult = ReturnType<typeof useProjectsQuery>;
+export type ProjectsLazyQueryHookResult = ReturnType<typeof useProjectsLazyQuery>;
+export type ProjectsQueryResult = Apollo.QueryResult<ProjectsQuery, ProjectsQueryVariables>;
+export const ClearHttpRequestLogDocument = gql`
+    mutation ClearHTTPRequestLog {
+  clearHTTPRequestLog {
+    success
+  }
+}
+    `;
+export type ClearHttpRequestLogMutationFn = Apollo.MutationFunction<ClearHttpRequestLogMutation, ClearHttpRequestLogMutationVariables>;
+
+/**
+ * __useClearHttpRequestLogMutation__
+ *
+ * To run a mutation, you first call `useClearHttpRequestLogMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useClearHttpRequestLogMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [clearHttpRequestLogMutation, { data, loading, error }] = useClearHttpRequestLogMutation({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useClearHttpRequestLogMutation(baseOptions?: Apollo.MutationHookOptions<ClearHttpRequestLogMutation, ClearHttpRequestLogMutationVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<ClearHttpRequestLogMutation, ClearHttpRequestLogMutationVariables>(ClearHttpRequestLogDocument, options);
+      }
+export type ClearHttpRequestLogMutationHookResult = ReturnType<typeof useClearHttpRequestLogMutation>;
+export type ClearHttpRequestLogMutationResult = Apollo.MutationResult<ClearHttpRequestLogMutation>;
+export type ClearHttpRequestLogMutationOptions = Apollo.BaseMutationOptions<ClearHttpRequestLogMutation, ClearHttpRequestLogMutationVariables>;
+export const HttpRequestLogDocument = gql`
+    query HttpRequestLog($id: ID!) {
+  httpRequestLog(id: $id) {
+    id
+    method
+    url
+    proto
+    headers {
+      key
+      value
+    }
+    body
+    response {
+      id
+      proto
+      headers {
+        key
+        value
+      }
+      statusCode
+      statusReason
+      body
+    }
+  }
+}
+    `;
+
+/**
+ * __useHttpRequestLogQuery__
+ *
+ * To run a query within a React component, call `useHttpRequestLogQuery` and pass it any options that fit your needs.
+ * When your component renders, `useHttpRequestLogQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useHttpRequestLogQuery({
+ *   variables: {
+ *      id: // value for 'id'
+ *   },
+ * });
+ */
+export function useHttpRequestLogQuery(baseOptions: Apollo.QueryHookOptions<HttpRequestLogQuery, HttpRequestLogQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<HttpRequestLogQuery, HttpRequestLogQueryVariables>(HttpRequestLogDocument, options);
+      }
+export function useHttpRequestLogLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<HttpRequestLogQuery, HttpRequestLogQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<HttpRequestLogQuery, HttpRequestLogQueryVariables>(HttpRequestLogDocument, options);
+        }
+export type HttpRequestLogQueryHookResult = ReturnType<typeof useHttpRequestLogQuery>;
+export type HttpRequestLogLazyQueryHookResult = ReturnType<typeof useHttpRequestLogLazyQuery>;
+export type HttpRequestLogQueryResult = Apollo.QueryResult<HttpRequestLogQuery, HttpRequestLogQueryVariables>;
+export const HttpRequestLogFilterDocument = gql`
+    query HttpRequestLogFilter {
+  httpRequestLogFilter {
+    onlyInScope
+    searchExpression
+  }
+}
+    `;
+
+/**
+ * __useHttpRequestLogFilterQuery__
+ *
+ * To run a query within a React component, call `useHttpRequestLogFilterQuery` and pass it any options that fit your needs.
+ * When your component renders, `useHttpRequestLogFilterQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useHttpRequestLogFilterQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useHttpRequestLogFilterQuery(baseOptions?: Apollo.QueryHookOptions<HttpRequestLogFilterQuery, HttpRequestLogFilterQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<HttpRequestLogFilterQuery, HttpRequestLogFilterQueryVariables>(HttpRequestLogFilterDocument, options);
+      }
+export function useHttpRequestLogFilterLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<HttpRequestLogFilterQuery, HttpRequestLogFilterQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<HttpRequestLogFilterQuery, HttpRequestLogFilterQueryVariables>(HttpRequestLogFilterDocument, options);
+        }
+export type HttpRequestLogFilterQueryHookResult = ReturnType<typeof useHttpRequestLogFilterQuery>;
+export type HttpRequestLogFilterLazyQueryHookResult = ReturnType<typeof useHttpRequestLogFilterLazyQuery>;
+export type HttpRequestLogFilterQueryResult = Apollo.QueryResult<HttpRequestLogFilterQuery, HttpRequestLogFilterQueryVariables>;
+export const HttpRequestLogsDocument = gql`
+    query HttpRequestLogs {
+  httpRequestLogs {
+    id
+    method
+    url
+    timestamp
+    response {
+      statusCode
+      statusReason
+    }
+  }
+}
+    `;
+
+/**
+ * __useHttpRequestLogsQuery__
+ *
+ * To run a query within a React component, call `useHttpRequestLogsQuery` and pass it any options that fit your needs.
+ * When your component renders, `useHttpRequestLogsQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useHttpRequestLogsQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useHttpRequestLogsQuery(baseOptions?: Apollo.QueryHookOptions<HttpRequestLogsQuery, HttpRequestLogsQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<HttpRequestLogsQuery, HttpRequestLogsQueryVariables>(HttpRequestLogsDocument, options);
+      }
+export function useHttpRequestLogsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<HttpRequestLogsQuery, HttpRequestLogsQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<HttpRequestLogsQuery, HttpRequestLogsQueryVariables>(HttpRequestLogsDocument, options);
+        }
+export type HttpRequestLogsQueryHookResult = ReturnType<typeof useHttpRequestLogsQuery>;
+export type HttpRequestLogsLazyQueryHookResult = ReturnType<typeof useHttpRequestLogsLazyQuery>;
+export type HttpRequestLogsQueryResult = Apollo.QueryResult<HttpRequestLogsQuery, HttpRequestLogsQueryVariables>;
+export const SetHttpRequestLogFilterDocument = gql`
+    mutation SetHttpRequestLogFilter($filter: HttpRequestLogFilterInput) {
+  setHttpRequestLogFilter(filter: $filter) {
+    onlyInScope
+    searchExpression
+  }
+}
+    `;
+export type SetHttpRequestLogFilterMutationFn = Apollo.MutationFunction<SetHttpRequestLogFilterMutation, SetHttpRequestLogFilterMutationVariables>;
+
+/**
+ * __useSetHttpRequestLogFilterMutation__
+ *
+ * To run a mutation, you first call `useSetHttpRequestLogFilterMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useSetHttpRequestLogFilterMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [setHttpRequestLogFilterMutation, { data, loading, error }] = useSetHttpRequestLogFilterMutation({
+ *   variables: {
+ *      filter: // value for 'filter'
+ *   },
+ * });
+ */
+export function useSetHttpRequestLogFilterMutation(baseOptions?: Apollo.MutationHookOptions<SetHttpRequestLogFilterMutation, SetHttpRequestLogFilterMutationVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<SetHttpRequestLogFilterMutation, SetHttpRequestLogFilterMutationVariables>(SetHttpRequestLogFilterDocument, options);
+      }
+export type SetHttpRequestLogFilterMutationHookResult = ReturnType<typeof useSetHttpRequestLogFilterMutation>;
+export type SetHttpRequestLogFilterMutationResult = Apollo.MutationResult<SetHttpRequestLogFilterMutation>;
+export type SetHttpRequestLogFilterMutationOptions = Apollo.BaseMutationOptions<SetHttpRequestLogFilterMutation, SetHttpRequestLogFilterMutationVariables>;
+export const ScopeDocument = gql`
+    query Scope {
+  scope {
+    url
+  }
+}
+    `;
+
+/**
+ * __useScopeQuery__
+ *
+ * To run a query within a React component, call `useScopeQuery` and pass it any options that fit your needs.
+ * When your component renders, `useScopeQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useScopeQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useScopeQuery(baseOptions?: Apollo.QueryHookOptions<ScopeQuery, ScopeQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<ScopeQuery, ScopeQueryVariables>(ScopeDocument, options);
+      }
+export function useScopeLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ScopeQuery, ScopeQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<ScopeQuery, ScopeQueryVariables>(ScopeDocument, options);
+        }
+export type ScopeQueryHookResult = ReturnType<typeof useScopeQuery>;
+export type ScopeLazyQueryHookResult = ReturnType<typeof useScopeLazyQuery>;
+export type ScopeQueryResult = Apollo.QueryResult<ScopeQuery, ScopeQueryVariables>;
+export const SetScopeDocument = gql`
+    mutation SetScope($scope: [ScopeRuleInput!]!) {
+  setScope(scope: $scope) {
+    url
+  }
+}
+    `;
+export type SetScopeMutationFn = Apollo.MutationFunction<SetScopeMutation, SetScopeMutationVariables>;
+
+/**
+ * __useSetScopeMutation__
+ *
+ * To run a mutation, you first call `useSetScopeMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useSetScopeMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [setScopeMutation, { data, loading, error }] = useSetScopeMutation({
+ *   variables: {
+ *      scope: // value for 'scope'
+ *   },
+ * });
+ */
+export function useSetScopeMutation(baseOptions?: Apollo.MutationHookOptions<SetScopeMutation, SetScopeMutationVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<SetScopeMutation, SetScopeMutationVariables>(SetScopeDocument, options);
+      }
+export type SetScopeMutationHookResult = ReturnType<typeof useSetScopeMutation>;
+export type SetScopeMutationResult = Apollo.MutationResult<SetScopeMutation>;
+export type SetScopeMutationOptions = Apollo.BaseMutationOptions<SetScopeMutation, SetScopeMutationVariables>;
+export const CreateOrUpdateSenderRequestDocument = gql`
+    mutation CreateOrUpdateSenderRequest($request: SenderRequestInput!) {
+  createOrUpdateSenderRequest(request: $request) {
+    id
+  }
+}
+    `;
+export type CreateOrUpdateSenderRequestMutationFn = Apollo.MutationFunction<CreateOrUpdateSenderRequestMutation, CreateOrUpdateSenderRequestMutationVariables>;
+
+/**
+ * __useCreateOrUpdateSenderRequestMutation__
+ *
+ * To run a mutation, you first call `useCreateOrUpdateSenderRequestMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useCreateOrUpdateSenderRequestMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [createOrUpdateSenderRequestMutation, { data, loading, error }] = useCreateOrUpdateSenderRequestMutation({
+ *   variables: {
+ *      request: // value for 'request'
+ *   },
+ * });
+ */
+export function useCreateOrUpdateSenderRequestMutation(baseOptions?: Apollo.MutationHookOptions<CreateOrUpdateSenderRequestMutation, CreateOrUpdateSenderRequestMutationVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<CreateOrUpdateSenderRequestMutation, CreateOrUpdateSenderRequestMutationVariables>(CreateOrUpdateSenderRequestDocument, options);
+      }
+export type CreateOrUpdateSenderRequestMutationHookResult = ReturnType<typeof useCreateOrUpdateSenderRequestMutation>;
+export type CreateOrUpdateSenderRequestMutationResult = Apollo.MutationResult<CreateOrUpdateSenderRequestMutation>;
+export type CreateOrUpdateSenderRequestMutationOptions = Apollo.BaseMutationOptions<CreateOrUpdateSenderRequestMutation, CreateOrUpdateSenderRequestMutationVariables>;
+export const CreateSenderRequestFromHttpRequestLogDocument = gql`
+    mutation CreateSenderRequestFromHttpRequestLog($id: ID!) {
+  createSenderRequestFromHttpRequestLog(id: $id) {
+    id
+  }
+}
+    `;
+export type CreateSenderRequestFromHttpRequestLogMutationFn = Apollo.MutationFunction<CreateSenderRequestFromHttpRequestLogMutation, CreateSenderRequestFromHttpRequestLogMutationVariables>;
+
+/**
+ * __useCreateSenderRequestFromHttpRequestLogMutation__
+ *
+ * To run a mutation, you first call `useCreateSenderRequestFromHttpRequestLogMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useCreateSenderRequestFromHttpRequestLogMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [createSenderRequestFromHttpRequestLogMutation, { data, loading, error }] = useCreateSenderRequestFromHttpRequestLogMutation({
+ *   variables: {
+ *      id: // value for 'id'
+ *   },
+ * });
+ */
+export function useCreateSenderRequestFromHttpRequestLogMutation(baseOptions?: Apollo.MutationHookOptions<CreateSenderRequestFromHttpRequestLogMutation, CreateSenderRequestFromHttpRequestLogMutationVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<CreateSenderRequestFromHttpRequestLogMutation, CreateSenderRequestFromHttpRequestLogMutationVariables>(CreateSenderRequestFromHttpRequestLogDocument, options);
+      }
+export type CreateSenderRequestFromHttpRequestLogMutationHookResult = ReturnType<typeof useCreateSenderRequestFromHttpRequestLogMutation>;
+export type CreateSenderRequestFromHttpRequestLogMutationResult = Apollo.MutationResult<CreateSenderRequestFromHttpRequestLogMutation>;
+export type CreateSenderRequestFromHttpRequestLogMutationOptions = Apollo.BaseMutationOptions<CreateSenderRequestFromHttpRequestLogMutation, CreateSenderRequestFromHttpRequestLogMutationVariables>;
+export const SendRequestDocument = gql`
+    mutation SendRequest($id: ID!) {
+  sendRequest(id: $id) {
+    id
+  }
+}
+    `;
+export type SendRequestMutationFn = Apollo.MutationFunction<SendRequestMutation, SendRequestMutationVariables>;
+
+/**
+ * __useSendRequestMutation__
+ *
+ * To run a mutation, you first call `useSendRequestMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useSendRequestMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [sendRequestMutation, { data, loading, error }] = useSendRequestMutation({
+ *   variables: {
+ *      id: // value for 'id'
+ *   },
+ * });
+ */
+export function useSendRequestMutation(baseOptions?: Apollo.MutationHookOptions<SendRequestMutation, SendRequestMutationVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<SendRequestMutation, SendRequestMutationVariables>(SendRequestDocument, options);
+      }
+export type SendRequestMutationHookResult = ReturnType<typeof useSendRequestMutation>;
+export type SendRequestMutationResult = Apollo.MutationResult<SendRequestMutation>;
+export type SendRequestMutationOptions = Apollo.BaseMutationOptions<SendRequestMutation, SendRequestMutationVariables>;
+export const GetSenderRequestDocument = gql`
+    query GetSenderRequest($id: ID!) {
+  senderRequest(id: $id) {
+    id
+    sourceRequestLogID
+    url
+    method
+    proto
+    headers {
+      key
+      value
+    }
+    body
+    timestamp
+    response {
+      id
+      proto
+      statusCode
+      statusReason
+      body
+      headers {
+        key
+        value
+      }
+    }
+  }
+}
+    `;
+
+/**
+ * __useGetSenderRequestQuery__
+ *
+ * To run a query within a React component, call `useGetSenderRequestQuery` and pass it any options that fit your needs.
+ * When your component renders, `useGetSenderRequestQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useGetSenderRequestQuery({
+ *   variables: {
+ *      id: // value for 'id'
+ *   },
+ * });
+ */
+export function useGetSenderRequestQuery(baseOptions: Apollo.QueryHookOptions<GetSenderRequestQuery, GetSenderRequestQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<GetSenderRequestQuery, GetSenderRequestQueryVariables>(GetSenderRequestDocument, options);
+      }
+export function useGetSenderRequestLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GetSenderRequestQuery, GetSenderRequestQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<GetSenderRequestQuery, GetSenderRequestQueryVariables>(GetSenderRequestDocument, options);
+        }
+export type GetSenderRequestQueryHookResult = ReturnType<typeof useGetSenderRequestQuery>;
+export type GetSenderRequestLazyQueryHookResult = ReturnType<typeof useGetSenderRequestLazyQuery>;
+export type GetSenderRequestQueryResult = Apollo.QueryResult<GetSenderRequestQuery, GetSenderRequestQueryVariables>;
+export const GetSenderRequestsDocument = gql`
+    query GetSenderRequests {
+  senderRequests {
+    id
+    url
+    method
+    response {
+      id
+      statusCode
+      statusReason
+    }
+  }
+}
+    `;
+
+/**
+ * __useGetSenderRequestsQuery__
+ *
+ * To run a query within a React component, call `useGetSenderRequestsQuery` and pass it any options that fit your needs.
+ * When your component renders, `useGetSenderRequestsQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useGetSenderRequestsQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useGetSenderRequestsQuery(baseOptions?: Apollo.QueryHookOptions<GetSenderRequestsQuery, GetSenderRequestsQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<GetSenderRequestsQuery, GetSenderRequestsQueryVariables>(GetSenderRequestsDocument, options);
+      }
+export function useGetSenderRequestsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GetSenderRequestsQuery, GetSenderRequestsQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<GetSenderRequestsQuery, GetSenderRequestsQueryVariables>(GetSenderRequestsDocument, options);
+        }
+export type GetSenderRequestsQueryHookResult = ReturnType<typeof useGetSenderRequestsQuery>;
+export type GetSenderRequestsLazyQueryHookResult = ReturnType<typeof useGetSenderRequestsLazyQuery>;
+export type GetSenderRequestsQueryResult = Apollo.QueryResult<GetSenderRequestsQuery, GetSenderRequestsQueryVariables>;

admin/src/lib/graphql/omitTypename.ts

@@ -0,0 +1,7 @@
+function omitTypename<T>(key: string, value: T): T | undefined {
+  return key === "__typename" ? undefined : value;
+}
+
+export function withoutTypename<T>(input: T): T {
+  return JSON.parse(JSON.stringify(input), omitTypename);
+}

admin/src/lib/graphql/useApollo.ts

@@ -0,0 +1,24 @@
+import { ApolloClient, HttpLink, InMemoryCache, NormalizedCacheObject } from "@apollo/client";
+
+let apolloClient: ApolloClient<NormalizedCacheObject>;
+
+function createApolloClient() {
+  return new ApolloClient({
+    ssrMode: typeof window === "undefined",
+    link: new HttpLink({
+      uri: "/api/graphql/",
+    }),
+    cache: new InMemoryCache(),
+  });
+}
+
+export function useApollo() {
+  const _apolloClient = apolloClient ?? createApolloClient();
+
+  // For SSG and SSR always create a new Apollo Client
+  if (typeof window === "undefined") return _apolloClient;
+  // Create the Apollo Client once in the client
+  if (!apolloClient) apolloClient = _apolloClient;
+
+  return _apolloClient;
+}

admin/src/lib/mui/theme.ts

@@ -1,5 +1,11 @@
-import { createTheme } from "@mui/material/styles";
 import * as colors from "@mui/material/colors";
+import { createTheme } from "@mui/material/styles";
+
+declare module "@mui/material/Paper" {
+  interface PaperPropsVariantOverrides {
+    centered: true;
+  }
+}
 
 const heading = {
   fontFamily: "'JetBrains Mono', monospace",
@@ -41,14 +47,29 @@ theme = createTheme(theme, {
     },
   },
   components: {
-    MuiTableCell: {
+    MuiTableRow: {
       styleOverrides: {
-        stickyHeader: {
-          backgroundColor: theme.palette.secondary.dark,
+        root: {
+          "&.Mui-selected, &.Mui-selected:hover": {
+            backgroundColor: theme.palette.grey[700],
           },
         },
       },
     },
+    MuiPaper: {
+      variants: [
+        {
+          props: { variant: "centered" },
+          style: {
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            padding: theme.spacing(4),
+          },
+        },
+      ],
+    },
+  },
 });
 
 export default theme;

admin/src/lib/omitTypename.ts

@@ -1,5 +0,0 @@
-const omitTypename = (key: string, value: any) => (key === "__typename" ? undefined : value);
-
-export function withoutTypename(input: any): any {
-  return JSON.parse(JSON.stringify(input), omitTypename);
-}

admin/src/lib/queryParamsFromURL.tsx

@@ -0,0 +1,17 @@
+import { KeyValuePair } from "./components/KeyValuePair";
+
+export function queryParamsFromURL(url: string): KeyValuePair[] {
+  const questionMarkIndex = url.indexOf("?");
+  if (questionMarkIndex === -1) {
+    return [];
+  }
+
+  const queryParams: KeyValuePair[] = [];
+
+  const searchParams = new URLSearchParams(url.slice(questionMarkIndex + 1));
+  for (const [key, value] of searchParams) {
+    queryParams.push({ key, value });
+  }
+
+  return queryParams;
+}

admin/src/lib/requestLogs.ts

@@ -1,24 +0,0 @@
-
-export type RequestLog = {
-    id: string
-    url: string
-    method: string
-    proto: string
-    headers: HTTPHeader[]
-    body?: string
-    timestamp: string
-    response?: ResponseLog
-}
-
-export type ResponseLog = {
-    proto: string
-    statusCode: number
-    statusReason: string
-    body?: string
-    headers: HTTPHeader[]
-}
-
-export type HTTPHeader = {
-    key: string
-    value: string
-}

admin/src/lib/scope.ts

@@ -1,3 +0,0 @@
-export type ScopeRule = {
-    url?: string
-}

admin/src/pages/_app.tsx

@@ -1,14 +1,17 @@
-import * as React from "react";
-import Head from "next/head";
-import { AppProps } from "next/app";
 import { ApolloProvider } from "@apollo/client";
-import { ThemeProvider } from "@mui/material/styles";
-import CssBaseline from "@mui/material/CssBaseline";
 import { CacheProvider, EmotionCache } from "@emotion/react";
+import { ThemeProvider } from "@mui/material";
+import CssBaseline from "@mui/material/CssBaseline";
+import { AppProps } from "next/app";
+import Head from "next/head";
+import React from "react";
 
-import createEmotionCache from "../lib/createEmotionCache";
-import theme from "../lib/theme";
-import { useApollo } from "../lib/graphql";
+import { ActiveProjectProvider } from "lib/ActiveProjectContext";
+import { useApollo } from "lib/graphql/useApollo";
+import createEmotionCache from "lib/mui/createEmotionCache";
+import theme from "lib/mui/theme";
+
+import "../styles.css";
 
 // Client-side cache, shared for the whole session of the user in the browser.
 const clientSideEmotionCache = createEmotionCache();
@@ -19,7 +22,7 @@ interface MyAppProps extends AppProps {
 
 export default function MyApp(props: MyAppProps) {
   const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;
-  const apolloClient = useApollo(pageProps);
+  const apolloClient = useApollo();
 
   return (
     <CacheProvider value={emotionCache}>
@@ -28,10 +31,12 @@ export default function MyApp(props: MyAppProps) {
         <meta name="viewport" content="initial-scale=1, width=device-width" />
       </Head>
       <ApolloProvider client={apolloClient}>
+        <ActiveProjectProvider>
           <ThemeProvider theme={theme}>
             <CssBaseline />
             <Component {...pageProps} />
           </ThemeProvider>
+        </ActiveProjectProvider>
       </ApolloProvider>
     </CacheProvider>
   );

admin/src/pages/_document.tsx

@@ -1,11 +1,12 @@
-import * as React from "react";
-import Document, { Html, Head, Main, NextScript } from "next/document";
 import createEmotionServer from "@emotion/server/create-instance";
+import Document, { Html, Head, Main, NextScript } from "next/document";
+import React from "react";
 
-import createEmotionCache from "../lib/createEmotionCache";
-import theme from "../lib/theme";
+import createEmotionCache from "lib/mui/createEmotionCache";
+import theme from "lib/mui/theme";
 
 export default class MyDocument extends Document {
+  /* eslint-disable */
   render() {
     return (
       <Html lang="en">

admin/src/pages/get-started/index.tsx

@@ -1,32 +0,0 @@
-import { Box, Link as MaterialLink, Typography } from "@mui/material";
-import Link from "next/link";
-
-import React from "react";
-
-import Layout, { Page } from "../../components/Layout";
-
-function Index(): JSX.Element {
-  return (
-    <Layout page={Page.GetStarted} title="Get started">
-      <Box p={4}>
-        <Box mb={3}>
-          <Typography variant="h4">Get started</Typography>
-        </Box>
-        <Typography paragraph>
-          You’ve loaded a (new) project. What’s next? You can now use the MITM proxy and review HTTP requests and
-          responses via the{" "}
-          <Link href="/proxy/logs" passHref>
-            <MaterialLink color="primary">Proxy logs</MaterialLink>
-          </Link>
-          . Stuck? Ask for help on the{" "}
-          <MaterialLink href="https://github.com/dstotijn/hetty/discussions" color="primary" target="_blank">
-            Discussions forum
-          </MaterialLink>
-          .
-        </Typography>
-      </Box>
-    </Layout>
-  );
-}
-
-export default Index;

admin/src/pages/index.tsx

@@ -1,8 +1,8 @@
-import { Box, Button, Typography } from "@mui/material";
 import FolderIcon from "@mui/icons-material/Folder";
+import { Box, Button, Typography } from "@mui/material";
 import Link from "next/link";
 
-import Layout, { Page } from "../components/Layout";
+import { Layout, Page } from "features/Layout";
 
 function Index(): JSX.Element {
   const highlightSx = { color: "primary.main" };

admin/src/pages/projects/index.tsx

@@ -1,7 +1,8 @@
 import { Box, Divider, Grid, Typography } from "@mui/material";
-import Layout, { Page } from "../../components/Layout";
-import NewProject from "../../components/projects/NewProject";
-import ProjectList from "../../components/projects/ProjectList";
+
+import { Layout, Page } from "features/Layout";
+import NewProject from "features/projects/components/NewProject";
+import ProjectList from "features/projects/components/ProjectList";
 
 function Index(): JSX.Element {
   return (

admin/src/pages/proxy/index.tsx

@@ -1,9 +1,9 @@
-import React from "react";
-import { Button, Typography } from "@mui/material";
 import ListIcon from "@mui/icons-material/List";
+import { Button, Typography } from "@mui/material";
 import Link from "next/link";
+import React from "react";
 
-import Layout, { Page } from "../../components/Layout";
+import { Layout, Page } from "features/Layout";
 
 function Index(): JSX.Element {
   return (

admin/src/pages/proxy/logs/index.tsx

@@ -1,16 +1,10 @@
-import { Box } from "@mui/material";
-
-import LogsOverview from "../../../components/reqlog/LogsOverview";
-import Layout, { Page } from "../../../components/Layout";
-import Search from "../../../components/reqlog/Search";
+import { Layout, Page } from "features/Layout";
+import RequestLogs from "features/reqlog";
 
 function ProxyLogs(): JSX.Element {
   return (
     <Layout page={Page.ProxyLogs} title="Proxy logs">
-      <Box mb={2}>
-        <Search />
-      </Box>
-      <LogsOverview />
+      <RequestLogs />
     </Layout>
   );
 }

admin/src/pages/scope/index.tsx

@@ -1,9 +1,9 @@
 import { Box, Divider, Grid, Typography } from "@mui/material";
 import React from "react";
 
-import Layout, { Page } from "../../components/Layout";
-import AddRule from "../../components/scope/AddRule";
-import Rules from "../../components/scope/Rules";
+import { Layout, Page } from "features/Layout";
+import AddRule from "features/scope/components/AddRule";
+import Rules from "features/scope/components/Rules";
 
 function Index(): JSX.Element {
   return (

admin/src/pages/sender/index.tsx

@@ -1,11 +1,10 @@
-import { Box, Typography } from "@mui/material";
-
-import Layout, { Page } from "../../components/Layout";
+import { Layout, Page } from "features/Layout";
+import Sender from "features/sender";
 
 function Index(): JSX.Element {
   return (
     <Layout page={Page.Sender} title="Sender">
-      <Typography paragraph>Coming soon…</Typography>
+      <Sender />
     </Layout>
   );
 }

admin/src/styles.css

@@ -0,0 +1,5 @@
+html,
+body,
+#__next {
+  height: 100%;
+}

admin/tsconfig.json

@@ -1,11 +1,12 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "baseUrl": "src",
+    "paths": {
+      "src/*": ["./src/*"]
+    },
+    "downlevelIteration": true,
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -19,12 +20,6 @@
     "jsx": "preserve",
     "incremental": true
   },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
 }

cmd/hetty/cert.go

@@ -0,0 +1,212 @@
+package main
+
+import (
+	"context"
+	"flag"
+	"fmt"
+
+	"github.com/mitchellh/go-homedir"
+	"github.com/peterbourgon/ff/v3/ffcli"
+	"github.com/smallstep/truststore"
+)
+
+var certUsage = `
+Usage:
+    hetty cert <subcommand> [flags]
+
+Certificate management tools.
+
+Options:
+    --help, -h  Output this usage text.
+
+Subcommands:
+    - install    Installs a certificate to the system trust store, and
+                 (optionally) to the Firefox and Java trust stores.
+    - uninstall  Uninstalls a certificate from the system trust store, and
+                 (optionally) from the Firefox and Java trust stores.
+
+Run ` + "`hetty cert <subcommand> --help`" + ` for subcommand specific usage instructions.
+
+Visit https://hetty.xyz to learn more about Hetty.
+`
+
+var certInstallUsage = `
+Usage:
+    hetty cert install [flags]
+	
+Installs a certificate to the system trust store, and (optionally) to the Firefox
+and Java trust stores.
+
+Options:
+    --cert         Path to certificate. (Default: "~/.hetty/hetty_cert.pem")
+    --firefox      Install certificate to Firefox trust store. (Default: false)
+    --java         Install certificate to Java trust store. (Default: false)
+    --skip-system  Skip installing certificate to system trust store (Default: false)
+    --help, -h     Output this usage text.
+
+Visit https://hetty.xyz to learn more about Hetty.
+`
+
+var certUninstallUsage = `
+Usage:
+    hetty cert uninstall [flags]
+	
+Uninstalls a certificate from the system trust store, and (optionally) from the Firefox
+and Java trust stores.
+
+Options:
+    --cert         Path to certificate. (Default: "~/.hetty/hetty_cert.pem")
+    --firefox      Uninstall certificate from Firefox trust store. (Default: false)
+    --java         Uninstall certificate from Java trust store. (Default: false)
+    --skip-system  Skip uninstalling certificate from system trust store (Default: false)
+    --help, -h     Output this usage text.
+
+Visit https://hetty.xyz to learn more about Hetty.
+`
+
+type CertInstallCommand struct {
+	config     *Config
+	cert       string
+	firefox    bool
+	java       bool
+	skipSystem bool
+}
+
+type CertUninstallCommand struct {
+	config     *Config
+	cert       string
+	firefox    bool
+	java       bool
+	skipSystem bool
+}
+
+func NewCertCommand(rootConfig *Config) *ffcli.Command {
+	return &ffcli.Command{
+		Name: "cert",
+		Subcommands: []*ffcli.Command{
+			NewCertInstallCommand(rootConfig),
+			NewCertUninstallCommand(rootConfig),
+		},
+		Exec: func(context.Context, []string) error {
+			return flag.ErrHelp
+		},
+		UsageFunc: func(*ffcli.Command) string {
+			return certUsage
+		},
+	}
+}
+
+func NewCertInstallCommand(rootConfig *Config) *ffcli.Command {
+	cmd := CertInstallCommand{
+		config: rootConfig,
+	}
+	fs := flag.NewFlagSet("hetty cert install", flag.ExitOnError)
+
+	fs.StringVar(&cmd.cert, "cert", "~/.hetty/hetty_cert.pem", "Path to certificate.")
+	fs.BoolVar(&cmd.firefox, "firefox", false, "Install certificate to Firefox trust store. (Default: false)")
+	fs.BoolVar(&cmd.java, "java", false, "Install certificate to Java trust store. (Default: false)")
+	fs.BoolVar(&cmd.skipSystem, "skip-system", false, "Skip installing certificate to system trust store (Default: false)")
+
+	cmd.config.RegisterFlags(fs)
+
+	return &ffcli.Command{
+		Name:    "install",
+		FlagSet: fs,
+		Exec:    cmd.Exec,
+		UsageFunc: func(*ffcli.Command) string {
+			return certInstallUsage
+		},
+	}
+}
+
+func (cmd *CertInstallCommand) Exec(_ context.Context, _ []string) error {
+	caCertFile, err := homedir.Expand(cmd.cert)
+	if err != nil {
+		return fmt.Errorf("failed to parse certificate filepath: %w", err)
+	}
+
+	opts := []truststore.Option{}
+
+	if cmd.skipSystem {
+		opts = append(opts, truststore.WithNoSystem())
+	}
+
+	if cmd.firefox {
+		opts = append(opts, truststore.WithFirefox())
+	}
+
+	if cmd.java {
+		opts = append(opts, truststore.WithJava())
+	}
+
+	if !cmd.skipSystem {
+		cmd.config.logger.Info(
+			"To install the certificate in the system trust store, you might be prompted for your password.")
+	}
+
+	if err := truststore.InstallFile(caCertFile, opts...); err != nil {
+		return fmt.Errorf("failed to install certificate: %w", err)
+	}
+
+	cmd.config.logger.Info("Finished installing certificate.")
+
+	return nil
+}
+
+func NewCertUninstallCommand(rootConfig *Config) *ffcli.Command {
+	cmd := CertUninstallCommand{
+		config: rootConfig,
+	}
+	fs := flag.NewFlagSet("hetty cert uninstall", flag.ExitOnError)
+
+	fs.StringVar(&cmd.cert, "cert", "~/.hetty/hetty_cert.pem", "Path to certificate.")
+	fs.BoolVar(&cmd.firefox, "firefox", false, "Uninstall certificate from Firefox trust store. (Default: false)")
+	fs.BoolVar(&cmd.java, "java", false, "Uninstall certificate from Java trust store. (Default: false)")
+	fs.BoolVar(&cmd.skipSystem, "skip-system", false,
+		"Skip uninstalling certificate from system trust store (Default: false)")
+
+	cmd.config.RegisterFlags(fs)
+
+	return &ffcli.Command{
+		Name:    "uninstall",
+		FlagSet: fs,
+		Exec:    cmd.Exec,
+		UsageFunc: func(*ffcli.Command) string {
+			return certUninstallUsage
+		},
+	}
+}
+
+func (cmd *CertUninstallCommand) Exec(_ context.Context, _ []string) error {
+	caCertFile, err := homedir.Expand(cmd.cert)
+	if err != nil {
+		return fmt.Errorf("failed to parse certificate filepath: %w", err)
+	}
+
+	opts := []truststore.Option{}
+
+	if cmd.skipSystem {
+		opts = append(opts, truststore.WithNoSystem())
+	}
+
+	if cmd.firefox {
+		opts = append(opts, truststore.WithFirefox())
+	}
+
+	if cmd.java {
+		opts = append(opts, truststore.WithJava())
+	}
+
+	if !cmd.skipSystem {
+		cmd.config.logger.Info(
+			"To uninstall the certificate from the system trust store, you might be prompted for your password.")
+	}
+
+	if err := truststore.UninstallFile(caCertFile, opts...); err != nil {
+		return fmt.Errorf("failed to uninstall certificate: %w", err)
+	}
+
+	cmd.config.logger.Info("Finished uninstalling certificate.")
+
+	return nil
+}

cmd/hetty/config.go

@@ -0,0 +1,23 @@
+package main
+
+import (
+	"flag"
+
+	"go.uber.org/zap"
+)
+
+// Config represents the global configuration shared amongst all commands.
+type Config struct {
+	verbose  bool
+	jsonLogs bool
+	logger   *zap.Logger
+}
+
+// RegisterFlags registers the flag fields into the provided flag.FlagSet. This
+// helper function allows subcommands to register the root flags into their
+// flagsets, creating "global" flags that can be passed after any subcommand at
+// the commandline.
+func (cfg *Config) RegisterFlags(fs *flag.FlagSet) {
+	fs.BoolVar(&cfg.verbose, "verbose", false, "Enable verbose logging.")
+	fs.BoolVar(&cfg.jsonLogs, "json", false, "Encode logs as JSON, instead of pretty/human readable output.")
+}

cmd/hetty/hetty.go

@@ -0,0 +1,298 @@
+package main
+
+import (
+	"context"
+	"crypto/tls"
+	"embed"
+	"errors"
+	"flag"
+	"fmt"
+	"io/fs"
+	"net"
+	"net/http"
+	"os"
+	"os/exec"
+	"os/signal"
+	"strings"
+
+	"github.com/chromedp/chromedp"
+	badgerdb "github.com/dgraph-io/badger/v3"
+	"github.com/gorilla/mux"
+	"github.com/mitchellh/go-homedir"
+	"github.com/peterbourgon/ff/v3/ffcli"
+	"go.uber.org/zap"
+	"go.uber.org/zap/zapcore"
+
+	"github.com/dstotijn/hetty/pkg/api"
+	"github.com/dstotijn/hetty/pkg/chrome"
+	"github.com/dstotijn/hetty/pkg/db/badger"
+	"github.com/dstotijn/hetty/pkg/proj"
+	"github.com/dstotijn/hetty/pkg/proxy"
+	"github.com/dstotijn/hetty/pkg/reqlog"
+	"github.com/dstotijn/hetty/pkg/scope"
+	"github.com/dstotijn/hetty/pkg/sender"
+)
+
+var version = "0.0.0"
+
+//go:embed admin
+//go:embed admin/_next/static
+//go:embed admin/_next/static/chunks/pages/*.js
+//go:embed admin/_next/static/*/*.js
+var adminContent embed.FS
+
+var hettyUsage = `
+Usage:
+    hetty [flags] [subcommand] [flags]
+
+Runs an HTTP server with (MITM) proxy, GraphQL service, and a web based admin interface.
+
+Options:
+    --cert         Path to root CA certificate. Creates file if it doesn't exist. (Default: "~/.hetty/hetty_cert.pem")
+    --key          Path to root CA private key. Creates file if it doesn't exist. (Default: "~/.hetty/hetty_key.pem")
+    --db           Database directory path. (Default: "~/.hetty/db")
+    --addr         TCP address for HTTP server to listen on, in the form \"host:port\". (Default: ":8080")
+    --chrome       Launch Chrome with proxy settings applied and certificate errors ignored. (Default: false)
+    --verbose      Enable verbose logging.
+    --json         Encode logs as JSON, instead of pretty/human readable output.
+    --version, -v  Output version.
+    --help, -h     Output this usage text.
+
+Subcommands:
+    - cert  Certificate management
+
+Run ` + "`hetty <subcommand> --help`" + ` for subcommand specific usage instructions.
+
+Visit https://hetty.xyz to learn more about Hetty.
+`
+
+type HettyCommand struct {
+	config *Config
+
+	cert    string
+	key     string
+	db      string
+	addr    string
+	chrome  bool
+	version bool
+}
+
+func NewHettyCommand() (*ffcli.Command, *Config) {
+	cmd := HettyCommand{
+		config: &Config{},
+	}
+
+	fs := flag.NewFlagSet("hetty", flag.ExitOnError)
+
+	fs.StringVar(&cmd.cert, "cert", "~/.hetty/hetty_cert.pem",
+		"Path to root CA certificate. Creates a new certificate if file doesn't exist.")
+	fs.StringVar(&cmd.key, "key", "~/.hetty/hetty_key.pem",
+		"Path to root CA private key. Creates a new private key if file doesn't exist.")
+	fs.StringVar(&cmd.db, "db", "~/.hetty/db", "Database directory path.")
+	fs.StringVar(&cmd.addr, "addr", ":8080", "TCP address to listen on, in the form \"host:port\".")
+	fs.BoolVar(&cmd.chrome, "chrome", false, "Launch Chrome with proxy settings applied and certificate errors ignored.")
+	fs.BoolVar(&cmd.version, "version", false, "Output version.")
+	fs.BoolVar(&cmd.version, "v", false, "Output version.")
+
+	cmd.config.RegisterFlags(fs)
+
+	return &ffcli.Command{
+		Name:    "hetty",
+		FlagSet: fs,
+		Subcommands: []*ffcli.Command{
+			NewCertCommand(cmd.config),
+		},
+		Exec: cmd.Exec,
+		UsageFunc: func(*ffcli.Command) string {
+			return hettyUsage
+		},
+	}, cmd.config
+}
+
+func (cmd *HettyCommand) Exec(ctx context.Context, _ []string) error {
+	ctx, stop := signal.NotifyContext(ctx, os.Interrupt)
+	defer stop()
+
+	if cmd.version {
+		fmt.Fprint(os.Stdout, version+"\n")
+		return nil
+	}
+
+	mainLogger := cmd.config.logger.Named("main")
+
+	listenHost, listenPort, err := net.SplitHostPort(cmd.addr)
+	if err != nil {
+		mainLogger.Fatal("Failed to parse listening address.", zap.Error(err))
+	}
+
+	url := fmt.Sprintf("http://%v:%v", listenHost, listenPort)
+	if listenHost == "" || listenHost == "0.0.0.0" || listenHost == "127.0.0.1" || listenHost == "::1" {
+		url = fmt.Sprintf("http://localhost:%v", listenPort)
+	}
+
+	// Expand `~` in filepaths.
+	caCertFile, err := homedir.Expand(cmd.cert)
+	if err != nil {
+		cmd.config.logger.Fatal("Failed to parse CA certificate filepath.", zap.Error(err))
+	}
+
+	caKeyFile, err := homedir.Expand(cmd.key)
+	if err != nil {
+		cmd.config.logger.Fatal("Failed to parse CA private key filepath.", zap.Error(err))
+	}
+
+	dbPath, err := homedir.Expand(cmd.db)
+	if err != nil {
+		cmd.config.logger.Fatal("Failed to parse database path.", zap.Error(err))
+	}
+
+	// Load existing CA certificate and key from disk, or generate and write
+	// to disk if no files exist yet.
+	caCert, caKey, err := proxy.LoadOrCreateCA(caKeyFile, caCertFile)
+	if err != nil {
+		cmd.config.logger.Fatal("Failed to load or create CA key pair.", zap.Error(err))
+	}
+
+	// BadgerDB logs some verbose entries with `INFO` level, so unless
+	// we're running in debug mode, bump the minimal level to `WARN`.
+	dbLogger := cmd.config.logger.Named("badgerdb").WithOptions(zap.IncreaseLevel(zapcore.WarnLevel))
+
+	dbSugaredLogger := dbLogger.Sugar()
+
+	badger, err := badger.OpenDatabase(
+		badgerdb.DefaultOptions(dbPath).WithLogger(badger.NewLogger(dbSugaredLogger)),
+	)
+	if err != nil {
+		cmd.config.logger.Fatal("Failed to open database.", zap.Error(err))
+	}
+	defer badger.Close()
+
+	scope := &scope.Scope{}
+
+	reqLogService := reqlog.NewService(reqlog.Config{
+		Scope:      scope,
+		Repository: badger,
+		Logger:     cmd.config.logger.Named("reqlog").Sugar(),
+	})
+
+	senderService := sender.NewService(sender.Config{
+		Repository:    badger,
+		ReqLogService: reqLogService,
+	})
+
+	projService, err := proj.NewService(proj.Config{
+		Repository:    badger,
+		ReqLogService: reqLogService,
+		SenderService: senderService,
+		Scope:         scope,
+	})
+	if err != nil {
+		cmd.config.logger.Fatal("Failed to create new projects service.", zap.Error(err))
+	}
+
+	proxy, err := proxy.NewProxy(proxy.Config{
+		CACert: caCert,
+		CAKey:  caKey,
+		Logger: cmd.config.logger.Named("proxy").Sugar(),
+	})
+	if err != nil {
+		cmd.config.logger.Fatal("Failed to create new proxy.", zap.Error(err))
+	}
+
+	proxy.UseRequestModifier(reqLogService.RequestModifier)
+	proxy.UseResponseModifier(reqLogService.ResponseModifier)
+
+	fsSub, err := fs.Sub(adminContent, "admin")
+	if err != nil {
+		cmd.config.logger.Fatal("Failed to construct file system subtree from admin dir.", zap.Error(err))
+	}
+
+	adminHandler := http.FileServer(http.FS(fsSub))
+	router := mux.NewRouter().SkipClean(true)
+	adminRouter := router.MatcherFunc(func(req *http.Request, match *mux.RouteMatch) bool {
+		hostname, _ := os.Hostname()
+		host, _, _ := net.SplitHostPort(req.Host)
+
+		// Serve local admin routes when either:
+		// - The `Host` is well-known, e.g. `hetty.proxy`, `localhost:[port]`
+		//   or the listen addr `[host]:[port]`.
+		// - The request is not for TLS proxying (e.g. no `CONNECT`) and not
+		//   for proxying an external URL. E.g. Request-Line (RFC 7230, Section 3.1.1)
+		//   has no scheme.
+		return strings.EqualFold(host, hostname) ||
+			req.Host == "hetty.proxy" ||
+			req.Host == fmt.Sprintf("%v:%v", "localhost", listenPort) ||
+			req.Host == fmt.Sprintf("%v:%v", listenHost, listenPort) ||
+			req.Method != http.MethodConnect && !strings.HasPrefix(req.RequestURI, "http://")
+	}).Subrouter().StrictSlash(true)
+
+	// GraphQL server.
+	gqlEndpoint := "/api/graphql/"
+	adminRouter.Path(gqlEndpoint).Handler(api.HTTPHandler(&api.Resolver{
+		ProjectService:    projService,
+		RequestLogService: reqLogService,
+		SenderService:     senderService,
+	}, gqlEndpoint))
+
+	// Admin interface.
+	adminRouter.PathPrefix("").Handler(adminHandler)
+
+	// Fallback (default) is the Proxy handler.
+	router.PathPrefix("").Handler(proxy)
+
+	httpServer := &http.Server{
+		Addr:         cmd.addr,
+		Handler:      router,
+		TLSNextProto: map[string]func(*http.Server, *tls.Conn, http.Handler){}, // Disable HTTP/2
+		ErrorLog:     zap.NewStdLog(cmd.config.logger.Named("http")),
+	}
+
+	go func() {
+		mainLogger.Info(fmt.Sprintf("Hetty (v%v) is running on %v ...", version, cmd.addr))
+		mainLogger.Info(fmt.Sprintf("\x1b[%dm%s\x1b[0m", uint8(32), "Get started at "+url))
+
+		err := httpServer.ListenAndServe()
+		if err != http.ErrServerClosed {
+			mainLogger.Fatal("HTTP server closed unexpected.", zap.Error(err))
+		}
+	}()
+
+	if cmd.chrome {
+		ctx, cancel := chrome.NewExecAllocator(ctx, chrome.Config{
+			ProxyServer:      url,
+			ProxyBypassHosts: []string{url},
+		})
+		defer cancel()
+
+		taskCtx, cancel := chromedp.NewContext(ctx)
+		defer cancel()
+
+		err = chromedp.Run(taskCtx, chromedp.Navigate(url))
+
+		switch {
+		case errors.Is(err, exec.ErrNotFound):
+			mainLogger.Info("Chrome executable not found.")
+		case err != nil:
+			mainLogger.Error(fmt.Sprintf("Failed to navigate to %v.", url), zap.Error(err))
+		default:
+			mainLogger.Info("Launched Chrome.")
+		}
+	}
+
+	// Wait for interrupt signal.
+	<-ctx.Done()
+	// Restore signal, allowing "force quit".
+	stop()
+
+	mainLogger.Info("Shutting down HTTP server. Press Ctrl+C to force quit.")
+
+	// Note: We expect httpServer.Handler to handle timeouts, thus, we don't
+	// need a context value with deadline here.
+	//nolint:contextcheck
+	err = httpServer.Shutdown(context.Background())
+	if err != nil {
+		return fmt.Errorf("failed to shutdown HTTP server: %w", err)
+	}
+
+	return nil
+}

cmd/hetty/main.go

@@ -1,155 +1,35 @@
 package main
 
 import (
-	"crypto/tls"
-	"embed"
+	"context"
 	"errors"
 	"flag"
-	"fmt"
-	"io/fs"
-	"log"
-	"net"
-	"net/http"
+	llog "log"
 	"os"
-	"strings"
 
-	"github.com/99designs/gqlgen/graphql/handler"
-	"github.com/99designs/gqlgen/graphql/playground"
-	badgerdb "github.com/dgraph-io/badger/v3"
-	"github.com/gorilla/mux"
-	"github.com/mitchellh/go-homedir"
+	"go.uber.org/zap"
 
-	"github.com/dstotijn/hetty/pkg/api"
-	"github.com/dstotijn/hetty/pkg/db/badger"
-	"github.com/dstotijn/hetty/pkg/proj"
-	"github.com/dstotijn/hetty/pkg/proxy"
-	"github.com/dstotijn/hetty/pkg/reqlog"
-	"github.com/dstotijn/hetty/pkg/scope"
+	"github.com/dstotijn/hetty/pkg/log"
 )
 
-var version = "0.0.0"
-
-// Flag variables.
-var (
-	caCertFile string
-	caKeyFile  string
-	dbPath     string
-	addr       string
-)
-
-//go:embed admin
-//go:embed admin/_next/static
-//go:embed admin/_next/static/chunks/pages/*.js
-//go:embed admin/_next/static/*/*.js
-var adminContent embed.FS
-
 func main() {
-	if err := run(); err != nil {
-		log.Fatalf("[ERROR]: %v", err)
+	hettyCmd, cfg := NewHettyCommand()
+
+	if err := hettyCmd.Parse(os.Args[1:]); err != nil {
+		llog.Fatalf("Failed to parse command line arguments: %v", err)
+	}
+
+	logger, err := log.NewZapLogger(cfg.verbose, cfg.jsonLogs)
+	if err != nil {
+		llog.Fatal(err)
+	}
+	//nolint:errcheck
+	defer logger.Sync()
+
+	cfg.logger = logger
+
+	err = hettyCmd.Run(context.Background())
+	if err != nil && !errors.Is(err, flag.ErrHelp) {
+		logger.Fatal("Command failed.", zap.Error(err))
 	}
 }
-
-func run() error {
-	flag.StringVar(&caCertFile, "cert", "~/.hetty/hetty_cert.pem",
-		"CA certificate filepath. Creates a new CA certificate if file doesn't exist")
-	flag.StringVar(&caKeyFile, "key", "~/.hetty/hetty_key.pem",
-		"CA private key filepath. Creates a new CA private key if file doesn't exist")
-	flag.StringVar(&dbPath, "db", "~/.hetty/db", "Database directory path")
-	flag.StringVar(&addr, "addr", ":8080", "TCP address to listen on, in the form \"host:port\"")
-	flag.Parse()
-
-	// Expand `~` in filepaths.
-	caCertFile, err := homedir.Expand(caCertFile)
-	if err != nil {
-		return fmt.Errorf("could not parse CA certificate filepath: %w", err)
-	}
-
-	caKeyFile, err := homedir.Expand(caKeyFile)
-	if err != nil {
-		return fmt.Errorf("could not parse CA private key filepath: %w", err)
-	}
-
-	dbPath, err := homedir.Expand(dbPath)
-	if err != nil {
-		return fmt.Errorf("could not parse projects filepath: %w", err)
-	}
-
-	// Load existing CA certificate and key from disk, or generate and write
-	// to disk if no files exist yet.
-	caCert, caKey, err := proxy.LoadOrCreateCA(caKeyFile, caCertFile)
-	if err != nil {
-		return fmt.Errorf("could not create/load CA key pair: %w", err)
-	}
-
-	badger, err := badger.OpenDatabase(badgerdb.DefaultOptions(dbPath))
-	if err != nil {
-		return fmt.Errorf("could not open badger database: %w", err)
-	}
-	defer badger.Close()
-
-	scope := &scope.Scope{}
-
-	reqLogService := reqlog.NewService(reqlog.Config{
-		Scope:      scope,
-		Repository: badger,
-	})
-
-	projService, err := proj.NewService(proj.Config{
-		Repository:    badger,
-		ReqLogService: reqLogService,
-		Scope:         scope,
-	})
-	if err != nil {
-		return fmt.Errorf("could not create new project service: %w", err)
-	}
-
-	p, err := proxy.NewProxy(caCert, caKey)
-	if err != nil {
-		return fmt.Errorf("could not create proxy: %w", err)
-	}
-
-	p.UseRequestModifier(reqLogService.RequestModifier)
-	p.UseResponseModifier(reqLogService.ResponseModifier)
-
-	fsSub, err := fs.Sub(adminContent, "admin")
-	if err != nil {
-		return fmt.Errorf("could not prepare subtree file system: %w", err)
-	}
-
-	adminHandler := http.FileServer(http.FS(fsSub))
-	router := mux.NewRouter().SkipClean(true)
-	adminRouter := router.MatcherFunc(func(req *http.Request, match *mux.RouteMatch) bool {
-		hostname, _ := os.Hostname()
-		host, _, _ := net.SplitHostPort(req.Host)
-		return strings.EqualFold(host, hostname) || (req.Host == "hetty.proxy" || req.Host == "localhost:8080")
-	}).Subrouter().StrictSlash(true)
-
-	// GraphQL server.
-	adminRouter.Path("/api/playground/").Handler(playground.Handler("GraphQL Playground", "/api/graphql/"))
-	adminRouter.Path("/api/graphql/").Handler(
-		handler.NewDefaultServer(api.NewExecutableSchema(api.Config{Resolvers: &api.Resolver{
-			RequestLogService: reqLogService,
-			ProjectService:    projService,
-		}})))
-
-	// Admin interface.
-	adminRouter.PathPrefix("").Handler(adminHandler)
-
-	// Fallback (default) is the Proxy handler.
-	router.PathPrefix("").Handler(p)
-
-	s := &http.Server{
-		Addr:         addr,
-		Handler:      router,
-		TLSNextProto: map[string]func(*http.Server, *tls.Conn, http.Handler){}, // Disable HTTP/2
-	}
-
-	log.Printf("[INFO] Hetty (v%v) is running on %v ...", version, addr)
-
-	err = s.ListenAndServe()
-	if err != nil && errors.Is(err, http.ErrServerClosed) {
-		return fmt.Errorf("http server closed unexpected: %w", err)
-	}
-
-	return nil
-}

go.mod

@@ -4,22 +4,31 @@ go 1.17
 
 require (
 	github.com/99designs/gqlgen v0.14.0
+	github.com/chromedp/chromedp v0.7.8
 	github.com/dgraph-io/badger/v3 v3.2103.2
 	github.com/google/go-cmp v0.5.6
 	github.com/gorilla/mux v1.7.4
 	github.com/matryer/moq v0.2.5
 	github.com/mitchellh/go-homedir v1.1.0
 	github.com/oklog/ulid v1.3.1
+	github.com/peterbourgon/ff/v3 v3.1.2
+	github.com/smallstep/truststore v0.11.0
 	github.com/vektah/gqlparser/v2 v2.2.0
+	go.uber.org/zap v1.21.0
 )
 
 require (
 	github.com/agnivade/levenshtein v1.1.0 // indirect
 	github.com/cespare/xxhash v1.1.0 // indirect
 	github.com/cespare/xxhash/v2 v2.1.1 // indirect
+	github.com/chromedp/cdproto v0.0.0-20220217222649-d8c14a5c6edf // indirect
+	github.com/chromedp/sysutil v1.0.0 // indirect
 	github.com/cpuguy83/go-md2man/v2 v2.0.0-20190314233015-f79a8a8ca69d // indirect
 	github.com/dgraph-io/ristretto v0.1.0 // indirect
 	github.com/dustin/go-humanize v1.0.0 // indirect
+	github.com/gobwas/httphead v0.1.0 // indirect
+	github.com/gobwas/pool v0.2.1 // indirect
+	github.com/gobwas/ws v1.1.0 // indirect
 	github.com/gogo/protobuf v1.3.2 // indirect
 	github.com/golang/glog v0.0.0-20160126235308-23def4e6c14b // indirect
 	github.com/golang/groupcache v0.0.0-20190702054246-869f871628b6 // indirect
@@ -28,7 +37,9 @@ require (
 	github.com/google/flatbuffers v1.12.1 // indirect
 	github.com/gorilla/websocket v1.4.2 // indirect
 	github.com/hashicorp/golang-lru v0.5.1 // indirect
+	github.com/josharian/intern v1.0.0 // indirect
 	github.com/klauspost/compress v1.12.3 // indirect
+	github.com/mailru/easyjson v0.7.7 // indirect
 	github.com/mitchellh/mapstructure v1.1.2 // indirect
 	github.com/pkg/errors v0.9.1 // indirect
 	github.com/russross/blackfriday/v2 v2.0.1 // indirect
@@ -36,10 +47,13 @@ require (
 	github.com/urfave/cli/v2 v2.1.1 // indirect
 	github.com/vektah/dataloaden v0.2.1-0.20190515034641-a19b9a6e7c9e // indirect
 	go.opencensus.io v0.22.5 // indirect
-	golang.org/x/mod v0.3.0 // indirect
-	golang.org/x/net v0.0.0-20201021035429-f5854403a974 // indirect
-	golang.org/x/sys v0.0.0-20210124154548-22da62e12c0c // indirect
-	golang.org/x/tools v0.0.0-20210106214847-113979e3529a // indirect
+	go.uber.org/atomic v1.7.0 // indirect
+	go.uber.org/multierr v1.6.0 // indirect
+	golang.org/x/mod v0.4.2 // indirect
+	golang.org/x/net v0.0.0-20210405180319-a5a99cb37ef4 // indirect
+	golang.org/x/sys v0.0.0-20220209214540-3681064d5158 // indirect
+	golang.org/x/tools v0.1.5 // indirect
 	golang.org/x/xerrors v0.0.0-20200804184101-5ec99f83aff1 // indirect
-	gopkg.in/yaml.v2 v2.2.4 // indirect
+	gopkg.in/yaml.v2 v2.2.8 // indirect
+	howett.net/plist v0.0.0-20181124034731-591f970eefbb // indirect
 )