From 8382e6099859be1a70c2a1576ca531a360cfe080 Mon Sep 17 00:00:00 2001
From: Tim Perry <pimterry@gmail.com>
Date: Fri, 21 Jul 2023 14:41:29 +0200
Subject: [PATCH] Add very basic Send UI (feature flagged) for initial testing

Can send requests, accepts all the core inputs we'll need and persists
them, has the top-level UI structure & data model sort-of in place.

Does not show responses (they're just logged to the console), does not
do lots of very necessary UX details, and doesn't have any kind of UI
polish at all. But exciting!
---
 src/components/app.tsx                |  32 ++++-
 src/components/send/request-pane.tsx  | 173 ++++++++++++++++++++++++++
 src/components/send/response-pane.tsx |  18 +++
 src/components/send/send-page.tsx     |  33 +++++
 src/icons.ts                          |   2 +
 src/index.tsx                         |   8 +-
 src/model/rules/rules-store.ts        |  11 +-
 src/model/send/send-data-model.ts     |  96 ++++++++++++++
 src/model/send/send-store.ts          |  27 ++++
 src/services/server-api.ts            |  17 ++-
 src/services/server-rest-api.ts       | 134 ++++++++++++++++++--
 src/services/service-versions.ts      |   3 +-
 src/util/streams.ts                   |  64 ++++++++++
 13 files changed, 597 insertions(+), 21 deletions(-)
 create mode 100644 src/components/send/request-pane.tsx
 create mode 100644 src/components/send/response-pane.tsx
 create mode 100644 src/components/send/send-page.tsx
 create mode 100644 src/model/send/send-data-model.ts
 create mode 100644 src/model/send/send-store.ts
 create mode 100644 src/util/streams.ts

diff --git a/src/components/app.tsx b/src/components/app.tsx
index ef264c44..185b0af1 100644
--- a/src/components/app.tsx
+++ b/src/components/app.tsx
@@ -16,13 +16,20 @@ import { appHistory } from '../routing';
 import { useHotkeys, Ctrl } from '../util/ui';
 
 import { AccountStore } from '../model/account/account-store';
-import { serverVersion, versionSatisfies, MOCK_SERVER_RANGE } from '../services/service-versions';
+import {
+    serverVersion,
+    versionSatisfies,
+    MOCK_SERVER_RANGE,
+    SERVER_SEND_API_SUPPORTED
+} from '../services/service-versions';
 
 import { Sidebar, SidebarItem, SIDEBAR_WIDTH } from './sidebar';
 import { InterceptPage } from './intercept/intercept-page';
 import { ViewPage } from './view/view-page';
 import { MockPage } from './mock/mock-page';
+import { SendPage } from './send/send-page';
 import { SettingsPage } from './settings/settings-page';
+
 import { PlanPicker } from './account/plan-picker';
 import { ModalOverlay } from './account/modal-overlay';
 import { CheckoutSpinner } from './account/checkout-spinner';
@@ -83,6 +90,16 @@ class App extends React.Component<{ accountStore: AccountStore }> {
         return this.props.accountStore.isPaidUser || this.props.accountStore.isPastDueUser;
     }
 
+    @computed
+    get canVisitSend() {
+        return this.props.accountStore.featureFlags.includes('send') && (
+            // Hide Send option if the server is too old for proper support.
+            // We show by default to avoid flicker in the most common case
+            serverVersion.state !== 'fulfilled' ||
+            versionSatisfies(serverVersion.value as string, SERVER_SEND_API_SUPPORTED)
+        );
+    }
+
     @computed
     get menuItems() {
         return [
@@ -121,6 +138,18 @@ class App extends React.Component<{ accountStore: AccountStore }> {
                 : []
             ),
 
+            ...(this.canVisitSend
+                ? [{
+                    name: 'Send',
+                    title: `Send HTTP requests directly (${Ctrl}+4)`,
+                    icon: ['far', 'paper-plane'],
+                    position: 'top',
+                    type: 'router',
+                    url: '/send'
+                }]
+                : []
+            ),
+
             (this.canVisitSettings
                 ? {
                     name: 'Settings',
@@ -191,6 +220,7 @@ class App extends React.Component<{ accountStore: AccountStore }> {
                     <Route path={'/view/:eventId'} pageComponent={ViewPage} />
                     <Route path={'/mock'} pageComponent={MockPage} />
                     <Route path={'/mock/:initialRuleId'} pageComponent={MockPage} />
+                    <Route path={'/send'} pageComponent={SendPage} />
                     <Route path={'/settings'} pageComponent={SettingsPage} />
                 </Router>
             </AppContainer>
diff --git a/src/components/send/request-pane.tsx b/src/components/send/request-pane.tsx
new file mode 100644
index 00000000..c9bf3622
--- /dev/null
+++ b/src/components/send/request-pane.tsx
@@ -0,0 +1,173 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+import { action, computed } from 'mobx';
+import { inject, observer } from 'mobx-react';
+import {
+    MOCKTTP_PARAM_REF,
+    ProxySetting,
+    ProxySettingSource,
+    RuleParameterReference
+} from 'mockttp';
+
+import { RawHeaders } from '../../types';
+import { styled } from '../../styles';
+import { bufferToString, isProbablyUtf8, stringToBuffer } from '../../util';
+
+import { sendRequest } from '../../services/server-api';
+import { RulesStore } from '../../model/rules/rules-store';
+import { SendStore } from '../../model/send/send-store';
+import { ClientProxyConfig, RULE_PARAM_REF_KEY } from '../../model/send/send-data-model';
+
+import { EditableRawHeaders } from '../common/editable-headers';
+import { ThemedSelfSizedEditor } from '../editor/base-editor';
+import { Button, TextInput } from '../common/inputs';
+
+const RequestPaneContainer = styled.section`
+    display: flex;
+    flex-direction: column;
+`;
+
+const UrlInput = styled(TextInput)`
+`;
+
+export const getEffectivePort = (url: { protocol: string | null, port: string | null }) => {
+    if (url.port) {
+        return parseInt(url.port, 10);
+    } else if (url.protocol === 'https:' || url.protocol === 'wss:') {
+        return 443;
+    } else {
+        return 80;
+    }
+}
+
+@inject('rulesStore')
+@inject('sendStore')
+@observer
+export class RequestPane extends React.Component<{
+    rulesStore?: RulesStore,
+    sendStore?: SendStore
+}> {
+
+    @computed
+    get method() {
+        return this.props.sendStore!.requestInput.method;
+    }
+
+    @computed
+    get url() {
+        return this.props.sendStore!.requestInput.url;
+    }
+
+
+    @computed
+    get headers() {
+        return this.props.sendStore!.requestInput.headers;
+    }
+
+    @computed
+    get body() {
+        return this.props.sendStore!.requestInput.rawBody;
+    }
+
+    @computed
+    private get bodyTextEncoding() {
+        // If we're handling text data, we want to show & edit it as UTF8.
+        // If it's binary, that's a lossy operation, so we use binary (latin1) instead.
+        return isProbablyUtf8(this.body)
+            ? 'utf8'
+            : 'binary';
+    }
+
+    render() {
+        const bodyString = bufferToString(this.body, this.bodyTextEncoding);
+
+        return <RequestPaneContainer>
+            <UrlInput
+                placeholder='https://example.com/hello?name=world'
+                value={this.url}
+                onChange={this.updateUrl}
+            />
+            <EditableRawHeaders
+                headers={this.headers}
+                onChange={this.updateHeaders}
+            />
+            <ThemedSelfSizedEditor
+                contentId='request'
+                language={'text'}
+                value={bodyString}
+                onChange={this.updateBody}
+            />
+            <Button
+                onClick={this.sendRequest}
+            />
+        </RequestPaneContainer>;
+    }
+
+    @action.bound
+    updateUrl(changeEvent: React.ChangeEvent<HTMLInputElement>) {
+        const { requestInput } = this.props.sendStore!;
+        requestInput.url = changeEvent.target.value;
+    }
+
+    @action.bound
+    updateHeaders(headers: RawHeaders) {
+        const { requestInput } = this.props.sendStore!;
+        requestInput.headers = headers;
+    }
+
+    @action.bound
+    updateBody(input: string) {
+        const { requestInput } = this.props.sendStore!;
+        requestInput.rawBody = stringToBuffer(input, this.bodyTextEncoding);
+    }
+
+    @action.bound
+    async sendRequest() {
+        const rulesStore = this.props.rulesStore!;
+        const passthroughOptions = rulesStore.activePassthroughOptions;
+
+        const url = new URL(this.url);
+        const effectivePort = getEffectivePort(url);
+        const hostWithPort = `${url.hostname}:${effectivePort}`;
+        const clientCertificate = passthroughOptions.clientCertificateHostMap?.[hostWithPort] ||
+            passthroughOptions.clientCertificateHostMap?.[url.hostname!] ||
+            undefined;
+
+        const responseStream = await sendRequest({
+            url: this.url,
+            method: this.method,
+            headers: this.headers,
+            rawBody: this.body
+        }, {
+            ignoreHostHttpsErrors: passthroughOptions.ignoreHostHttpsErrors,
+            trustAdditionalCAs: rulesStore.additionalCaCertificates.map((cert) => ({ cert: cert.rawPEM })),
+            clientCertificate,
+            proxyConfig: getProxyConfig(rulesStore.proxyConfig),
+            lookupOptions: passthroughOptions.lookupOptions
+        });
+
+        const reader = responseStream.getReader();
+        while(true) {
+            const { done, value } = await reader.read();
+            if (done) return;
+            else console.log(value);
+        }
+    }
+
+}
+
+function getProxyConfig(proxyConfig: RulesStore['proxyConfig']): ClientProxyConfig {
+    if (!proxyConfig) return undefined;
+
+    if (_.isArray(proxyConfig)) {
+        return proxyConfig.map((config) => getProxyConfig(config)) as ClientProxyConfig;
+    }
+
+    if (MOCKTTP_PARAM_REF in proxyConfig) {
+        return {
+            [RULE_PARAM_REF_KEY]: (proxyConfig as RuleParameterReference<ProxySettingSource>)[MOCKTTP_PARAM_REF]
+        };
+    }
+
+    return proxyConfig as ProxySetting;
+}
\ No newline at end of file
diff --git a/src/components/send/response-pane.tsx b/src/components/send/response-pane.tsx
new file mode 100644
index 00000000..4b89af3c
--- /dev/null
+++ b/src/components/send/response-pane.tsx
@@ -0,0 +1,18 @@
+import * as React from "react";
+import { observer } from "mobx-react";
+
+import { styled } from '../../styles';
+
+const ResponsePaneContainer = styled.section`
+`;
+
+@observer
+export class ResponsePane extends React.Component<{}> {
+
+    render() {
+        return <ResponsePaneContainer>
+
+        </ResponsePaneContainer>;
+    }
+
+}
\ No newline at end of file
diff --git a/src/components/send/send-page.tsx b/src/components/send/send-page.tsx
new file mode 100644
index 00000000..84e944c4
--- /dev/null
+++ b/src/components/send/send-page.tsx
@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { observer } from 'mobx-react';
+
+import { styled } from '../../styles';
+
+import { SplitPane } from '../split-pane';
+import { RequestPane } from './request-pane';
+import { ResponsePane } from './response-pane';
+
+const SendPageContainer = styled.div`
+    height: 100vh;
+    position: relative;
+`;
+
+@observer
+export class SendPage extends React.Component<{}> {
+
+    render() {
+        return <SendPageContainer>
+            <SplitPane
+                split='vertical'
+                primary='second'
+                defaultSize='50%'
+                minSize={300}
+                maxSize={-300}
+            >
+                <RequestPane />
+                <ResponsePane />
+            </SplitPane>
+        </SendPageContainer>;
+    }
+
+}
\ No newline at end of file
diff --git a/src/icons.ts b/src/icons.ts
index 42c47d36..1750ce62 100644
--- a/src/icons.ts
+++ b/src/icons.ts
@@ -63,6 +63,7 @@ import { faAlignLeft } from '@fortawesome/free-solid-svg-icons/faAlignLeft';
 import { faClone } from '@fortawesome/free-regular-svg-icons/faClone';
 import { faCheck } from '@fortawesome/free-solid-svg-icons/faCheck';
 import { faLevelDownAlt } from '@fortawesome/free-solid-svg-icons/faLevelDownAlt';
+import { faPaperPlane } from '@fortawesome/free-regular-svg-icons/faPaperPlane';
 
 import { faChrome } from '@fortawesome/free-brands-svg-icons/faChrome';
 import { faFirefox } from '@fortawesome/free-brands-svg-icons/faFirefox';
@@ -139,6 +140,7 @@ library.add(
     faClone,
     faCheck,
     faLevelDownAlt,
+    faPaperPlane,
 
     faChrome,
     faFirefox,
diff --git a/src/index.tsx b/src/index.tsx
index 6d6d0479..a44133e8 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -32,12 +32,14 @@ import { EventsStore } from './model/events/events-store';
 import { RulesStore } from './model/rules/rules-store';
 import { InterceptorStore } from './model/interception/interceptor-store';
 import { ApiStore } from './model/api/api-store';
+import { SendStore } from './model/send/send-store';
+
 import { triggerServerUpdate } from './services/server-api';
+import { serverVersion, lastServerVersion, UI_VERSION } from './services/service-versions';
 
 import { App } from './components/app';
 import { StorePoweredThemeProvider } from './components/store-powered-theme-provider';
 import { ErrorBoundary } from './components/error-boundary';
-import { serverVersion, lastServerVersion, UI_VERSION } from './services/service-versions';
 
 console.log(`Initialising UI (version ${UI_VERSION})`);
 
@@ -78,6 +80,7 @@ const apiStore = new ApiStore(accountStore);
 const uiStore = new UiStore(accountStore);
 const proxyStore = new ProxyStore(accountStore);
 const interceptorStore = new InterceptorStore(proxyStore, accountStore);
+const sendStore = new SendStore();
 
 // Some non-trivial interactions between rules & events stores here. Rules need to use events to
 // handle breakpoints (where rule logic reads from received event data), while events need to use
@@ -106,7 +109,8 @@ const stores = {
     proxyStore,
     eventsStore,
     interceptorStore,
-    rulesStore
+    rulesStore,
+    sendStore
 };
 
 const appStartupPromise = Promise.all(
diff --git a/src/model/rules/rules-store.ts b/src/model/rules/rules-store.ts
index 3c7ef346..429bb9d1 100644
--- a/src/model/rules/rules-store.ts
+++ b/src/model/rules/rules-store.ts
@@ -4,7 +4,9 @@ import {
     requestHandlers,
     MOCKTTP_PARAM_REF,
     ProxyConfig,
-    ProxySetting
+    ProxySetting,
+    RuleParameterReference,
+    ProxySettingSource
 } from 'mockttp';
 import * as MockRTC from 'mockrtc';
 
@@ -357,7 +359,12 @@ export class RulesStore {
     }
 
     @computed.struct
-    get proxyConfig(): ProxyConfig {
+    get proxyConfig():
+        | ProxySetting
+        | RuleParameterReference<ProxySettingSource>
+        | Array<ProxySetting | RuleParameterReference<ProxySettingSource>>
+        | undefined
+    {
         const { userProxyConfig } = this;
         const { httpProxyPort } = this.proxyStore;
 
diff --git a/src/model/send/send-data-model.ts b/src/model/send/send-data-model.ts
new file mode 100644
index 00000000..766e0cc0
--- /dev/null
+++ b/src/model/send/send-data-model.ts
@@ -0,0 +1,96 @@
+import * as Mockttp from 'mockttp';
+import * as serializr from 'serializr';
+
+import { RawHeaders } from "../../types";
+import { EditableContentType } from "../events/content-types";
+
+// This is our model of a Request for sending. Smilar to the API model,
+// but not identical, as we add extra UI metadata etc.
+export interface RequestInput {
+    method: string;
+    url: string;
+
+    /**
+     * The raw headers to send. These will be sent exactly as provided - no headers
+     * will be added automatically.
+     *
+     * Note that this means omitting the 'Host' header may cause problems, as will
+     * omitting both 'Content-Length' and 'Transfer-Encoding' on requests with
+     * bodies.
+     */
+    headers: RawHeaders;
+
+    requestContentType: EditableContentType;
+    rawBody: Buffer;
+}
+
+// The schema to use to serialize the above as JSON.
+export const requestInputSchema = serializr.createSimpleSchema({
+    url: serializr.raw(),
+    method: serializr.raw(),
+    headers: serializr.raw(),
+    requestContentType: serializr.raw(),
+    // Serialize as Base64 - needs to be something we can put into JSON:
+    rawBody: serializr.custom(
+        (buffer) => buffer.toString('base64'),
+        (base64Data) => Buffer.from(base64Data, 'base64')
+    )
+});
+
+// These are the types that the sever client API expects. They are _not_ the same as
+// the Input type above, which is more flexible and includes various UI concerns that
+// we don't need to share with the server to actually send the request.
+export interface RequestDefinition {
+    method: string;
+    url: string;
+    headers: RawHeaders;
+    rawBody?: Buffer;
+}
+
+export interface RequestOptions {
+    ignoreHostHttpsErrors?: string[] | boolean;
+    trustAdditionalCAs?: Array<{ cert: string }>;
+    clientCertificate?: { pfx: Buffer, passphrase?: string };
+    proxyConfig?: ClientProxyConfig;
+    lookupOptions?: { servers?: string[] };
+}
+
+export const RULE_PARAM_REF_KEY = '__rule_param_reference__';
+type ClientProxyRuleParamReference = { [RULE_PARAM_REF_KEY]: string };
+
+export type ClientProxyConfig =
+    | undefined // No Docker, no user or system proxy
+    | Mockttp.ProxySetting // User or system proxy
+    | ClientProxyRuleParamReference // Docker proxy (must be dereferenced)
+    | Array<Mockttp.ProxySetting | ClientProxyRuleParamReference> // Both, ordered
+
+export type ResponseStreamEvent =
+    | ResponseHeadEvent
+    | ResponseBodyPartEvent
+    | ResponseEndEvent
+    | ErrorEvent;
+
+interface ResponseHeadEvent {
+    type: 'response-head';
+    statusCode: number;
+    statusMessage?: string;
+    headers: RawHeaders;
+}
+
+interface ResponseBodyPartEvent {
+    type: 'response-body-part';
+    rawBody: Buffer;
+}
+
+interface ResponseEndEvent {
+    type: 'response-end';
+}
+
+interface ErrorEvent {
+    type: 'error';
+    error: {
+        code?: string,
+        message?: string,
+        stack?: string
+    }
+}
diff --git a/src/model/send/send-store.ts b/src/model/send/send-store.ts
new file mode 100644
index 00000000..c65d3bb6
--- /dev/null
+++ b/src/model/send/send-store.ts
@@ -0,0 +1,27 @@
+import { observable } from 'mobx';
+
+import { lazyObservablePromise } from '../../util/observable';
+import { persist, hydrate } from '../../util/mobx-persist/persist';
+import { RequestInput, requestInputSchema } from './send-data-model';
+
+export class SendStore {
+
+    readonly initialized = lazyObservablePromise(async () => {
+        await hydrate({
+            key: 'send-store',
+            store: this
+        });
+
+        console.log('Send store initialized');
+    });
+
+    @persist('object', requestInputSchema) @observable
+    requestInput: RequestInput = {
+        url: '',
+        method: 'GET',
+        headers: [],
+        requestContentType: 'text',
+        rawBody: Buffer.from([])
+    };
+
+}
diff --git a/src/services/server-api.ts b/src/services/server-api.ts
index 8f8db899..b330bd9e 100644
--- a/src/services/server-api.ts
+++ b/src/services/server-api.ts
@@ -4,7 +4,7 @@ import { RUNNING_IN_WORKER } from '../util';
 import { getDeferred } from '../util/promise';
 import {
     versionSatisfies,
-    REST_API_SUPPORTED
+    SERVER_REST_API_SUPPORTED
 } from './service-versions';
 
 import { type ServerConfig, type NetworkInterfaces, type ServerInterceptor, ApiError } from './server-api-types';
@@ -12,6 +12,7 @@ export { ServerConfig, NetworkInterfaces, ServerInterceptor };
 
 import { GraphQLApiClient } from './server-graphql-api';
 import { RestApiClient } from './server-rest-api';
+import { RequestDefinition, RequestOptions } from '../model/send/send-data-model';
 
 const authTokenPromise = !RUNNING_IN_WORKER
     // Main UI gets given the auth token directly in its URL:
@@ -44,7 +45,7 @@ export async function getServerVersion(): Promise<string> {
     const version = await client.getServerVersion();
 
     // Swap to the REST client if we receive a version where it's supported:
-    if (versionSatisfies(version, REST_API_SUPPORTED) && client instanceof GraphQLApiClient) {
+    if (versionSatisfies(version, SERVER_REST_API_SUPPORTED) && client instanceof GraphQLApiClient) {
         apiClient = authTokenPromise
             .then((authToken) => new RestApiClient(authToken));
     }
@@ -86,6 +87,18 @@ export async function activateInterceptor(id: string, proxyPort: number, options
     }
 }
 
+export async function sendRequest(
+    requestDefinition: RequestDefinition,
+    requestOptions: RequestOptions
+) {
+    const client = (await apiClient);
+    if (!(client instanceof RestApiClient)) {
+        throw new Error("Requests cannot be sent via the GraphQL API client");
+    }
+
+    return client.sendRequest(requestDefinition, requestOptions);
+}
+
 export async function triggerServerUpdate() {
     return (await apiClient).triggerServerUpdate()
         // We ignore all errors, this trigger is just advisory
diff --git a/src/services/server-rest-api.ts b/src/services/server-rest-api.ts
index e5b92b44..a5eec1d4 100644
--- a/src/services/server-rest-api.ts
+++ b/src/services/server-rest-api.ts
@@ -1,5 +1,12 @@
 import * as _ from 'lodash';
 
+import {
+    byteStreamToLines,
+    emptyStream,
+    parseJsonLinesStream
+} from '../util/streams';
+
+import { RawHeaders } from '../types';
 import {
     ServerConfig,
     NetworkInterfaces,
@@ -7,18 +14,24 @@ import {
     ApiError
 } from './server-api-types';
 
+import {
+    RequestDefinition,
+    RequestOptions,
+    ResponseStreamEvent
+} from '../model/send/send-data-model';
+
 export class RestApiClient {
 
     constructor(
         private authToken?: string
     ) {}
 
-    async apiRequest<T extends {}>(
+    private async apiRequest(
         method: string,
         path: string,
         query: Record<string, number | string> = {},
         body?: object
-    ): Promise<T> {
+    ) {
         const operationName = `${method} ${path}`;
 
         const response = await fetch(`http://127.0.0.1:45457${path}${
@@ -33,8 +46,8 @@ export class RestApiClient {
                 } : {}),
                 'content-type': 'application/json'
             },
-            body: body ?
-                JSON.stringify(body)
+            body: body
+                ? JSON.stringify(body)
                 : undefined
         }).catch((e) => {
             throw new ApiError(`fetch failed with '${e.message ?? e}'`, operationName);
@@ -63,18 +76,44 @@ export class RestApiClient {
             );
         }
 
-        return await response.json() as T;
+        return response;
+    }
+
+    private async apiJsonRequest<T extends {}>(
+        method: string,
+        path: string,
+        query: Record<string, number | string> = {},
+        body?: object
+    ): Promise<T> {
+        return await (
+            await this.apiRequest(method, path, query, body)
+        ).json() as T;
+    }
+
+    private async apiNdJsonRequest<T extends {}>(
+        method: string,
+        path: string,
+        query: Record<string, number | string> = {},
+        body?: object
+    ): Promise<ReadableStream<T>> {
+        const response = await this.apiRequest(method, path, query, body);
+
+        if (!response.body) return emptyStream();
+
+        return parseJsonLinesStream(
+            byteStreamToLines(response.body)
+        );
     }
 
     async getServerVersion(): Promise<string> {
-        const response = await this.apiRequest<{
+        const response = await this.apiJsonRequest<{
             version: string
         }>('get', '/version');
         return response.version;
     }
 
     async getConfig(proxyPort: number) {
-        const response = await this.apiRequest<{
+        const response = await this.apiJsonRequest<{
             config: ServerConfig
         }>('GET', '/config', { proxyPort: proxyPort });
 
@@ -82,7 +121,7 @@ export class RestApiClient {
     }
 
     async getNetworkInterfaces() {
-        const response = await this.apiRequest<{
+        const response = await this.apiJsonRequest<{
             networkInterfaces: NetworkInterfaces
         }>('GET', '/config/network-interfaces');
 
@@ -90,7 +129,7 @@ export class RestApiClient {
     }
 
     async getInterceptors(proxyPort: number) {
-        const response = await this.apiRequest<{
+        const response = await this.apiJsonRequest<{
             interceptors: ServerInterceptor[]
         }>('GET', '/interceptors', { proxyPort });
 
@@ -98,7 +137,7 @@ export class RestApiClient {
     }
 
     async getDetailedInterceptorMetadata<M extends unknown>(id: string): Promise<M | undefined> {
-        const response = await this.apiRequest<{
+        const response = await this.apiJsonRequest<{
             interceptorMetadata: M
         }>('GET', `/interceptors/${id}/metadata`);
 
@@ -106,14 +145,83 @@ export class RestApiClient {
     }
 
     async activateInterceptor(id: string, proxyPort: number, options?: any) {
-        const response = await this.apiRequest<{
+        const response = await this.apiJsonRequest<{
             result: { success: boolean, metadata: unknown }
         }>('POST', `/interceptors/${id}/activate/${proxyPort}`, {}, options);
 
         return response.result;
     }
 
+    async sendRequest(
+        requestDefinition: RequestDefinition,
+        requestOptions: RequestOptions
+    ) {
+        const requestDefinitionData = {
+            ...requestDefinition,
+            rawBody: requestDefinition.rawBody?.toString('base64')
+        }
+
+        const requestOptionsData = {
+            ...requestOptions,
+            ...(requestOptions.clientCertificate ? {
+                clientCertificate: {
+                    ...requestOptions.clientCertificate,
+                    pfx: requestOptions.clientCertificate.pfx.toString('base64')
+                }
+            } : {})
+        }
+
+        const responseDataStream = await this.apiNdJsonRequest<ResponseStreamEventData>(
+            'POST', '/client/send', {}, {
+                request: requestDefinitionData,
+                options: requestOptionsData
+            }
+        );
+
+        const dataStreamReader = responseDataStream.getReader();
+        return new ReadableStream<ResponseStreamEvent>({
+            async pull(controller) {
+                const { done, value } = await dataStreamReader.read();
+                if (done) return controller.close();
+
+                if (value.type === 'response-body-part') {
+                    controller.enqueue({
+                        ...value,
+                        rawBody: Buffer.from(value.rawBody, 'base64')
+                    });
+                } else {
+                    controller.enqueue(value);
+                }
+            },
+            cancel(reason) {
+                responseDataStream.cancel(reason);
+            }
+        });
+    }
+
     async triggerServerUpdate() {
-        await this.apiRequest<{}>('POST', '/update');
+        await this.apiJsonRequest<{}>('POST', '/update');
     }
-}
\ No newline at end of file
+}
+
+type ResponseStreamEventData =
+    | ResponseHeadData
+    | ResponseBodyPartData
+    | ResponseEndData;
+
+interface ResponseHeadData {
+    type: 'response-head';
+    statusCode: number;
+    statusMessage?: string;
+    headers: RawHeaders;
+}
+
+interface ResponseBodyPartData {
+    type: 'response-body-part';
+    rawBody: string; // base64
+}
+
+interface ResponseEndData {
+    type: 'response-end';
+}
+
diff --git a/src/services/service-versions.ts b/src/services/service-versions.ts
index 69b1b15e..53bd7421 100644
--- a/src/services/service-versions.ts
+++ b/src/services/service-versions.ts
@@ -71,4 +71,5 @@ export const JSONRPC_RESPONSE_RULE_SUPPORTED = '^1.11.0';
 export const RTC_RULES_SUPPORTED = '^1.11.0';
 export const TLS_PASSTHROUGH_SUPPORTED = '^1.12.0';
 export const CONNECTION_RESET_SUPPORTED = '^1.12.0';
-export const REST_API_SUPPORTED = '^1.13.0';
\ No newline at end of file
+export const SERVER_REST_API_SUPPORTED = '^1.13.0';
+export const SERVER_SEND_API_SUPPORTED = '^1.13.0';
\ No newline at end of file
diff --git a/src/util/streams.ts b/src/util/streams.ts
new file mode 100644
index 00000000..08766a35
--- /dev/null
+++ b/src/util/streams.ts
@@ -0,0 +1,64 @@
+export function byteStreamToLines(stream: ReadableStream<Uint8Array>) {
+    const newlineMatcher = /\r?\n/;
+    const decoder = new TextDecoder();
+
+    let reader: ReadableStreamDefaultReader<Uint8Array>;
+    let currentLine = '';
+
+    return new ReadableStream<string>({
+        start() {
+            reader = stream.getReader();
+        },
+        async pull(controller) {
+            const { done, value } = await reader.read();
+
+            if (done) {
+                // If the stream closes cleanly, all data up to the end
+                // (if there is any) is our final line:
+                if (currentLine.length > 0) {
+                    controller.enqueue(currentLine);
+                }
+                controller.close();
+            }
+
+            const chunk = decoder.decode(value, { stream: true });
+            currentLine += chunk;
+
+            const parts = currentLine.split(newlineMatcher);
+
+            // The last part is incomplete, so becomes our current line:
+            currentLine = parts.pop() ?? '';
+
+            // Every other part is a complete line:
+            for (const part of parts) controller.enqueue(part);
+        },
+        cancel(reason) {
+            reader.cancel(reason);
+        }
+    });
+}
+
+export function parseJsonLinesStream<T = unknown>(stream: ReadableStream<string>) {
+    let reader: ReadableStreamDefaultReader<string>;
+
+    return new ReadableStream<T>({
+        start() {
+            reader = stream.getReader();
+        },
+        async pull(controller) {
+            const { done, value } = await reader.read();
+
+            if (done) return controller.close();
+            else controller.enqueue(JSON.parse(value));
+        },
+        cancel(reason) {
+            reader.cancel(reason);
+        }
+    });
+}
+
+export const emptyStream = () => new ReadableStream({
+    start(controller) {
+        controller.close();
+    }
+});
\ No newline at end of file