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,7 +1,8 @@
-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 (
+    <span
       class={`px-2 py-1 rounded-full text-xs ${
         props.action === "replace"
           ? "bg-purple-100 text-purple-800"
@@ -12,4 +13,5 @@ export const ActionBadge = (props: { action: InterceptionAction, class?: string
     >
       {props.action}
     </span>
-}
+  );
+};

frontend/src/components/RequestDetails.tsx

@@ -77,7 +77,8 @@ 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"
             }`}
@@ -87,7 +88,8 @@ const DataSection: Component<DataSectionProps> = (props) => {
           </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"
             }`}

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>