5 files changed, 137 insertions, 59 deletions

diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
index b1a4501..5e17388 100644
--- a/src/components/App/App.tsx
+++ b/src/components/App/App.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import { ReactElement, useContext, useEffect, useMemo, useState } from "react";
-import useRequests, { ReadyState, RequestResponse } from "~/hooks/useRequests";
+import useRequests from "~/hooks/useRequests";
 
 import styles from "~/components/App/App.module.scss";
 import RequestDetails from "~/components/RequestDetails/RequestDetails";
@@ -13,6 +13,7 @@ import Moon from "~/components/Icons/Moon";
 import Trash from "~/components/Icons/Trash";
 import { DarkModeContext } from "~/contexts/DarkMode";
 import RequestList from "~/components/RequestList/RequestList";
+import { ReadyState, RequestResponse } from "~/types";
 
 interface Config {
   url: string;
diff --git a/src/components/RequestDetails/RequestDetails.tsx b/src/components/RequestDetails/RequestDetails.tsx
index f34ef6f..9000220 100644
--- a/src/components/RequestDetails/RequestDetails.tsx
+++ b/src/components/RequestDetails/RequestDetails.tsx
@@ -1,11 +1,11 @@
 import * as React from "react";
 import { useCallback, useMemo, useState } from "react";
-import { Headers, RequestResponse } from "~/hooks/useRequests";
 import styles from "~/components/RequestDetails/RequestDetails.module.scss";
 import RequestSummary from "~/components/RequestSummary/RequestSummary";
 import Content from "~/components/Content/Content";
 import { getHost } from "~/utils";
 import { Button, Card, Col, Container, Nav, Row, Table } from "react-bootstrap";
+import { Headers, RequestResponse } from "~/types";
 
 interface TimingProps {
   timing: number;
diff --git a/src/components/RequestList/RequestList.tsx b/src/components/RequestList/RequestList.tsx
index acef47a..a4e9a0e 100644
--- a/src/components/RequestList/RequestList.tsx
+++ b/src/components/RequestList/RequestList.tsx
@@ -12,9 +12,9 @@ import styles from "~/components/RequestList/RequestList.module.scss";
 import RequestSummary from "~/components/RequestSummary/RequestSummary";
 import * as React from "react";
 import { useCallback, useContext, useMemo, useState } from "react";
-import { Method, RequestResponse } from "~/hooks/useRequests";
 import { DarkModeContext } from "~/contexts/DarkMode";
 import Filter from "~/components/Icons/Filter";
+import { Method, RequestResponse } from "~/types";
 
 interface ListProps {
   requests: RequestResponse[];
diff --git a/src/hooks/useRequests.tsx b/src/hooks/useRequests.tsx
index 1361949..dfc3b80 100644
--- a/src/hooks/useRequests.tsx
+++ b/src/hooks/useRequests.tsx
@@ -1,61 +1,15 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { getHost } from "~/utils";
-
-export type Headers = [string, string][];
-export type Method =
-  | "GET"
-  | "HEAD"
-  | "POST"
-  | "PUT"
-  | "DELETE"
-  | "CONNECT"
-  | "OPTIONS"
-  | "TRACE"
-  | "PATCH";
-
-export interface RequestPayload {
-  id: string;
-  timestamp: string;
-  body: string;
-  headers: Headers;
-  method: Method;
-  path: string;
-}
-
-interface Request {
-  type: "request";
-  payload: RequestPayload;
-}
-
-export interface ResponsePayload {
-  id: string;
-  timing: number;
-  body: string;
-  headers: Headers;
-  status: number;
-}
-
-interface Response {
-  type: "response";
-  payload: ResponsePayload;
-}
-
-interface Historic {
-  type: "historic";
-  payload: (Request | Response)[];
-}
-
-export interface RequestResponse {
-  request: RequestPayload;
-  response?: ResponsePayload;
-}
-
-export enum ReadyState {
-  CONNECTING = 0,
-  OPEN = 1,
-  CLOSING = 2,
-  CLOSED = 3,
-}
+import {
+  Historic,
+  ReadyState,
+  Request,
+  RequestPayload,
+  RequestResponse,
+  Response,
+  ResponsePayload,
+  WebsocketType,
+} from "~/types";
 
 export interface useRequestsProps {
   onConnect: () => Promise<void>;
@@ -75,6 +29,8 @@ export default function useRequests({
   const [initialConnection, setInitialConnection] = useState(true);
   const [requests, setRequests] = useState<RequestPayload[]>([]);
   const [responses, setResponses] = useState<ResponsePayload[]>([]);
+  const [websocketFrames, setWebsocketFrames] =
+    useState<WebsocketType["payload"]>();
 
   const connect = useCallback(
     () => new WebSocket(`ws://${wsHost}/inspect/`),
@@ -102,6 +58,8 @@ export default function useRequests({
         | Request
         | Response;
 
+      console.debug(type, payload);
+
       switch (type) {
         case "historic":
           if (initialConnection) {
diff --git a/src/types.ts b/src/types.ts
new file mode 100644
index 0000000..84b95e3
--- /dev/null
+++ b/src/types.ts
@@ -0,0 +1,119 @@
+export type Headers = [string, string][];
+export type Method =
+  | "GET"
+  | "HEAD"
+  | "POST"
+  | "PUT"
+  | "DELETE"
+  | "CONNECT"
+  | "OPTIONS"
+  | "TRACE"
+  | "PATCH";
+
+export interface RequestPayload {
+  id: string;
+  timestamp: string;
+  body: string;
+  headers: Headers;
+  method: Method;
+  path: string;
+}
+
+export interface Request {
+  type: "request";
+  payload: RequestPayload;
+}
+
+export interface ResponsePayload {
+  id: string;
+  timing: number;
+  body: string;
+  headers: Headers;
+  status: number;
+}
+
+export interface Response {
+  type: "response";
+  payload: ResponsePayload;
+}
+
+type RequestResponseType = Request | Response;
+
+interface WebsocketConnectPayload {
+  id: string;
+  headers: Headers;
+  path: string;
+  timestamp: string;
+}
+
+interface WebsocketConnect {
+  type: "websocket_connect";
+  payload: WebsocketConnectPayload;
+}
+
+interface WebsocketConnectedPayload {
+  id: string;
+  timing: number;
+}
+
+interface WebsocketConnected {
+  type: "websocket_connected";
+  payload: WebsocketConnectedPayload;
+}
+
+interface WebsocketInboundPayload {
+  id: string;
+  timestamp: string;
+  body: string;
+}
+
+interface WebsocketInbound {
+  type: "websocket_inbound";
+  payload: WebsocketInboundPayload;
+}
+
+interface WebsocketOutboundPayload {
+  id: string;
+  timestamp: string;
+  body: string;
+}
+
+interface WebsocketOutbound {
+  type: "websocket_outbound";
+  payload: WebsocketOutboundPayload;
+}
+
+interface WebsocketDisconnectPayload {
+  id: string;
+  timestamp: string;