procsi 0.8.2 → 0.9.0

package/README.md

@@ -12,7 +12,7 @@ Procsi is a terminal-based, project-scoped HTTP proxy with a powerful CLI & MCP
 
 - **Project-scoped** — each project gets its own `.procsi/` directory with a separate daemon, database, CA cert and interceptors
 - **MCP server** — AI agents get full access to your captured traffic and can search, filter, inspect, mock — all via tool calls.
-- **Interceptors** — mock, modify or observe traffic by writing typescript. Agent can do this over MCP meaning you can express complex scenarios in natural language! 
+- **Interceptors** — mock, modify or observe traffic by writing typescript. Agent can do this over MCP meaning you can express complex scenarios in natural language!
 
 ## Quick Start
 
@@ -27,6 +27,9 @@ curl https://api.example.com/users
 
 # Open UI
 procsi tui
+
+# Add MCP server to your AI tool
+claude mcp add procsi -- procsi mcp
 ```
 
 ## Browser Interception
@@ -81,19 +84,38 @@ procsi --config /tmp/my-procsi-data on
 
 See [CLI Reference](docs/cli-reference.md) for the full resolution order (`--config` > `--dir` > auto-detect).
 
-## Use cases
-
-- AI analysis
-- Chaos monkey
-- Mock out APIs that do not yet exist
-
-## MCP Integration
+#### MCP Integration
 
 procsi has a built-in [MCP](https://modelcontextprotocol.io/) server that gives AI agents full access to your captured traffic and interceptor system.
 
 ### Setup
 
-Add procsi to your MCP client config:
+**Claude Code:**
+
+```bash
+claude mcp add procsi -- procsi mcp
+```
+
+**Codex:**
+
+```bash
+codex mcp add procsi -- procsi mcp
+```
+
+**Cursor** — add to `.cursor/mcp.json`:
+
+```json
+{
+  "mcpServers": {
+    "procsi": {
+      "command": "procsi",
+      "args": ["mcp"]
+    }
+  }
+}
+```
+
+**Other MCP clients** (Windsurf, etc.) — add to your client's MCP config:
 
 ```json
 {
@@ -310,6 +332,10 @@ Your HTTP client needs to respect proxy environment variables.
 
 There are workarounds implemented for node - e.g. fetch override. Other libraries in different environments may need a similar treatment.
 
+## Acknowledgements
+
+procsi is built on top of [MockTTP](https://github.com/httptoolkit/mockttp) by [Tim Perry](https://github.com/pimterry), the same MITM proxy engine that powers [HTTP Toolkit](https://httptoolkit.com/).
+
 ## Licence
 
 AGPL-3.0-or-later

package/dist/cli/commands/mcp.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mcp.d.ts","sourceRoot":"","sources":["../../../src/cli/commands/mcp.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAIpC,eAAO,MAAM,UAAU,SAsBnB,CAAC"}
+{"version":3,"file":"mcp.d.ts","sourceRoot":"","sources":["../../../src/cli/commands/mcp.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAqEpC,eAAO,MAAM,UAAU,SA4BnB,CAAC"}

package/dist/cli/commands/mcp.js

@@ -1,9 +1,72 @@
 import { Command } from "commander";
 import { createProcsiMcpServer } from "../../mcp/server.js";
 import { getGlobalOptions, requireProjectRoot } from "./helpers.js";
+const SEPARATOR_WIDTH = 48;
+function printSetupInstructions() {
+    console.log("procsi MCP server");
+    console.log("");
+    console.log("Add procsi to your AI tool to give it access to captured HTTP traffic.");
+    console.log("");
+    const clients = [
+        {
+            name: "Claude Code",
+            lines: ["  claude mcp add procsi -- procsi mcp"],
+        },
+        {
+            name: "Cursor",
+            lines: [
+                "  Add to .cursor/mcp.json:",
+                "",
+                "  {",
+                '    "mcpServers": {',
+                '      "procsi": {',
+                '        "command": "procsi",',
+                '        "args": ["mcp"]',
+                "      }",
+                "    }",
+                "  }",
+            ],
+        },
+        {
+            name: "Codex",
+            lines: ["  codex mcp add procsi -- procsi mcp"],
+        },
+        {
+            name: "Other (Windsurf, etc.)",
+            lines: [
+                "  Add to your MCP client config:",
+                "",
+                "  {",
+                '    "mcpServers": {',
+                '      "procsi": {',
+                '        "command": "procsi",',
+                '        "args": ["mcp"]',
+                "      }",
+                "    }",
+                "  }",
+            ],
+        },
+    ];
+    for (const client of clients) {
+        const label = ` ${client.name} `;
+        const padding = "\u2500".repeat(Math.max(0, SEPARATOR_WIDTH - label.length - 2));
+        console.log(`\u2500\u2500${label}${padding}`);
+        console.log("");
+        for (const line of client.lines) {
+            console.log(line);
+        }
+        console.log("");
+    }
+    console.log('Note: The proxy must be running (eval "$(procsi on)") for the MCP server to connect.');
+}
 export const mcpCommand = new Command("mcp")
     .description("Start the procsi MCP server (stdio transport for AI tool integration)")
     .action(async (_, command) => {
+    // If stdout is a TTY, user ran directly — show setup instructions instead
+    if (process.stdout.isTTY) {
+        printSetupInstructions();
+        return;
+    }
     const globalOpts = getGlobalOptions(command);
     const projectRoot = requireProjectRoot(globalOpts.dir);
     const mcp = createProcsiMcpServer({ projectRoot });

package/dist/cli/commands/mcp.js.map

@@ -1 +1 @@
-{"version":3,"file":"mcp.js","sourceRoot":"","sources":["../../../src/cli/commands/mcp.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAEpE,MAAM,CAAC,MAAM,UAAU,GAAG,IAAI,OAAO,CAAC,KAAK,CAAC;KACzC,WAAW,CAAC,uEAAuE,CAAC;KACpF,MAAM,CAAC,KAAK,EAAE,CAAC,EAAE,OAAgB,EAAE,EAAE;IACpC,MAAM,UAAU,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAC7C,MAAM,WAAW,GAAG,kBAAkB,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC;IAEvD,MAAM,GAAG,GAAG,qBAAqB,CAAC,EAAE,WAAW,EAAE,CAAC,CAAC;IAEnD,IAAI,OAAO,GAAG,KAAK,CAAC;IACpB,MAAM,QAAQ,GAAG,KAAK,IAAI,EAAE;QAC1B,IAAI,OAAO;YAAE,OAAO;QACpB,OAAO,GAAG,IAAI,CAAC;QACf,MAAM,GAAG,CAAC,KAAK,EAAE,CAAC;QAClB,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAClB,CAAC,CAAC;IACF,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;IAC/B,OAAO,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;IAEhC,MAAM,GAAG,CAAC,KAAK,EAAE,CAAC;IAElB,+DAA+D;IAC/D,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,uCAAuC,WAAW,KAAK,CAAC,CAAC;AAChF,CAAC,CAAC,CAAC"}
+{"version":3,"file":"mcp.js","sourceRoot":"","sources":["../../../src/cli/commands/mcp.ts"],"names":[],"mappings":"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"}

package/dist/cli/tui/App.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../../../src/cli/tui/App.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAA4D,MAAM,OAAO,CAAC;AAoCjF,UAAU,QAAQ;IAChB,0DAA0D;IAC1D,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,wDAAwD;IACxD,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAID,eAAO,MAAM,oBAAoB,KAAK,CAAC;AACvC,eAAO,MAAM,iBAAiB,KAAK,CAAC;AAIpC,eAAO,MAAM,kBAAkB,MAAM,CAAC;AACtC,eAAO,MAAM,cAAc,OAAO,CAAC;AACnC,eAAO,MAAM,cAAc,OAAO,CAAC;AACnC,eAAO,MAAM,UAAU,OAAO,CAAC;AAi6B/B,wBAAgB,GAAG,CAAC,KAAK,EAAE,QAAQ,GAAG,KAAK,CAAC,YAAY,CAMvD"}
+{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../../../src/cli/tui/App.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAA4D,MAAM,OAAO,CAAC;AAqCjF,UAAU,QAAQ;IAChB,0DAA0D;IAC1D,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,wDAAwD;IACxD,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAID,eAAO,MAAM,oBAAoB,KAAK,CAAC;AACvC,eAAO,MAAM,iBAAiB,KAAK,CAAC;AAIpC,eAAO,MAAM,kBAAkB,MAAM,CAAC;AACtC,eAAO,MAAM,cAAc,OAAO,CAAC;AACnC,eAAO,MAAM,cAAc,OAAO,CAAC;AACnC,eAAO,MAAM,UAAU,OAAO,CAAC;AAs8B/B,wBAAgB,GAAG,CAAC,KAAK,EAAE,QAAQ,GAAG,KAAK,CAAC,YAAY,CAMvD"}

package/dist/cli/tui/App.js

@@ -2,11 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Root TUI component for browsing captured HTTP traffic.
  */
-import React, { useState, useCallback, useRef, useMemo, useEffect } from "react";
+import { useState, useCallback, useRef, useMemo, useEffect } from "react";
 import { Box, Text, useInput, useApp, useStdin } from "ink";
 import { MouseProvider, useOnClick, useOnWheel, useOnMouseEnter, useOnMouseLeave } from "@ink-tools/ink-mouse";
 import { useStdoutDimensions } from "./hooks/useStdoutDimensions.js";
 import { useRequests } from "./hooks/useRequests.js";
+import { useRequestListState } from "./hooks/useRequestListState.js";
 import { useSpinner } from "./hooks/useSpinner.js";
 import { useBodyExport, generateFilename } from "./hooks/useBodyExport.js";
 import { formatSize } from "./utils/formatters.js";
@@ -66,15 +67,10 @@ function AppContent({ __testEnableInput, projectRoot }) {
     const startTime = useMemo(() => Date.now(), []);
     const { saveBody } = useBodyExport();
     const spinnerFrame = useSpinner(isLoading && requests.length === 0);
-    const [selectedIndex, setSelectedIndex] = useState(0);
     const [activePanel, setActivePanel] = useState("list");
     const [statusMessage, setStatusMessage] = useState();
     const [showFullUrl, setShowFullUrl] = useState(false);
     const [hoveredPanel, setHoveredPanel] = useState(null);
-    const [listScrollOffset, setListScrollOffset] = useState(0);
-    // Follow mode — when true, cursor tracks the newest request (index 0)
-    const [following, setFollowing] = useState(true);
-    const selectedRequestIdRef = useRef(null);
     // Accordion state — independent expand/collapse per section
     const [focusedSection, setFocusedSection] = useState(SECTION_REQUEST);
     const [expandedSections, setExpandedSections] = useState(new Set(ALL_SECTIONS_EXPANDED));
@@ -118,87 +114,80 @@ function AppContent({ __testEnableInput, projectRoot }) {
     // Ref to track whether a request is selected (for stable callbacks)
     const hasSelectedRequestRef = useRef(selectedFullRequest !== null);
     hasSelectedRequestRef.current = selectedFullRequest !== null;
-    // Refs for wheel handler to avoid stale closures
-    // (useOnWheel may not update its stored callback on every render)
-    const contentHeightRef = useRef(rows - 2);
-    contentHeightRef.current = rows - 2;
+    const filterBarHeight = showFilter ? 2 : 0;
+    const infoBarHeight = 1;
+    const contentHeight = rows - 2 - infoBarHeight - filterBarHeight;
+    const visibleListHeight = Math.max(1, contentHeight - 2);
+    const { selectedRequestId, setSelectedRequestId, setTopVisibleRequestId, pendingNewCount, setPendingNewCount, following, setFollowing, selectedIndex, effectiveListScrollOffset, selectedSummary, resetToFollowMode, } = useRequestListState({ requests, visibleListHeight });
+    // Refs for wheel/input handlers to avoid stale closures.
+    // (Ink input handlers may keep callback identity between renders.)
+    const contentHeightRef = useRef(contentHeight);
+    contentHeightRef.current = contentHeight;
     const requestsLengthRef = useRef(requests.length);
     requestsLengthRef.current = requests.length;
-    // Get the summary for the currently selected request
-    const selectedSummary = requests[selectedIndex];
-    // Re-anchor cursor when requests change, adjusting scroll offset to keep
-    // the selected item at the same visual position on screen.
-    useEffect(() => {
-        if (following) {
-            selectedRequestIdRef.current = requests[0]?.id ?? null;
-            if (requests.length > 0 && selectedIndex !== 0) {
-                setSelectedIndex(0);
-            }
-            return;
-        }
-        const targetId = selectedRequestIdRef.current;
-        if (!targetId || requests.length === 0)
-            return;
-        const newIndex = requests.findIndex((r) => r.id === targetId);
-        if (newIndex === -1) {
-            // Target request no longer in the list (e.g. filtered out or cleared).
-            // Reset the ref so the getFullRequest guard doesn't block the next fetch.
-            selectedRequestIdRef.current = null;
-        }
-        else if (newIndex !== selectedIndex) {
-            const indexDelta = newIndex - selectedIndex;
-            setSelectedIndex(newIndex);
-            setListScrollOffset((prev) => Math.max(0, prev + indexDelta));
-        }
-    }, [requests]);
+    const followingRef = useRef(following);
+    followingRef.current = following;
+    const requestsRef = useRef(requests);
+    requestsRef.current = requests;
+    const effectiveListScrollOffsetRef = useRef(0);
+    effectiveListScrollOffsetRef.current = effectiveListScrollOffset;
+    const selectedIndexRef = useRef(selectedIndex);
+    selectedIndexRef.current = selectedIndex;
     // Stores the filter state at the moment the filter bar opens, so Escape can revert
     const preOpenFilterRef = useRef({});
     const preOpenBodySearchRef = useRef(undefined);
     // Handle filter change from the filter bar
     const handleFilterChange = useCallback((newFilter) => {
         setFilter(newFilter);
-        setSelectedIndex(0);
-        selectedRequestIdRef.current = null;
-        setFollowing(true);
-    }, []);
+        resetToFollowMode();
+    }, [resetToFollowMode]);
     const handleBodySearchChange = useCallback((nextBodySearch) => {
         setBodySearch(nextBodySearch);
-        setSelectedIndex(0);
-        selectedRequestIdRef.current = null;
-        setFollowing(true);
-    }, []);
+        resetToFollowMode();
+    }, [resetToFollowMode]);
     // Handle filter cancel — revert to pre-open state
     const handleFilterCancel = useCallback(() => {
         setFilter(preOpenFilterRef.current);
         setBodySearch(preOpenBodySearchRef.current);
-        setSelectedIndex(0);
-        selectedRequestIdRef.current = null;
-        setFollowing(true);
+        resetToFollowMode();
         setShowFilter(false);
-    }, []);
+    }, [resetToFollowMode]);
     // Handle item click from the request list
     const handleItemClick = useCallback((index) => {
-        selectedRequestIdRef.current = requests[index]?.id ?? null;
-        if (following)
+        const selected = requests[index];
+        if (!selected) {
+            return;
+        }
+        if (following) {
             setFollowing(false);
-        setSelectedIndex(index);
+            setTopVisibleRequestId(requests[effectiveListScrollOffsetRef.current]?.id ?? requests[0]?.id ?? null);
+        }
+        setSelectedRequestId(selected.id);
         setActivePanel("list");
     }, [requests, following]);
-    // Fetch full request data when selection changes
+    const selectedDetailRequestIdRef = useRef(null);
+    // Fetch full request data when selection changes.
+    // Guard against stale async responses when selection changes rapidly.
     useEffect(() => {
-        if (selectedSummary) {
-            // When the list shifts (e.g. new request prepended), selectedIndex can
-            // temporarily point at the wrong row before the re-anchor effect corrects
-            // it. Skip the fetch in that case to avoid flickering the detail panel.
-            if (selectedRequestIdRef.current && selectedSummary.id !== selectedRequestIdRef.current) {
-                return;
-            }
-            void getFullRequest(selectedSummary.id).then(setSelectedFullRequest);
-        }
-        else {
+        if (!selectedSummary) {
+            selectedDetailRequestIdRef.current = null;
             setSelectedFullRequest(null);
+            return;
+        }
+        // In browse mode, wait for an explicit ID anchor before fetching detail.
+        // This avoids transient fetches for index 0 during follow->browse transitions.
+        if (!following && !selectedRequestId) {
+            return;
         }
-    }, [selectedSummary?.id, getFullRequest]);
+        const requestId = selectedSummary.id;
+        selectedDetailRequestIdRef.current = requestId;
+        void getFullRequest(requestId).then((fullRequest) => {
+            if (selectedDetailRequestIdRef.current !== requestId) {
+                return;
+            }
+            setSelectedFullRequest(fullRequest);
+        });
+    }, [selectedSummary?.id, getFullRequest, following, selectedRequestId]);
     // Reset all sections to expanded when a new request is selected
     useEffect(() => {
         if (selectedSummary) {
@@ -210,11 +199,19 @@ function AppContent({ __testEnableInput, projectRoot }) {
         // Use refs to avoid stale closures if useOnWheel caches the callback
         const visibleHeight = Math.max(1, contentHeightRef.current - 2);
         const maxOffset = Math.max(0, requestsLengthRef.current - visibleHeight);
+        const currentOffset = effectiveListScrollOffsetRef.current;
+        const currentRequests = requestsRef.current;
+        if (followingRef.current) {
+            setFollowing(false);
+            setTopVisibleRequestId(currentRequests[currentOffset]?.id ?? currentRequests[0]?.id ?? null);
+        }
         if (event.button === "wheel-up") {
-            setListScrollOffset((prev) => Math.max(prev - 1, 0));
+            const nextOffset = Math.max(currentOffset - 1, 0);
+            setTopVisibleRequestId(currentRequests[nextOffset]?.id ?? null);
         }
         else if (event.button === "wheel-down") {
-            setListScrollOffset((prev) => Math.min(prev + 1, maxOffset));
+            const nextOffset = Math.min(currentOffset + 1, maxOffset);
+            setTopVisibleRequestId(currentRequests[nextOffset]?.id ?? null);
         }
     });
     // Handle click on panels to activate them
@@ -341,8 +338,7 @@ function AppContent({ __testEnableInput, projectRoot }) {
         if (pendingClear) {
             setPendingClear(false);
             if (input === "y") {
-                selectedRequestIdRef.current = null;
-                setFollowing(true);
+                resetToFollowMode();
                 void clearRequests().then((success) => {
                     showStatus(success ? "Requests cleared (bookmarks preserved)" : "Failed to clear requests");
                 });
@@ -355,11 +351,14 @@ function AppContent({ __testEnableInput, projectRoot }) {
         // Navigation - behaviour depends on active panel
         if (input === "j" || key.downArrow) {
             if (activePanel === "list") {
-                if (following)
+                const currentRequests = requestsRef.current;
+                const currentIndex = Math.max(0, selectedIndexRef.current);
+                const newIdx = Math.min(currentIndex + 1, currentRequests.length - 1);
+                if (followingRef.current) {
                     setFollowing(false);
-                const newIdx = Math.min(selectedIndex + 1, requests.length - 1);
-                selectedRequestIdRef.current = requests[newIdx]?.id ?? null;
-                setSelectedIndex(newIdx);
+                    setTopVisibleRequestId(currentRequests[effectiveListScrollOffsetRef.current]?.id ?? currentRequests[0]?.id ?? null);
+                }
+                setSelectedRequestId(currentRequests[newIdx]?.id ?? null);
             }
             else {
                 // Navigate sections in accordion
@@ -368,11 +367,14 @@ function AppContent({ __testEnableInput, projectRoot }) {
         }
         else if (input === "k" || key.upArrow) {
             if (activePanel === "list") {
-                if (following)
+                const currentRequests = requestsRef.current;
+                const currentIndex = Math.max(0, selectedIndexRef.current);
+                const newIdx = Math.max(currentIndex - 1, 0);
+                if (followingRef.current) {
                     setFollowing(false);
-                const newIdx = Math.max(selectedIndex - 1, 0);
-                selectedRequestIdRef.current = requests[newIdx]?.id ?? null;
-                setSelectedIndex(newIdx);
+                    setTopVisibleRequestId(currentRequests[effectiveListScrollOffsetRef.current]?.id ?? currentRequests[0]?.id ?? null);
+                }
+                setSelectedRequestId(currentRequests[newIdx]?.id ?? null);
             }
             else {
                 // Navigate sections in accordion
@@ -382,9 +384,7 @@ function AppContent({ __testEnableInput, projectRoot }) {
         else if (input === "g" && !key.shift) {
             // Jump to first item/section — re-enters follow mode in list
             if (activePanel === "list") {
-                selectedRequestIdRef.current = requests[0]?.id ?? null;
-                setSelectedIndex(0);
-                setFollowing(true);
+                resetToFollowMode();
             }
             else {
                 setFocusedSection(SECTION_REQUEST);
@@ -393,11 +393,13 @@ function AppContent({ __testEnableInput, projectRoot }) {
         else if (input === "G") {
             // Jump to last item/section
             if (activePanel === "list") {
-                const lastIdx = Math.max(0, requestsLengthRef.current - 1);
-                if (following)
+                const currentRequests = requestsRef.current;
+                const lastIdx = Math.max(0, currentRequests.length - 1);
+                if (followingRef.current) {
                     setFollowing(false);
-                selectedRequestIdRef.current = requests[lastIdx]?.id ?? null;
-                setSelectedIndex(lastIdx);
+                }
+                setTopVisibleRequestId(currentRequests[Math.max(0, lastIdx - visibleListHeight + 1)]?.id ?? currentRequests[0]?.id ?? null);
+                setSelectedRequestId(currentRequests[lastIdx]?.id ?? null);
             }
             else {
                 setFocusedSection(SECTION_RESPONSE_BODY);
@@ -406,23 +408,29 @@ function AppContent({ __testEnableInput, projectRoot }) {
         else if (input === "u" && key.ctrl) {
             // Half-page up (list only)
             if (activePanel === "list") {
+                const currentRequests = requestsRef.current;
+                const currentIndex = Math.max(0, selectedIndexRef.current);
                 const halfPage = Math.floor(contentHeightRef.current / 2);
-                const newIdx = Math.max(selectedIndex - halfPage, 0);
-                if (following)
+                const newIdx = Math.max(currentIndex - halfPage, 0);
+                if (followingRef.current) {
                     setFollowing(false);
-                selectedRequestIdRef.current = requests[newIdx]?.id ?? null;
-                setSelectedIndex(newIdx);
+                    setTopVisibleRequestId(currentRequests[effectiveListScrollOffsetRef.current]?.id ?? currentRequests[0]?.id ?? null);
+                }
+                setSelectedRequestId(currentRequests[newIdx]?.id ?? null);
             }
         }
         else if (input === "d" && key.ctrl) {
             // Half-page down (list only)
             if (activePanel === "list") {
+                const currentRequests = requestsRef.current;
+                const currentIndex = Math.max(0, selectedIndexRef.current);
                 const halfPage = Math.floor(contentHeightRef.current / 2);
-                const newIdx = Math.min(selectedIndex + halfPage, requestsLengthRef.current - 1);
-                if (following)
+                const newIdx = Math.min(currentIndex + halfPage, currentRequests.length - 1);
+                if (followingRef.current) {
                     setFollowing(false);
-                selectedRequestIdRef.current = requests[newIdx]?.id ?? null;
-                setSelectedIndex(newIdx);
+                    setTopVisibleRequestId(currentRequests[effectiveListScrollOffsetRef.current]?.id ?? currentRequests[0]?.id ?? null);
+                }
+                setSelectedRequestId(currentRequests[newIdx]?.id ?? null);
             }
         }
         else if (key.tab) {
@@ -581,33 +589,47 @@ function AppContent({ __testEnableInput, projectRoot }) {
         else if (input === "F" && !key.ctrl) {
             // Toggle follow mode
             setFollowing((prev) => {
-                if (!prev) {
-                    selectedRequestIdRef.current = requests[0]?.id ?? null;
-                    setSelectedIndex(0);
+                const next = !prev;
+                if (next) {
+                    setSelectedRequestId(null);
+                    setTopVisibleRequestId(null);
+                    setPendingNewCount(0);
                 }
-                return !prev;
+                else {
+                    const currentRequests = requestsRef.current;
+                    const anchorOffset = effectiveListScrollOffsetRef.current;
+                    setSelectedRequestId(currentRequests[Math.max(0, selectedIndexRef.current)]?.id ?? currentRequests[0]?.id ?? null);
+                    setTopVisibleRequestId(currentRequests[anchorOffset]?.id ?? currentRequests[0]?.id ?? null);
+                }
+                return next;
             });
         }
         else if (input === "f" && key.ctrl) {
             // Full-page down (list only)
             if (activePanel === "list") {
+                const currentRequests = requestsRef.current;
                 const fullPage = contentHeightRef.current;
-                const newIdx = Math.min(selectedIndex + fullPage, requestsLengthRef.current - 1);
-                if (following)
+                const currentIndex = Math.max(0, selectedIndexRef.current);
+                const newIdx = Math.min(currentIndex + fullPage, requestsLengthRef.current - 1);
+                if (followingRef.current) {
                     setFollowing(false);
-                selectedRequestIdRef.current = requests[newIdx]?.id ?? null;
-                setSelectedIndex(newIdx);
+                    setTopVisibleRequestId(currentRequests[effectiveListScrollOffsetRef.current]?.id ?? currentRequests[0]?.id ?? null);
+                }
+                setSelectedRequestId(currentRequests[newIdx]?.id ?? null);
             }
         }
         else if (input === "b" && key.ctrl) {
             // Full-page up (list only)
             if (activePanel === "list") {
+                const currentRequests = requestsRef.current;
                 const fullPage = contentHeightRef.current;
-                const newIdx = Math.max(selectedIndex - fullPage, 0);
-                if (following)
+                const currentIndex = Math.max(0, selectedIndexRef.current);
+                const newIdx = Math.max(currentIndex - fullPage, 0);
+                if (followingRef.current) {
                     setFollowing(false);
-                selectedRequestIdRef.current = requests[newIdx]?.id ?? null;
-                setSelectedIndex(newIdx);
+                    setTopVisibleRequestId(currentRequests[effectiveListScrollOffsetRef.current]?.id ?? currentRequests[0]?.id ?? null);
+                }
+                setSelectedRequestId(currentRequests[newIdx]?.id ?? null);
             }
         }
         else if (input === "u" && !key.ctrl) {
@@ -686,27 +708,6 @@ function AppContent({ __testEnableInput, projectRoot }) {
     const hasSelectedRequest = selectedFullRequest !== null;
     const listWidth = hasSelectedRequest ? Math.floor(columns * listWidthRatio) : columns;
     const accordionWidth = columns - listWidth;
-    // Status bar takes 2 rows (border line + content line), InfoBar takes 1 row, filter bar takes 2 rows when visible
-    const filterBarHeight = showFilter ? 2 : 0;
-    const infoBarHeight = 1;
-    const contentHeight = rows - 2 - infoBarHeight - filterBarHeight;
-    // Keep selection in bounds when requests change
-    React.useEffect(() => {
-        if (selectedIndex >= requests.length && requests.length > 0) {
-            setSelectedIndex(requests.length - 1);
-        }
-    }, [requests.length, selectedIndex]);
-    // Auto-scroll list view when selection moves outside visible area
-    React.useEffect(() => {
-        const visibleHeight = Math.max(1, contentHeight - 2);
-        if (selectedIndex < listScrollOffset) {
-            setListScrollOffset(selectedIndex);
-        }
-        else if (selectedIndex >= listScrollOffset + visibleHeight) {
-            setListScrollOffset(selectedIndex - visibleHeight + 1);
-        }
-        // Intentionally omit listScrollOffset to allow free mouse wheel scrolling
-    }, [selectedIndex, contentHeight]);
     // Terminal size check — re-evaluates on resize via useStdoutDimensions
     if (columns < MIN_TERMINAL_COLUMNS || rows < MIN_TERMINAL_ROWS) {
         return (_jsxs(Box, { flexDirection: "column", alignItems: "center", justifyContent: "center", height: rows, width: columns, children: [_jsx(Text, { color: "red", bold: true, children: "Terminal too small" }), _jsx(Text, { children: " " }), _jsxs(Text, { children: ["Current: ", columns, "x", rows] }), _jsxs(Text, { children: ["Required: ", MIN_TERMINAL_COLUMNS, "x", MIN_TERMINAL_ROWS] }), _jsx(Text, { children: " " }), _jsx(Text, { dimColor: true, children: "Please resize your terminal." })] }));
@@ -757,7 +758,7 @@ function AppContent({ __testEnableInput, projectRoot }) {
     if (showTextViewer && textViewerData) {
         return (_jsx(TextViewerModal, { text: textViewerData.text, title: textViewerData.title, contentType: textViewerData.contentType, bodySize: textViewerData.bodySize, width: columns, height: rows, onClose: () => setShowTextViewer(false), onStatus: showStatus, isActive: __testEnableInput || isRawModeSupported === true }));
     }
-    return (_jsxs(Box, { flexDirection: "column", height: rows, children: [_jsxs(Box, { flexDirection: "row", height: contentHeight, children: [_jsx(RequestList, { ref: listPanelRef, requests: requests, selectedIndex: selectedIndex, isActive: activePanel === "list", isHovered: hoveredPanel === "list", width: listWidth, height: contentHeight, showFullUrl: showFullUrl, onItemClick: handleItemClick, scrollOffset: listScrollOffset, searchTerm: bodySearch ? undefined : filter.search }), hasSelectedRequest && (_jsx(AccordionPanel, { ref: accordionPanelRef, request: selectedFullRequest, isActive: activePanel === "accordion", width: accordionWidth, height: contentHeight, focusedSection: focusedSection, expandedSections: expandedSections }))] }), showFilter && (_jsx(FilterBar, { isActive: (__testEnableInput || isRawModeSupported === true) && showFilter, filter: filter, bodySearch: bodySearch, onFilterChange: handleFilterChange, onBodySearchChange: handleBodySearchChange, onClose: () => setShowFilter(false), onCancel: handleFilterCancel, width: columns })), _jsx(InfoBar, { interceptorErrorCount: interceptorEvents.counts.error, requestCount: requests.length, interceptorCount: interceptorEvents.interceptorCount, startTime: startTime, width: columns }), _jsx(StatusBar, { message: statusMessage, filterActive: isFilterActive(filter) || bodySearch !== undefined, filterOpen: showFilter, following: following, hasSelection: selectedFullRequest !== null, hasRequests: requests.length > 0, onViewableBodySection: currentBodyIsExportable && !currentBodyIsBinary, interceptorCount: interceptorEvents.interceptorCount, interceptorErrorCount: interceptorEvents.counts.error })] }));
+    return (_jsxs(Box, { flexDirection: "column", height: rows, children: [_jsxs(Box, { flexDirection: "row", height: contentHeight, children: [_jsx(RequestList, { ref: listPanelRef, requests: requests, selectedIndex: selectedIndex, isActive: activePanel === "list", isHovered: hoveredPanel === "list", width: listWidth, height: contentHeight, showFullUrl: showFullUrl, onItemClick: handleItemClick, scrollOffset: effectiveListScrollOffset, searchTerm: bodySearch ? undefined : filter.search, following: following, pendingNewCount: pendingNewCount }), hasSelectedRequest && (_jsx(AccordionPanel, { ref: accordionPanelRef, request: selectedFullRequest, isActive: activePanel === "accordion", width: accordionWidth, height: contentHeight, focusedSection: focusedSection, expandedSections: expandedSections }))] }), showFilter && (_jsx(FilterBar, { isActive: (__testEnableInput || isRawModeSupported === true) && showFilter, filter: filter, bodySearch: bodySearch, onFilterChange: handleFilterChange, onBodySearchChange: handleBodySearchChange, onClose: () => setShowFilter(false), onCancel: handleFilterCancel, width: columns })), _jsx(InfoBar, { interceptorErrorCount: interceptorEvents.counts.error, requestCount: requests.length, interceptorCount: interceptorEvents.interceptorCount, startTime: startTime, width: columns }), _jsx(StatusBar, { message: statusMessage, filterActive: isFilterActive(filter) || bodySearch !== undefined, filterOpen: showFilter, following: following, hasSelection: selectedFullRequest !== null, hasRequests: requests.length > 0, onViewableBodySection: currentBodyIsExportable && !currentBodyIsBinary, interceptorCount: interceptorEvents.interceptorCount, interceptorErrorCount: interceptorEvents.counts.error })] }));
 }
 export function App(props) {
     return (_jsx(MouseProvider, { children: _jsx(AppContent, { ...props }) }));