20 files changed, 1554 insertions, 786 deletions

diff --git a/.github/workflows/python-publish.yml b/.github/workflows/python-publish.yml
index 9246d7e..d90abfb 100644
--- a/.github/workflows/python-publish.yml
+++ b/.github/workflows/python-publish.yml
@@ -12,13 +12,13 @@ jobs:
   deploy:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v4
     - name: Set up Python
-      uses: actions/setup-python@v2
+      uses: actions/setup-python@v5
       with:
         python-version: '3.10'
     - name: Set up Node
-      uses: actions/setup-node@v2
+      uses: actions/setup-node@v4
       with:
         node-version: '16'
     - name: Install node dependencies
diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
index b1a4501..ad36add 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,8 @@ import Moon from "~/components/Icons/Moon";
 import Trash from "~/components/Icons/Trash";
 import { DarkModeContext } from "~/contexts/DarkMode";
 import RequestList from "~/components/RequestList/RequestList";
+import { Call, ReadyState } from "~/types";
+import { ConnectionContext } from "~/contexts/Connection";
 
 interface Config {
   url: string;
@@ -47,29 +49,14 @@ const statusTextMap: ReadyStateMap = {
 
 export default function App() {
   const { darkMode, toggle } = useContext(DarkModeContext);
-  const [config, setConfig] = useState<Config | null>(null);
-
-  const { calls, readyState, clear } = useRequests({
-    onConnect: async () => {
-      const response = await fetch(`http://${getHost()}/config/`);
-      const config = await response.json();
-      setConfig(config);
-    },
-  });
+  const { config, selectedCall, setSelectedCall, readyState, clear } =
+    useContext(ConnectionContext);
 
   useEffect(() => {
     const url = new URL(config?.url ?? "https://loading...");
     document.title = `${statusIconMap[readyState]} ${url.host} | TTUN`;
   }, [readyState, config?.url]);
 
-  const [selectedRequestIndex, setSelectedRequestIndex] = useState<
-    number | null
-  >(null);
-  const selectedRequest = useMemo<RequestResponse | null>(
-    () => (selectedRequestIndex === null ? null : calls[selectedRequestIndex]),
-    [selectedRequestIndex, calls]
-  );
-
   const settingsMenu: (SettingsMenu | null)[] = [
     {
       onClick: toggle,
@@ -79,7 +66,7 @@ export default function App() {
     null,
     {
       onClick: () => {
-        setSelectedRequestIndex(null);
+        setSelectedCall(null);
         clear();
       },
       icon: <Trash />,
@@ -105,14 +92,15 @@ export default function App() {
                 </a>
               </Navbar.Text>
               <Navbar.Toggle aria-controls="settings" />
-              <Navbar.Collapse id="settings" className="ms-2">
+              <Navbar.Collapse id="settings" className="ms-2" role="button">
                 <Nav>
                   <NavDropdown align="end" title={<Sliders />}>
-                    {settingsMenu.map((item) => {
+                    {settingsMenu.map((item, index) => {
                       if (item !== null) {
                         const { onClick, icon, label } = item;
                         return (
                           <NavDropdown.Item
+                            key={label}
                             onClick={onClick}
                             className="d-flex align-items-center"
                           >
@@ -121,7 +109,7 @@ export default function App() {
                           </NavDropdown.Item>
                         );
                       } else {
-                        return <NavDropdown.Divider />;
+                        return <NavDropdown.Divider key={`item-${index}`} />;
                       }
                     })}
                   </NavDropdown>
@@ -133,14 +121,10 @@ export default function App() {
 
         <main className={styles.main}>
           <div className={classNames("border-end", styles.sidebar)}>
-            <RequestList
-              requests={calls}
-              selectedRequestIndex={selectedRequestIndex}
-              setSelectedRequestIndex={setSelectedRequestIndex}
-            />
+            <RequestList />
           </div>
           <div className={styles.details}>
-            <RequestDetails requestResponse={selectedRequest} />
+            <RequestDetails />
           </div>
         </main>
       </div>
diff --git a/src/components/Frames/Frames.module.scss b/src/components/Frames/Frames.module.scss
new file mode 100644
index 0000000..821f0b8
--- /dev/null
+++ b/src/components/Frames/Frames.module.scss
@@ -0,0 +1,9 @@
+.arrow {
+  &.outbound {
+    color: green;
+  }
+
+  &.inbound {
+    color: red;
+  }
+}
diff --git a/src/components/Frames/Frames.tsx b/src/components/Frames/Frames.tsx
new file mode 100644
index 0000000..83c4c96
--- /dev/null
+++ b/src/components/Frames/Frames.tsx
@@ -0,0 +1,75 @@
+import { Frame } from "~/types";
+import React, { PropsWithChildren, useContext } from "react";
+import { Col, ListGroup, Row } from "react-bootstrap";
+import classNames from "classnames";
+import styles from "./Frames.module.scss";
+import dayjs from "dayjs";
+import ReactJson from "react-json-view";
+import { DarkModeContext } from "~/contexts/DarkMode";
+
+function isJson(data: any): boolean {
+  try {
+    JSON.parse(data);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+interface FramesProps {
+  frames: Frame[];
+}
+
+export default function Frames({
+  frames,
+}: PropsWithChildren<FramesProps>): JSX.Element {
+  const { darkMode } = useContext(DarkModeContext);
+  return (
+    <ListGroup variant="flush" as="ul" className={"flex-grow-1"}>
+      {frames.length > 0 ? (
+        frames.map((frame) => {
+          // Inbound relative to the client
+          const inbound = frame.type !== "websocket_inbound";
+
+          const body =
+            frame.type !== "websocket_disconnect"
+              ? atob(frame.payload.body)
+              : null;
+
+          return (
+            <ListGroup.Item
+              as="li"
+              key={frame.payload.id}
+              className={classNames({
+                "border-bottom": true,
+              })}
+            >