feat(frontend): show intercepted request & response

frontend/src/App.tsx

@@ -3,7 +3,7 @@ import RulesList from "./components/RulesList";
 import CommandQueue from "./components/CommandQueue";
 import Login from "./components/Login";
 import ChangePassword from "./components/ChangePassword";
-import RequestLog from "./components/RequestLog";
+import RequestLogs from "./components/RequestLogs";
 import { authStore } from "./api/auth";
 
 const App: Component = () => {
@@ -80,7 +80,7 @@ const App: Component = () => {
                     : "border-transparent text-gray-500 hover:text-gray-700"
                 }`}
               >
-                Request Log
+                Request Logs
               </button>
             </div>
           </div>
@@ -89,7 +89,7 @@ const App: Component = () => {
         <main class="max-w-7xl mx-auto px-4 py-6">
           {activeTab() === "rules" && <RulesList />}
           {activeTab() === "commands" && <CommandQueue />}
-          {activeTab() === "logs" && <RequestLog />}
+          {activeTab() === "logs" && <RequestLogs />}
         </main>
 
         <Show when={showChangePassword()}>

frontend/src/components/RequestDetails.tsx

@@ -83,6 +83,38 @@ const RequestDetails: Component<RequestDetailsProps> = (props) => {
                 <TreeView name="body" data={props.log.response_body} isRoot={true} />
               </div>
             </div>
+
+
+            <Show when={props.log.intercepted_request}>
+              <div>
+                <h4 class="font-semibold mb-2 flex items-center">
+                  Intercepted Request
+                  <Show when={props.log.request_interception_action}>
+                    <span class="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
+                      {props.log.request_interception_action}
+                    </span>
+                  </Show>
+                </h4>
+                <div class="bg-gray-50 p-3 rounded overflow-x-auto">
+                  <TreeView name="body" data={props.log.intercepted_request} isRoot={true} />
+                </div>
+              </div>
+            </Show>
+            <Show when={props.log.intercepted_response}>
+              <div>
+                <h4 class="font-semibold mb-2 flex items-center">
+                  Intercepted Response
+                  <Show when={props.log.response_interception_action}>
+                    <span class="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
+                      {props.log.response_interception_action}
+                    </span>
+                  </Show>
+                </h4>
+                <div class="bg-gray-50 p-3 rounded overflow-x-auto">
+                  <TreeView name="body" data={props.log.intercepted_response} isRoot={true} />
+                </div>
+              </div>
+            </Show>
           </div>
         </CardContent>
 

frontend/src/components/RequestLogs.tsx

@@ -7,7 +7,7 @@ import { Input } from "./ui/Input";
 import { Select } from "./ui/Select";
 import RequestDetails from "./RequestDetails";
 
-const RequestLog: Component = () => {
+const RequestLogs: Component = () => {
   const [search, setSearch] = createSignal("");
   const [inputValue, setInputValue] = createSignal("");
   const [method, setMethod] = createSignal("");
@@ -51,7 +51,7 @@ const RequestLog: Component = () => {
       <div class="space-y-4">
         <div class="flex items-center justify-between">
           <h2 class="text-2xl font-semibold">
-            Request Log
+            Request Logs
             <Show when={logs() && !logs.loading && !allLogs.loading}>
               <span class="text-gray-500 text-base ml-2">
                 ({logs()?.length} of {allLogs()?.length} logs)
@@ -138,4 +138,4 @@ const RequestLog: Component = () => {
   );
 };
 
-export default RequestLog;
+export default RequestLogs;

frontend/src/types/index.ts

@@ -1,13 +1,15 @@
 export interface InterceptionRule {
   id: number;
   method_name: string;
-  action: "passthrough" | "modify" | "replace";
+  action: InterceptionAction;
   custom_response: any | null;
   is_enabled: boolean;
   created_at: string;
   updated_at: string;
 }
 
+export type InterceptionAction = "passthrough" | "modify" | "replace";
+
 export interface Command {
   id: number;
   command: any;
@@ -50,7 +52,9 @@ export interface RequestLog {
   method: string;
   request_body: object;
   response_body: object;
-  request_interception_action: string;
-  response_interception_action: string;
+  intercepted_request: object;
+  intercepted_response: object;
+  request_interception_action?: InterceptionAction;
+  response_interception_action?: InterceptionAction;
   created_at: string;
 }