Fix input fields for key-value pair tables losing focus

.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

Makefile

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

README.md

@@ -19,7 +19,7 @@ features tailored to the needs of the infosec and bug bounty community.
 ## Features
 
 - Man-in-the-middle (MITM) HTTP/1.1 proxy with logs
-- Project based database storage (SQLite)
+- Project based database storage (BadgerDB)
 - Scope support
 - Headless management API using GraphQL
 - Embedded web interface (Next.js)

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 React, { useState } from "react";
-import HomeIcon from "@mui/icons-material/Home";
+
-import SettingsEthernetIcon from "@mui/icons-material/SettingsEthernet";
+import { useActiveProject } from "lib/ActiveProjectContext";
-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";
 
 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 }}>
+      <Box component="main" sx={{ flexGrow: 1, mx: 3, mt: 11 }}>
-        <DrawerHeader />
         {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`
+import {
-  query Projects {
+  ProjectsQuery,
-    projects {
+  useCloseProjectMutation,
-      id
+  useDeleteProjectMutation,
-      name
+  useProjectsQuery,
-      isActive
+} from "lib/graphql/generated";
-    }
-  }
-`;
-
-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
-    }
-  }
-`;
 
 function ProjectList(): JSX.Element {
   const theme = useTheme();
-  const { loading: projLoading, error: projErr, data: projData } = useQuery<{ projects: Project[] }>(PROJECTS);
+  const projResult = useProjectsQuery({ fetchPolicy: "network-only" });
-  const [openProject, { error: openProjErr, loading: openProjLoading }] = useMutation<{ openProject: Project }>(
+  const [openProject, openProjResult] = useOpenProjectMutation();
-    OPEN_PROJECT,
+  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;
-            },
-            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: () => {},
+    onCompleted() {
+      closeProjResult.client.resetStore();
+    },
     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 />}
+        {projResult.loading && <CircularProgress />}
-        {projErr && <Alert severity="error">Error fetching projects: {projErr.message}</Alert>}
+        {projResult.error && <Alert severity="error">Error fetching projects: {projResult.error.message}</Alert>}
-        {openProjErr && <Alert severity="error">Error opening project: {openProjErr.message}</Alert>}
+        {openProjResult.error && <Alert severity="error">Error opening project: {openProjResult.error.message}</Alert>}
-        {closeProjErr && <Alert severity="error">Error closing project: {closeProjErr.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,90 @@
+import { Alert, Box, Link, MenuItem, Snackbar } 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";
+
+export function RequestLogs(): JSX.Element {
+  const router = useRouter();
+  const id = router.query.id as string | undefined;
+  const { data } = useHttpRequestLogsQuery({
+    pollInterval: 1000,
+  });
+
+  const [createSenderReqFromLog] = useCreateSenderRequestFromHttpRequestLogMutation({});
+
+  const [copyToSenderId, setCopyToSenderId] = useState("");
+  const [Menu, handleContextMenu, handleContextMenuClose] = useContextMenu();
+
+  const handleCopyToSenderClick = () => {
+    createSenderReqFromLog({
+      variables: {
+        id: copyToSenderId,
+      },
+      onCompleted({ createSenderRequestFromHttpRequestLog }) {
+        const { id } = createSenderRequestFromHttpRequestLog;
+        setNewSenderReqId(id);
+        setCopiedReqNotifOpen(true);
+      },
+    });
+    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);
+  };
+
+  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}
+                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`
+import { ConfirmationDialog, useConfirmationDialog } from "lib/components/ConfirmationDialog";
-  query HttpRequestLogFilter {
+import {
-    httpRequestLogFilter {
+  HttpRequestLogFilterDocument,
-      onlyInScope
+  HttpRequestLogsDocument,
-      searchExpression
+  useClearHttpRequestLogMutation,
-    }
+  useHttpRequestLogFilterQuery,
-  }
+  useSetHttpRequestLogFilterMutation,
-`;
+} from "lib/graphql/generated";
-
+import { withoutTypename } from "lib/graphql/omitTypename";
-const SET_FILTER = gql`
-  mutation SetHttpRequestLogFilter($filter: HttpRequestLogFilterInput) {
-    setHttpRequestLogFilter(filter: $filter) {
-      onlyInScope
-      searchExpression
-    }
-  }
-`;
-
-export interface SearchFilter {
-  onlyInScope: boolean;
-  searchExpression: string;
-}
 
 function Search(): JSX.Element {
   const theme = useTheme();
 
   const [searchExpr, setSearchExpr] = useState("");
-  const {
+  const filterResult = useHttpRequestLogFilterQuery({
-    loading: filterLoading,
-    error: filterErr,
-    data: filter,
-  } = useQuery(FILTER, {
     onCompleted: (data) => {
       setSearchExpr(data.httpRequestLogFilter?.searchExpression || "");
     },
   });
+  const filter = filterResult.data?.httpRequestLogFilter;
 
-  const [setFilterMutate, { error: setFilterErr, loading: setFilterLoading }] = useMutation<{
+  const [setFilterMutate, setFilterResult] = useSetHttpRequestLogFilterMutation({
-    setHttpRequestLogFilter: SearchFilter | null;
-  }>(SET_FILTER, {
     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 fetching filter" error={filterResult.error} />
-      <Error prefix="Error setting filter" error={setFilterErr} />
+      <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}
+                      checked={filter?.onlyInScope ? true : false}
-                      disabled={filterLoading || setFilterLoading}
+                      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 React, { useState } from "react";
-import { Alert } from "@mui/lab";
-import React from "react";
-import { SCOPE } from "./Rules";
-import { ScopeRule } from "../../lib/scope";
 
-const SET_SCOPE = gql`
+import { ScopeDocument, ScopeQuery, ScopeRule, useSetScopeMutation } from "lib/graphql/generated";
-  mutation SetScope($scope: [ScopeRuleInput!]!) {
-    setScope(scope: $scope) {
-      url
-    }
-  }
-`;
 
 function AddRule(): JSX.Element {
-  const [ruleType, setRuleType] = React.useState("url");
+  const [ruleType, setRuleType] = useState("url");
-  const [expression, setExpression] = React.useState("");
+  const [expression, setExpression] = useState("");
 
   const client = useApolloClient();
-  const [setScope, { error, loading }] = useMutation(SET_SCOPE, {
+  const [setScope, { error, loading }] = useSetScopeMutation({
-    onError() {},
+    onCompleted({ setScope }) {
-    onCompleted() {
-      setExpression("");
-    },
-    update(_, { data: { 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[] }>({
+      const data = client.readQuery<ScopeQuery>({
-        query: SCOPE,
+        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`
+import { ScopeDocument, ScopeQuery, useSetScopeMutation } from "lib/graphql/generated";
-  mutation SetScope($scope: [ScopeRuleInput!]!) {
+
-    setScope(scope: $scope) {
+type ScopeRule = ScopeQuery["scope"][number];
-      url
-    }
-  }
-`;
 
 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, {
+  const [setScope, { loading }] = useSetScopeMutation({
-    update(_, { data: { setScope } }) {
+    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`
+import RuleListItem from "./RuleListItem";
-  query Scope {
+
-    scope {
+import { useScopeQuery } from "lib/graphql/generated";
-      url
-    }
-  }
-`;
 
 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,355 @@
+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 {
+  Http1 = "HTTP/1.1",
+  Http2 = "HTTP/2.0",
+}
+
+const httpProtoMap = new Map([
+  [HttpProto.Http1, HttpProtocol.Http1],
+  [HttpProto.Http2, HttpProtocol.Http2],
+]);
+
+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.Http2);
+  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: "" }]);
+      console.log(senderRequest.response);
+      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 MonacoEditor, { EditorProps } from "@monaco-editor/react";
-import monaco from "monaco-editor/esm/vs/editor/editor.api";
 
-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,19 @@ 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 {
+  console.log(content);
   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,125 @@
+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;
+  onRowClick?: (id: string) => void;
+  onContextMenu?: (e: React.MouseEvent, id: string) => void;
+}
+
+export default function RequestsTable(props: Props): JSX.Element {
+  const { requests, activeRowId, 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>
+          </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>
+              </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,36 @@
+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.Http1:
+      return "HTTP/1.1";
+    case HttpProtocol.Http2:
+      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,984 @@
+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 {
+  Http1 = 'HTTP1',
+  Http2 = 'HTTP2'
+}
+
+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,13 +47,28 @@ theme = createTheme(theme, {
     },
   },
   components: {
-    MuiTableCell: {
+    MuiTableRow: {
       styleOverrides: {
-        stickyHeader: {
+        root: {
-          backgroundColor: theme.palette.secondary.dark,
+          "&.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),
+          },
+        },
+      ],
+    },
   },
 });
 

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 { ActiveProjectProvider } from "lib/ActiveProjectContext";
-import theme from "../lib/theme";
+import { useApollo } from "lib/graphql/useApollo";
-import { useApollo } from "../lib/graphql";
+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}>
-        <ThemeProvider theme={theme}>
+        <ActiveProjectProvider>
-          <CssBaseline />
+          <ThemeProvider theme={theme}>
-          <Component {...pageProps} />
+            <CssBaseline />
-        </ThemeProvider>
+            <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 createEmotionCache from "lib/mui/createEmotionCache";
-import theme from "../lib/theme";
+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 { Layout, Page } from "features/Layout";
-import ProjectList from "../../components/projects/ProjectList";
+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 { Layout, Page } from "features/Layout";
-
+import RequestLogs from "features/reqlog";
-import LogsOverview from "../../../components/reqlog/LogsOverview";
-import Layout, { Page } from "../../../components/Layout";
-import Search from "../../../components/reqlog/Search";
 
 function ProxyLogs(): JSX.Element {
   return (
     <Layout page={Page.ProxyLogs} title="Proxy logs">
-      <Box mb={2}>
+      <RequestLogs />
-        <Search />
-      </Box>
-      <LogsOverview />
     </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 { Layout, Page } from "features/Layout";
-import AddRule from "../../components/scope/AddRule";
+import AddRule from "features/scope/components/AddRule";
-import Rules from "../../components/scope/Rules";
+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 "features/Layout";
-
+import Sender from "features/sender";
-import Layout, { Page } from "../../components/Layout";
 
 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": [
+    "lib": ["dom", "dom.iterable", "esnext"],
-      "dom",
+    "baseUrl": "src",
-      "dom.iterable",
+    "paths": {
-      "esnext"
+      "src/*": ["./src/*"]
-    ],
+    },
+    "downlevelIteration": true,
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -19,12 +20,6 @@
     "jsx": "preserve",
     "incremental": true
   },
-  "include": [
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-    "next-env.d.ts",
+  "exclude": ["node_modules"]
-    "**/*.ts",
-    "**/*.tsx"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
 }

cmd/hetty/main.go

@@ -25,6 +25,7 @@ import (
 	"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"
@@ -94,9 +95,15 @@ func run() error {
 		Repository: badger,
 	})
 
+	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 {
@@ -128,8 +135,9 @@ func run() error {
 	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,
+			RequestLogService: reqLogService,
+			SenderService:     senderService,
 		}})))
 
 	// Admin interface.

gqlgen.yml

@@ -46,6 +46,9 @@ models:
   ID:
     model:
       - github.com/dstotijn/hetty/pkg/api.ULID
+  URL:
+    model:
+      - github.com/dstotijn/hetty/pkg/api.URL
 #   Int:
 #     model:
 #       - github.com/99designs/gqlgen/graphql.Int

pkg/api/models.go

@@ -3,29 +3,49 @@ package api
 import (
 	"fmt"
 	"io"
+	"net/url"
 	"strconv"
 
+	"github.com/99designs/gqlgen/graphql"
 	"github.com/oklog/ulid"
 )
 
-type ULID ulid.ULID
+func MarshalULID(u ulid.ULID) graphql.Marshaler {
+	return graphql.WriterFunc(func(w io.Writer) {
+		fmt.Fprint(w, strconv.Quote(u.String()))
+	})
+}
 
-func (u *ULID) UnmarshalGQL(v interface{}) (err error) {
+func UnmarshalULID(v interface{}) (ulid.ULID, error) {
-	str, ok := v.(string)
+	rawULID, ok := v.(string)
 	if !ok {
-		return fmt.Errorf("ulid must be a string")
+		return ulid.ULID{}, fmt.Errorf("ulid must be a string")
 	}
 
-	id, err := ulid.Parse(str)
+	u, err := ulid.Parse(rawULID)
 	if err != nil {
-		return fmt.Errorf("failed to parse ULID: %w", err)
+		return ulid.ULID{}, fmt.Errorf("failed to parse ULID: %w", err)
 	}
 
-	*u = ULID(id)
+	return u, nil
-
-	return nil
 }
 
-func (u ULID) MarshalGQL(w io.Writer) {
+func MarshalURL(u *url.URL) graphql.Marshaler {
-	fmt.Fprint(w, strconv.Quote(ulid.ULID(u).String()))
+	return graphql.WriterFunc(func(w io.Writer) {
+		fmt.Fprint(w, strconv.Quote(u.String()))
+	})
+}
+
+func UnmarshalURL(v interface{}) (*url.URL, error) {
+	rawURL, ok := v.(string)
+	if !ok {
+		return nil, fmt.Errorf("url must be a string")
+	}
+
+	u, err := url.Parse(rawURL)
+	if err != nil {
+		return nil, fmt.Errorf("failed to parse URL: %w", err)
+	}
+
+	return u, nil
 }

pkg/api/models_gen.go

@@ -5,8 +5,11 @@ package api
 import (
 	"fmt"
 	"io"
+	"net/url"
 	"strconv"
 	"time"
+
+	"github.com/oklog/ulid"
 )
 
 type ClearHTTPRequestLogResult struct {
@@ -21,13 +24,22 @@ type DeleteProjectResult struct {
 	Success bool `json:"success"`
 }
 
+type DeleteSenderRequestsResult struct {
+	Success bool `json:"success"`
+}
+
 type HTTPHeader struct {
 	Key   string `json:"key"`
 	Value string `json:"value"`
 }
 
+type HTTPHeaderInput struct {
+	Key   string `json:"key"`
+	Value string `json:"value"`
+}
+
 type HTTPRequestLog struct {
-	ID        ULID             `json:"id"`
+	ID        ulid.ULID        `json:"id"`
 	URL       string           `json:"url"`
 	Method    HTTPMethod       `json:"method"`
 	Proto     string           `json:"proto"`
@@ -48,7 +60,9 @@ type HTTPRequestLogFilterInput struct {
 }
 
 type HTTPResponseLog struct {
-	Proto        string       `json:"proto"`
+	// Will be the same ID as its related request ID.
+	ID           ulid.ULID    `json:"id"`
+	Proto        HTTPProtocol `json:"proto"`
 	StatusCode   int          `json:"statusCode"`
 	StatusReason string       `json:"statusReason"`
 	Body         *string      `json:"body"`
@@ -56,9 +70,9 @@ type HTTPResponseLog struct {
 }
 
 type Project struct {
-	ID       ULID   `json:"id"`
+	ID       ulid.ULID `json:"id"`
-	Name     string `json:"name"`
+	Name     string    `json:"name"`
-	IsActive bool   `json:"isActive"`
+	IsActive bool      `json:"isActive"`
 }
 
 type ScopeHeader struct {
@@ -83,6 +97,37 @@ type ScopeRuleInput struct {
 	Body   *string           `json:"body"`
 }
 
+type SenderRequest struct {
+	ID                 ulid.ULID        `json:"id"`
+	SourceRequestLogID *ulid.ULID       `json:"sourceRequestLogID"`
+	URL                *url.URL         `json:"url"`
+	Method             HTTPMethod       `json:"method"`
+	Proto              HTTPProtocol     `json:"proto"`
+	Headers            []HTTPHeader     `json:"headers"`
+	Body               *string          `json:"body"`
+	Timestamp          time.Time        `json:"timestamp"`
+	Response           *HTTPResponseLog `json:"response"`
+}
+
+type SenderRequestFilter struct {
+	OnlyInScope      bool    `json:"onlyInScope"`
+	SearchExpression *string `json:"searchExpression"`
+}
+
+type SenderRequestFilterInput struct {
+	OnlyInScope      *bool   `json:"onlyInScope"`
+	SearchExpression *string `json:"searchExpression"`
+}
+
+type SenderRequestInput struct {
+	ID      *ulid.ULID        `json:"id"`
+	URL     *url.URL          `json:"url"`
+	Method  *HTTPMethod       `json:"method"`
+	Proto   *HTTPProtocol     `json:"proto"`
+	Headers []HTTPHeaderInput `json:"headers"`
+	Body    *string           `json:"body"`
+}
+
 type HTTPMethod string
 
 const (
@@ -137,3 +182,44 @@ func (e *HTTPMethod) UnmarshalGQL(v interface{}) error {
 func (e HTTPMethod) MarshalGQL(w io.Writer) {
 	fmt.Fprint(w, strconv.Quote(e.String()))
 }
+
+type HTTPProtocol string
+
+const (
+	HTTPProtocolHTTP1 HTTPProtocol = "HTTP1"
+	HTTPProtocolHTTP2 HTTPProtocol = "HTTP2"
+)
+
+var AllHTTPProtocol = []HTTPProtocol{
+	HTTPProtocolHTTP1,
+	HTTPProtocolHTTP2,
+}
+
+func (e HTTPProtocol) IsValid() bool {
+	switch e {
+	case HTTPProtocolHTTP1, HTTPProtocolHTTP2:
+		return true
+	}
+	return false
+}
+
+func (e HTTPProtocol) String() string {
+	return string(e)
+}
+
+func (e *HTTPProtocol) UnmarshalGQL(v interface{}) error {
+	str, ok := v.(string)
+	if !ok {
+		return fmt.Errorf("enums must be strings")
+	}
+
+	*e = HTTPProtocol(str)
+	if !e.IsValid() {
+		return fmt.Errorf("%s is not a valid HttpProtocol", str)
+	}
+	return nil
+}
+
+func (e HTTPProtocol) MarshalGQL(w io.Writer) {
+	fmt.Fprint(w, strconv.Quote(e.String()))
+}

pkg/api/resolvers.go

@@ -6,6 +6,7 @@ import (
 	"context"
 	"errors"
 	"fmt"
+	"net/http"
 	"regexp"
 	"strings"
 
@@ -17,11 +18,23 @@ import (
 	"github.com/dstotijn/hetty/pkg/reqlog"
 	"github.com/dstotijn/hetty/pkg/scope"
 	"github.com/dstotijn/hetty/pkg/search"
+	"github.com/dstotijn/hetty/pkg/sender"
 )
 
+var httpProtocolMap = map[string]HTTPProtocol{
+	sender.HTTPProto1: HTTPProtocolHTTP1,
+	sender.HTTPProto2: HTTPProtocolHTTP2,
+}
+
+var revHTTPProtocolMap = map[HTTPProtocol]string{
+	HTTPProtocolHTTP1: sender.HTTPProto1,
+	HTTPProtocolHTTP2: sender.HTTPProto2,
+}
+
 type Resolver struct {
 	ProjectService    proj.Service
-	RequestLogService *reqlog.Service
+	RequestLogService reqlog.Service
+	SenderService     sender.Service
 }
 
 type (
@@ -54,8 +67,8 @@ func (r *queryResolver) HTTPRequestLogs(ctx context.Context) ([]HTTPRequestLog,
 	return logs, nil
 }
 
-func (r *queryResolver) HTTPRequestLog(ctx context.Context, id ULID) (*HTTPRequestLog, error) {
+func (r *queryResolver) HTTPRequestLog(ctx context.Context, id ulid.ULID) (*HTTPRequestLog, error) {
-	log, err := r.RequestLogService.FindRequestLogByID(ctx, ulid.ULID(id))
+	log, err := r.RequestLogService.FindRequestLogByID(ctx, id)
 	if errors.Is(err, reqlog.ErrRequestNotFound) {
 		return nil, nil
 	} else if err != nil {
@@ -77,7 +90,7 @@ func parseRequestLog(reqLog reqlog.RequestLog) (HTTPRequestLog, error) {
 	}
 
 	log := HTTPRequestLog{
-		ID:        ULID(reqLog.ID),
+		ID:        reqLog.ID,
 		Proto:     reqLog.Proto,
 		Method:    method,
 		Timestamp: ulid.Time(reqLog.ID.Time()),
@@ -106,36 +119,54 @@ func parseRequestLog(reqLog reqlog.RequestLog) (HTTPRequestLog, error) {
 	}
 
 	if reqLog.Response != nil {
-		log.Response = &HTTPResponseLog{
+		resLog, err := parseResponseLog(*reqLog.Response)
-			Proto:      reqLog.Response.Proto,
+		if err != nil {
-			StatusCode: reqLog.Response.StatusCode,
+			return HTTPRequestLog{}, err
-		}
-		statusReasonSubs := strings.SplitN(reqLog.Response.Status, " ", 2)
-
-		if len(statusReasonSubs) == 2 {
-			log.Response.StatusReason = statusReasonSubs[1]
 		}
 
-		if len(reqLog.Response.Body) > 0 {
+		resLog.ID = reqLog.ID
-			bodyStr := string(reqLog.Response.Body)
-			log.Response.Body = &bodyStr
-		}
 
-		if reqLog.Response.Header != nil {
+		log.Response = &resLog
-			log.Response.Headers = make([]HTTPHeader, 0)
+	}
 
-			for key, values := range reqLog.Response.Header {
+	return log, nil
-				for _, value := range values {
+}
-					log.Response.Headers = append(log.Response.Headers, HTTPHeader{
+
-						Key:   key,
+func parseResponseLog(resLog reqlog.ResponseLog) (HTTPResponseLog, error) {
-						Value: value,
+	proto := httpProtocolMap[resLog.Proto]
-					})
+	if !proto.IsValid() {
-				}
+		return HTTPResponseLog{}, fmt.Errorf("sender response has invalid protocol: %v", resLog.Proto)
+	}
+
+	httpResLog := HTTPResponseLog{
+		Proto:      proto,
+		StatusCode: resLog.StatusCode,
+	}
+	statusReasonSubs := strings.SplitN(resLog.Status, " ", 2)
+
+	if len(statusReasonSubs) == 2 {
+		httpResLog.StatusReason = statusReasonSubs[1]
+	}
+
+	if len(resLog.Body) > 0 {
+		bodyStr := string(resLog.Body)
+		httpResLog.Body = &bodyStr
+	}
+
+	if resLog.Header != nil {
+		httpResLog.Headers = make([]HTTPHeader, 0)
+
+		for key, values := range resLog.Header {
+			for _, value := range values {
+				httpResLog.Headers = append(httpResLog.Headers, HTTPHeader{
+					Key:   key,
+					Value: value,
+				})
 			}
 		}
 	}
 
-	return log, nil
+	return httpResLog, nil
 }
 
 func (r *mutationResolver) CreateProject(ctx context.Context, name string) (*Project, error) {
@@ -147,14 +178,14 @@ func (r *mutationResolver) CreateProject(ctx context.Context, name string) (*Pro
 	}
 
 	return &Project{
-		ID:       ULID(p.ID),
+		ID:       p.ID,
 		Name:     p.Name,
 		IsActive: r.ProjectService.IsProjectActive(p.ID),
 	}, nil
 }
 
-func (r *mutationResolver) OpenProject(ctx context.Context, id ULID) (*Project, error) {
+func (r *mutationResolver) OpenProject(ctx context.Context, id ulid.ULID) (*Project, error) {
-	p, err := r.ProjectService.OpenProject(ctx, ulid.ULID(id))
+	p, err := r.ProjectService.OpenProject(ctx, id)
 	if errors.Is(err, proj.ErrInvalidName) {
 		return nil, gqlerror.Errorf("Project name must only contain alphanumeric or space chars.")
 	} else if err != nil {
@@ -162,7 +193,7 @@ func (r *mutationResolver) OpenProject(ctx context.Context, id ULID) (*Project,
 	}
 
 	return &Project{
-		ID:       ULID(p.ID),
+		ID:       p.ID,
 		Name:     p.Name,
 		IsActive: r.ProjectService.IsProjectActive(p.ID),
 	}, nil
@@ -177,7 +208,7 @@ func (r *queryResolver) ActiveProject(ctx context.Context) (*Project, error) {
 	}
 
 	return &Project{
-		ID:       ULID(p.ID),
+		ID:       p.ID,
 		Name:     p.Name,
 		IsActive: r.ProjectService.IsProjectActive(p.ID),
 	}, nil
@@ -192,7 +223,7 @@ func (r *queryResolver) Projects(ctx context.Context) ([]Project, error) {
 	projects := make([]Project, len(p))
 	for i, proj := range p {
 		projects[i] = Project{
-			ID:       ULID(proj.ID),
+			ID:       proj.ID,
 			Name:     proj.Name,
 			IsActive: r.ProjectService.IsProjectActive(proj.ID),
 		}
@@ -224,8 +255,8 @@ func (r *mutationResolver) CloseProject(ctx context.Context) (*CloseProjectResul
 	return &CloseProjectResult{true}, nil
 }
 
-func (r *mutationResolver) DeleteProject(ctx context.Context, id ULID) (*DeleteProjectResult, error) {
+func (r *mutationResolver) DeleteProject(ctx context.Context, id ulid.ULID) (*DeleteProjectResult, error) {
-	if err := r.ProjectService.DeleteProject(ctx, ulid.ULID(id)); err != nil {
+	if err := r.ProjectService.DeleteProject(ctx, id); err != nil {
 		return nil, fmt.Errorf("could not delete project: %w", err)
 	}
 
@@ -296,7 +327,7 @@ func (r *mutationResolver) SetScope(ctx context.Context, input []ScopeRuleInput)
 }
 
 func (r *queryResolver) HTTPRequestLogFilter(ctx context.Context) (*HTTPRequestLogFilter, error) {
-	return findReqFilterToHTTPReqLogFilter(r.RequestLogService.FindReqsFilter), nil
+	return findReqFilterToHTTPReqLogFilter(r.RequestLogService.FindReqsFilter()), nil
 }
 
 func (r *mutationResolver) SetHTTPRequestLogFilter(
@@ -318,6 +349,221 @@ func (r *mutationResolver) SetHTTPRequestLogFilter(
 	return findReqFilterToHTTPReqLogFilter(filter), nil
 }
 
+func (r *queryResolver) SenderRequest(ctx context.Context, id ulid.ULID) (*SenderRequest, error) {
+	senderReq, err := r.SenderService.FindRequestByID(ctx, id)
+	if errors.Is(err, sender.ErrRequestNotFound) {
+		return nil, nil
+	} else if err != nil {
+		return nil, fmt.Errorf("could not get request by ID: %w", err)
+	}
+
+	req, err := parseSenderRequest(senderReq)
+	if err != nil {
+		return nil, err
+	}
+
+	return &req, nil
+}
+
+func (r *queryResolver) SenderRequests(ctx context.Context) ([]SenderRequest, error) {
+	reqs, err := r.SenderService.FindRequests(ctx)
+	if errors.Is(err, proj.ErrNoProject) {
+		return nil, noActiveProjectErr(ctx)
+	} else if err != nil {
+		return nil, fmt.Errorf("failed to find sender requests: %w", err)
+	}
+
+	senderReqs := make([]SenderRequest, len(reqs))
+
+	for i, req := range reqs {
+		req, err := parseSenderRequest(req)
+		if err != nil {
+			return nil, err
+		}
+
+		senderReqs[i] = req
+	}
+
+	return senderReqs, nil
+}
+
+func (r *mutationResolver) SetSenderRequestFilter(
+	ctx context.Context,
+	input *SenderRequestFilterInput,
+) (*SenderRequestFilter, error) {
+	filter, err := findSenderRequestsFilterFromInput(input)
+	if err != nil {
+		return nil, fmt.Errorf("could not parse request log filter: %w", err)
+	}
+
+	err = r.ProjectService.SetSenderRequestFindFilter(ctx, filter)
+	if errors.Is(err, proj.ErrNoProject) {
+		return nil, noActiveProjectErr(ctx)
+	} else if err != nil {
+		return nil, fmt.Errorf("could not set request log filter: %w", err)
+	}
+
+	return findReqFilterToSenderReqFilter(filter), nil
+}
+
+func (r *mutationResolver) CreateOrUpdateSenderRequest(ctx context.Context, input SenderRequestInput) (*SenderRequest, error) {
+	req := sender.Request{
+		URL:    input.URL,
+		Header: make(http.Header),
+	}
+
+	if input.ID != nil {
+		req.ID = *input.ID
+	}
+
+	if input.Method != nil {
+		req.Method = input.Method.String()
+	}
+
+	if input.Proto != nil {
+		req.Proto = revHTTPProtocolMap[*input.Proto]
+	}
+
+	for _, header := range input.Headers {
+		req.Header.Add(header.Key, header.Value)
+	}
+
+	if input.Body != nil {
+		req.Body = []byte(*input.Body)
+	}
+
+	req, err := r.SenderService.CreateOrUpdateRequest(ctx, req)
+	if errors.Is(err, proj.ErrNoProject) {
+		return nil, noActiveProjectErr(ctx)
+	} else if err != nil {
+		return nil, fmt.Errorf("could not create sender request: %w", err)
+	}
+
+	senderReq, err := parseSenderRequest(req)
+	if err != nil {
+		return nil, err
+	}
+
+	return &senderReq, nil
+}
+
+func (r *mutationResolver) CreateSenderRequestFromHTTPRequestLog(ctx context.Context, id ulid.ULID) (*SenderRequest, error) {
+	req, err := r.SenderService.CloneFromRequestLog(ctx, id)
+	if errors.Is(err, proj.ErrNoProject) {
+		return nil, noActiveProjectErr(ctx)
+	} else if err != nil {
+		return nil, fmt.Errorf("could not create sender request from http request log: %w", err)
+	}
+
+	senderReq, err := parseSenderRequest(req)
+	if err != nil {
+		return nil, err
+	}
+
+	return &senderReq, nil
+}
+
+func (r *mutationResolver) SendRequest(ctx context.Context, id ulid.ULID) (*SenderRequest, error) {
+	// Use new context, because we don't want to risk interrupting sending the request
+	// or the subsequent storing of the response, e.g. if ctx gets cancelled or
+	// times out.
+	ctx2 := context.Background()
+
+	var sendErr *sender.SendError
+
+	req, err := r.SenderService.SendRequest(ctx2, id)
+	if errors.Is(err, proj.ErrNoProject) {
+		return nil, noActiveProjectErr(ctx)
+	} else if errors.As(err, &sendErr) {
+		return nil, &gqlerror.Error{
+			Path:    graphql.GetPath(ctx),
+			Message: fmt.Sprintf("Sending request failed: %v", sendErr.Unwrap()),
+			Extensions: map[string]interface{}{
+				"code": "send_request_failed",
+			},
+		}
+	} else if err != nil {
+		return nil, fmt.Errorf("could not send request: %w", err)
+	}
+
+	senderReq, err := parseSenderRequest(req)
+	if err != nil {
+		return nil, err
+	}
+
+	return &senderReq, nil
+}
+
+func (r *mutationResolver) DeleteSenderRequests(ctx context.Context) (*DeleteSenderRequestsResult, error) {
+	project, err := r.ProjectService.ActiveProject(ctx)
+	if errors.Is(err, proj.ErrNoProject) {
+		return nil, noActiveProjectErr(ctx)
+	} else if err != nil {
+		return nil, fmt.Errorf("could not get active project: %w", err)
+	}
+
+	if err := r.SenderService.DeleteRequests(ctx, project.ID); err != nil {
+		return nil, fmt.Errorf("could not clear request log: %w", err)
+	}
+
+	return &DeleteSenderRequestsResult{true}, nil
+}
+
+func parseSenderRequest(req sender.Request) (SenderRequest, error) {
+	method := HTTPMethod(req.Method)
+	if method != "" && !method.IsValid() {
+		return SenderRequest{}, fmt.Errorf("sender request has invalid method: %v", method)
+	}
+
+	reqProto := httpProtocolMap[req.Proto]
+	if !reqProto.IsValid() {
+		return SenderRequest{}, fmt.Errorf("sender request has invalid protocol: %v", req.Proto)
+	}
+
+	senderReq := SenderRequest{
+		ID:        req.ID,
+		URL:       req.URL,
+		Method:    method,
+		Proto:     HTTPProtocol(req.Proto),
+		Timestamp: ulid.Time(req.ID.Time()),
+	}
+
+	if req.SourceRequestLogID.Compare(ulid.ULID{}) != 0 {
+		senderReq.SourceRequestLogID = &req.SourceRequestLogID
+	}
+
+	if req.Header != nil {
+		senderReq.Headers = make([]HTTPHeader, 0)
+
+		for key, values := range req.Header {
+			for _, value := range values {
+				senderReq.Headers = append(senderReq.Headers, HTTPHeader{
+					Key:   key,
+					Value: value,
+				})
+			}
+		}
+	}
+
+	if len(req.Body) > 0 {
+		bodyStr := string(req.Body)
+		senderReq.Body = &bodyStr
+	}
+
+	if req.Response != nil {
+		resLog, err := parseResponseLog(*req.Response)
+		if err != nil {
+			return SenderRequest{}, err
+		}
+
+		resLog.ID = req.ID
+
+		senderReq.Response = &resLog
+	}
+
+	return senderReq, nil
+}
+
 func stringPtrToRegexp(s *string) (*regexp.Regexp, error) {
 	if s == nil {
 		return nil, nil
@@ -364,6 +610,27 @@ func findRequestsFilterFromInput(input *HTTPRequestLogFilterInput) (filter reqlo
 	return
 }
 
+func findSenderRequestsFilterFromInput(input *SenderRequestFilterInput) (filter sender.FindRequestsFilter, err error) {
+	if input == nil {
+		return
+	}
+
+	if input.OnlyInScope != nil {
+		filter.OnlyInScope = *input.OnlyInScope
+	}
+
+	if input.SearchExpression != nil && *input.SearchExpression != "" {
+		expr, err := search.ParseQuery(*input.SearchExpression)
+		if err != nil {
+			return sender.FindRequestsFilter{}, fmt.Errorf("could not parse search query: %w", err)
+		}
+
+		filter.SearchExpr = expr
+	}
+
+	return
+}
+
 func findReqFilterToHTTPReqLogFilter(findReqFilter reqlog.FindRequestsFilter) *HTTPRequestLogFilter {
 	empty := reqlog.FindRequestsFilter{}
 	if findReqFilter == empty {
@@ -382,6 +649,24 @@ func findReqFilterToHTTPReqLogFilter(findReqFilter reqlog.FindRequestsFilter) *H
 	return httpReqLogFilter
 }
 
+func findReqFilterToSenderReqFilter(findReqFilter sender.FindRequestsFilter) *SenderRequestFilter {
+	empty := sender.FindRequestsFilter{}
+	if findReqFilter == empty {
+		return nil
+	}
+
+	senderReqFilter := &SenderRequestFilter{
+		OnlyInScope: findReqFilter.OnlyInScope,
+	}
+
+	if findReqFilter.SearchExpr != nil {
+		searchExpr := findReqFilter.SearchExpr.String()
+		senderReqFilter.SearchExpression = &searchExpr
+	}
+
+	return senderReqFilter
+}
+
 func noActiveProjectErr(ctx context.Context) error {
 	return &gqlerror.Error{
 		Path:    graphql.GetPath(ctx),

pkg/api/schema.graphql

@@ -10,7 +10,11 @@ type HttpRequestLog {
 }
 
 type HttpResponseLog {
-  proto: String!
+  """
+  Will be the same ID as its related request ID.
+  """
+  id: ID!
+  proto: HttpProtocol!
   statusCode: Int!
   statusReason: String!
   body: String
@@ -62,6 +66,10 @@ type ClearHTTPRequestLogResult {
   success: Boolean!
 }
 
+type DeleteSenderRequestsResult {
+  success: Boolean!
+}
+
 input HttpRequestLogFilterInput {
   onlyInScope: Boolean
   searchExpression: String
@@ -72,6 +80,42 @@ type HttpRequestLogFilter {
   searchExpression: String
 }
 
+input SenderRequestInput {
+  id: ID
+  url: URL!
+  method: HttpMethod
+  proto: HttpProtocol
+  headers: [HttpHeaderInput!]
+  body: String
+}
+
+input HttpHeaderInput {
+  key: String!
+  value: String!
+}
+
+type SenderRequest {
+  id: ID!
+  sourceRequestLogID: ID
+  url: URL!
+  method: HttpMethod!
+  proto: HttpProtocol!
+  headers: [HttpHeader!]
+  body: String
+  timestamp: Time!
+  response: HttpResponseLog
+}
+
+input SenderRequestFilterInput {
+  onlyInScope: Boolean
+  searchExpression: String
+}
+
+type SenderRequestFilter {
+  onlyInScope: Boolean!
+  searchExpression: String
+}
+
 type Query {
   httpRequestLog(id: ID!): HttpRequestLog
   httpRequestLogs: [HttpRequestLog!]!
@@ -79,6 +123,8 @@ type Query {
   activeProject: Project
   projects: [Project!]!
   scope: [ScopeRule!]!
+  senderRequest(id: ID!): SenderRequest
+  senderRequests: [SenderRequest!]!
 }
 
 type Mutation {
@@ -91,6 +137,11 @@ type Mutation {
   setHttpRequestLogFilter(
     filter: HttpRequestLogFilterInput
   ): HttpRequestLogFilter
+  setSenderRequestFilter(filter: SenderRequestFilterInput): SenderRequestFilter
+  createOrUpdateSenderRequest(request: SenderRequestInput!): SenderRequest!
+  createSenderRequestFromHttpRequestLog(id: ID!): SenderRequest!
+  sendRequest(id: ID!): SenderRequest!
+  deleteSenderRequests: DeleteSenderRequestsResult!
 }
 
 enum HttpMethod {
@@ -105,5 +156,11 @@ enum HttpMethod {
   PATCH
 }
 
+enum HttpProtocol {
+  HTTP1
+  HTTP2
+}
+
 scalar Time
 scalar Regexp
+scalar URL