fmt: frontend & flake.nix

flake.nix

@@ -21,8 +21,6 @@
         {
           default = pkgs.mkShell rec {
             nativeBuildInputs = with pkgs; [
-              gcc
-              nodejs
               (fenix.packages.${system}.complete.withComponents [
                 "cargo"
                 "clippy"
@@ -31,15 +29,22 @@
                 "rustfmt"
                 "rust-analyzer"
               ])
+              gcc
               openssl
               pkg-config
+
+              nodejs
+              biome
+
               sqlite
+              sqlx-cli
+              lazysql
+
               gemini-cli
               claude-code
-              biome
+
-              sqlx-cli
               typos
-              lazysql
+              tokei
             ];
             buildInputs = [ ];
             LD_LIBRARY_PATH = pkgs.lib.makeLibraryPath (nativeBuildInputs ++ buildInputs);

frontend/src/components/ActionBadge.tsx

@@ -1,15 +1,17 @@
-import { InterceptionAction } from "../types"
+import { InterceptionAction } from "../types";
 
-export const ActionBadge = (props: { action: InterceptionAction, class?: string }) => {
+export const ActionBadge = (props: { action: InterceptionAction; class?: string }) => {
-  return <span
+  return (
-    class={`px-2 py-1 rounded-full text-xs ${
+    <span
-      props.action === "replace"
+      class={`px-2 py-1 rounded-full text-xs ${
-        ? "bg-purple-100 text-purple-800"
+        props.action === "replace"
-        : props.action === "modify"
+          ? "bg-purple-100 text-purple-800"
-          ? "bg-blue-100 text-blue-800"
+          : props.action === "modify"
-          : "bg-gray-100 text-gray-800"
+            ? "bg-blue-100 text-blue-800"
-    } ${props.class ?? ""}`}
+            : "bg-gray-100 text-gray-800"
-  >
+      } ${props.class ?? ""}`}
-    {props.action}
+    >
-  </span>
+      {props.action}
-}
+    </span>
+  );
+};

frontend/src/components/RequestDetails.tsx

@@ -77,20 +77,22 @@ const DataSection: Component<DataSectionProps> = (props) => {
         <div class="flex text-xs rounded-md border border-gray-300 overflow-hidden">
           <button
             type="button"
-            class={`px-2 py-1 ${viewMode() === "tree"
+            class={`px-2 py-1 ${
+              viewMode() === "tree"
                 ? "bg-gray-200 text-gray-900 font-medium"
                 : "bg-white text-gray-600 hover:bg-gray-50"
-              }`}
+            }`}
             onClick={() => setViewMode("tree")}
           >
             Tree
           </button>
           <button
             type="button"
-            class={`px-2 py-1 border-l border-gray-300 ${viewMode() === "raw"
+            class={`px-2 py-1 border-l border-gray-300 ${
+              viewMode() === "raw"
                 ? "bg-gray-200 text-gray-900 font-medium"
                 : "bg-white text-gray-600 hover:bg-gray-50"
-              }`}
+            }`}
             onClick={() => setViewMode("raw")}
           >
             Raw

frontend/src/components/RequestLogs.tsx

@@ -80,8 +80,8 @@ const RequestLogs: Component = () => {
             Request Logs
             <Show when={!logsData.loading}>
               <span class="text-gray-500 text-base ml-2">
-                (Showing {(page() - 1) * PAGE_SIZE + 1}-{Math.min(page() * PAGE_SIZE, totalLogs())} of{" "}
+                (Showing {totalLogs() === 0 ? 0 : (page() - 1) * PAGE_SIZE + 1}-
-                {totalLogs()})
+                {Math.min(page() * PAGE_SIZE, totalLogs())} of {totalLogs()})
               </span>
             </Show>
           </h2>