peep-proxy 0.1.0

package/dist/components/RequestRow.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from "ink";
+import { PRIMARY_COLOR } from "../theme.js";
+const METHOD_COLORS = {
+    GET: "green",
+    POST: "yellow",
+    PUT: "blue",
+    DELETE: "red",
+    PATCH: "magenta",
+};
+function formatMethod(method, width) {
+    return method.slice(0, width).padEnd(width);
+}
+function formatStatus(entry, width) {
+    if (entry.state === "pending")
+        return "---".padEnd(width);
+    if (entry.state === "error")
+        return "ERR".padEnd(width);
+    const code = String(entry.response?.statusCode ?? "---");
+    return code.slice(0, width).padEnd(width);
+}
+function getStatusColor(entry) {
+    if (entry.state === "pending")
+        return undefined;
+    if (entry.state === "error")
+        return "red";
+    const code = entry.response?.statusCode;
+    if (!code)
+        return undefined;
+    if (code < 300)
+        return "green";
+    if (code < 400)
+        return "cyan";
+    if (code < 500)
+        return "yellow";
+    return "red";
+}
+function formatDuration(entry, width) {
+    if (entry.state === "pending")
+        return "...".padEnd(width);
+    const ms = entry.response?.duration;
+    if (ms === undefined)
+        return "---".padEnd(width);
+    const text = ms >= 1000 ? `${(ms / 1000).toFixed(1)}s` : `${Math.round(ms)}ms`;
+    return text.slice(0, width).padEnd(width);
+}
+function formatSize(entry, width) {
+    if (entry.state === "pending" || !entry.response)
+        return "...".padEnd(width);
+    const bytes = entry.response.body.length;
+    let text;
+    if (bytes >= 1000000) {
+        text = `${(bytes / 1000000).toFixed(1)}M`;
+    }
+    else if (bytes >= 1000) {
+        text = `${(bytes / 1000).toFixed(1)}K`;
+    }
+    else {
+        text = `${bytes}B`;
+    }
+    return text.slice(0, width).padEnd(width);
+}
+function truncate(text, maxLen) {
+    if (text.length <= maxLen)
+        return text.padEnd(maxLen);
+    return `${text.slice(0, maxLen - 1)}…`;
+}
+function formatSeq(seq, width) {
+    return String(seq).slice(0, width).padStart(width);
+}
+export function RequestRow({ entry, isSelected, columnWidths }) {
+    const id = formatSeq(entry.seq, columnWidths.id);
+    const method = formatMethod(entry.request.method, columnWidths.method);
+    const url = truncate(entry.request.path, columnWidths.url);
+    const status = formatStatus(entry, columnWidths.status);
+    const duration = formatDuration(entry, columnWidths.duration);
+    const size = formatSize(entry, columnWidths.size);
+    const methodColor = METHOD_COLORS[entry.request.method] ?? "white";
+    const statusColor = getStatusColor(entry);
+    if (isSelected) {
+        return (_jsxs(Text, { backgroundColor: PRIMARY_COLOR, color: "black", children: [_jsx(Text, { children: " " }), _jsx(Text, { children: id }), _jsx(Text, { children: " " }), _jsx(Text, { children: method }), _jsx(Text, { children: " " }), _jsx(Text, { children: url }), _jsx(Text, { children: " " }), _jsx(Text, { children: status }), _jsx(Text, { children: " " }), _jsx(Text, { children: duration }), _jsx(Text, { children: " " }), _jsx(Text, { children: size })] }));
+    }
+    return (_jsxs(Text, { children: [_jsx(Text, { children: " " }), _jsx(Text, { dimColor: true, children: id }), _jsx(Text, { children: " " }), _jsx(Text, { color: methodColor, children: method }), _jsx(Text, { children: " " }), _jsx(Text, { children: url }), _jsx(Text, { children: " " }), _jsx(Text, { color: statusColor, dimColor: entry.state === "pending", children: status }), _jsx(Text, { children: " " }), _jsx(Text, { dimColor: entry.state === "pending", children: duration }), _jsx(Text, { children: " " }), _jsx(Text, { dimColor: entry.state === "pending", children: size })] }));
+}

package/dist/components/SortModal.d.ts

@@ -0,0 +1,8 @@
+import type { SortColumn, SortConfig } from "../hooks/useSorting.js";
+type Props = {
+    sortConfig: SortConfig | null;
+    onSelect: (column: SortColumn) => void;
+    onClose: () => void;
+};
+export declare function SortModal({ sortConfig, onSelect, onClose }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/SortModal.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text, useInput } from "ink";
+import { useState } from "react";
+import { PRIMARY_COLOR } from "../theme.js";
+const COLUMNS = [
+    { column: "id", label: "#" },
+    { column: "method", label: "Method" },
+    { column: "url", label: "URL" },
+    { column: "status", label: "Status" },
+    { column: "duration", label: "Time" },
+    { column: "size", label: "Size" },
+];
+export function SortModal({ sortConfig, onSelect, onClose }) {
+    const activeIndex = sortConfig
+        ? COLUMNS.findIndex((c) => c.column === sortConfig.column)
+        : -1;
+    const [selectedIndex, setSelectedIndex] = useState(activeIndex >= 0 ? activeIndex : 0);
+    useInput((input, key) => {
+        if (key.escape) {
+            onClose();
+            return;
+        }
+        if (key.return) {
+            const item = COLUMNS[selectedIndex];
+            if (item)
+                onSelect(item.column);
+            return;
+        }
+        if (input === "j" || key.downArrow) {
+            setSelectedIndex((i) => Math.min(i + 1, COLUMNS.length - 1));
+            return;
+        }
+        if (input === "k" || key.upArrow) {
+            setSelectedIndex((i) => Math.max(i - 1, 0));
+        }
+    });
+    const innerWidth = 20;
+    const title = " Sort by ";
+    const remaining = Math.max(0, innerWidth - title.length - 1);
+    const topLine = `┌─${title}${"─".repeat(remaining)}┐`;
+    const bottomLine = `└${"─".repeat(innerWidth)}┘`;
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, color: PRIMARY_COLOR, children: topLine }), COLUMNS.map(({ column, label }, i) => {
+                const isActive = sortConfig?.column === column;
+                const arrow = isActive
+                    ? sortConfig.direction === "asc"
+                        ? " ▲"
+                        : " ▼"
+                    : "";
+                const text = ` ${label}${arrow}`;
+                const padded = text.padEnd(innerWidth);
+                if (i === selectedIndex) {
+                    return (_jsxs(Text, { children: [_jsx(Text, { color: PRIMARY_COLOR, children: "\u2502" }), _jsx(Text, { backgroundColor: PRIMARY_COLOR, color: "black", bold: true, children: padded }), _jsx(Text, { color: PRIMARY_COLOR, children: "\u2502" })] }, column));
+                }
+                return (_jsxs(Text, { children: [_jsx(Text, { color: PRIMARY_COLOR, children: "\u2502" }), _jsx(Text, { bold: isActive, children: padded }), _jsx(Text, { color: PRIMARY_COLOR, children: "\u2502" })] }, column));
+            }), _jsx(Text, { bold: true, color: PRIMARY_COLOR, children: bottomLine })] }));
+}

package/dist/components/SpinnerContext.d.ts

@@ -0,0 +1,5 @@
+import type { ReactNode } from "react";
+export declare function SpinnerProvider({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function Spinner(): import("react/jsx-runtime").JSX.Element;

package/dist/components/SpinnerContext.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from "ink";
+import { createContext, useContext, useEffect, useState } from "react";
+const FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+const INTERVAL = 80;
+const SpinnerFrameContext = createContext(0);
+export function SpinnerProvider({ children }) {
+    const [frame, setFrame] = useState(0);
+    useEffect(() => {
+        const timer = setInterval(() => {
+            setFrame((prev) => (prev + 1) % FRAMES.length);
+        }, INTERVAL);
+        return () => clearInterval(timer);
+    }, []);
+    return (_jsx(SpinnerFrameContext.Provider, { value: frame, children: children }));
+}
+export function Spinner() {
+    const frame = useContext(SpinnerFrameContext);
+    return _jsx(Text, { children: FRAMES[frame] });
+}

package/dist/components/StatusBar.d.ts

@@ -0,0 +1,11 @@
+import type { Panel } from "../hooks/useActivePanel.js";
+type Props = {
+    port: number;
+    requestCount: number;
+    selectedIndex: number;
+    columns: number;
+    activePanel: Panel;
+    notification?: string;
+};
+export declare function StatusBar({ port, requestCount, selectedIndex, columns, activePanel, notification, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/StatusBar.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+const HINTS = {
+    sidebar: "j/k:scroll  h/l:group  Enter:select  q:quit",
+    list: "j/k:scroll  Enter:detail  Esc:sidebar  s:sort  q:quit",
+    request: "j/k:scroll  h/l:tab  y:copy  Tab:response  Esc:list  q:quit",
+    response: "j/k:scroll  h/l:tab  y:copy  Tab:request  Esc:list  q:quit",
+};
+export function StatusBar({ port, requestCount, selectedIndex, columns, activePanel, notification, }) {
+    const left = notification
+        ? `✓ ${notification}`
+        : `Proxy :${port} | ${requestCount} request${requestCount !== 1 ? "s" : ""}`;
+    const position = !notification && requestCount > 0
+        ? ` [${selectedIndex + 1}/${requestCount}]`
+        : "";
+    const right = HINTS[activePanel];
+    const leftFull = left + position;
+    const content = ` ${leftFull}${" ".repeat(Math.max(1, columns - leftFull.length - right.length - 2))}${right} `;
+    const line = content.slice(0, columns);
+    return (_jsx(Box, { children: _jsx(Text, { dimColor: true, inverse: true, children: line }) }));
+}

package/dist/hooks/useActivePanel.d.ts

@@ -0,0 +1,11 @@
+export type Panel = "sidebar" | "list" | "request" | "response";
+type Options = {
+    hasSelection: boolean;
+    awaitingColumn: boolean;
+};
+type Result = {
+    activePanel: Panel;
+    setActivePanel: (panel: Panel) => void;
+};
+export declare function useActivePanel({ hasSelection, awaitingColumn, }: Options): Result;
+export {};

package/dist/hooks/useActivePanel.js

@@ -0,0 +1,36 @@
+import { useInput } from "ink";
+import { useEffect, useState } from "react";
+export function useActivePanel({ hasSelection, awaitingColumn, }) {
+    const [activePanel, setActivePanel] = useState("sidebar");
+    // Reset to list when selection is lost (but keep sidebar accessible)
+    useEffect(() => {
+        if (!hasSelection &&
+            (activePanel === "request" || activePanel === "response")) {
+            setActivePanel("list");
+        }
+    }, [hasSelection, activePanel]);
+    useInput((_input, key) => {
+        if (awaitingColumn)
+            return;
+        // Esc: detail → list, list → sidebar
+        if (key.escape) {
+            if (activePanel === "request" || activePanel === "response") {
+                setActivePanel("list");
+            }
+            else if (activePanel === "list") {
+                setActivePanel("sidebar");
+            }
+            return;
+        }
+        // Tab toggles request ↔ response in detail view
+        if (key.tab) {
+            if (activePanel === "request") {
+                setActivePanel("response");
+            }
+            else if (activePanel === "response") {
+                setActivePanel("request");
+            }
+        }
+    }, { isActive: activePanel !== "sidebar" });
+    return { activePanel, setActivePanel };
+}

package/dist/hooks/useDetailScroll.d.ts

@@ -0,0 +1,11 @@
+type Options = {
+    contentHeight: number;
+    viewportHeight: number;
+    isActive: boolean;
+};
+type Result = {
+    scrollOffset: number;
+    resetScroll: () => void;
+};
+export declare function useDetailScroll({ contentHeight, viewportHeight, isActive, }: Options): Result;
+export {};

package/dist/hooks/useDetailScroll.js

@@ -0,0 +1,59 @@
+import { useInput } from "ink";
+import { useCallback, useEffect, useRef, useState } from "react";
+const GG_TIMEOUT = 500;
+export function useDetailScroll({ contentHeight, viewportHeight, isActive, }) {
+    const [scrollOffset, setScrollOffset] = useState(0);
+    const gPressedAt = useRef(null);
+    const maxOffset = Math.max(0, contentHeight - viewportHeight);
+    // Clamp scroll when content shrinks
+    useEffect(() => {
+        setScrollOffset((prev) => Math.min(prev, maxOffset));
+    }, [maxOffset]);
+    const clamp = useCallback((offset) => Math.max(0, Math.min(offset, maxOffset)), [maxOffset]);
+    const resetScroll = useCallback(() => {
+        setScrollOffset(0);
+    }, []);
+    useInput((input, key) => {
+        // j / ↓ — scroll down
+        if (input === "j" || key.downArrow) {
+            setScrollOffset((o) => clamp(o + 1));
+            return;
+        }
+        // k / ↑ — scroll up
+        if (input === "k" || key.upArrow) {
+            setScrollOffset((o) => clamp(o - 1));
+            return;
+        }
+        // G — jump to bottom
+        if (input === "G") {
+            setScrollOffset(maxOffset);
+            return;
+        }
+        // g — gg detection
+        if (input === "g") {
+            const now = Date.now();
+            if (gPressedAt.current !== null &&
+                now - gPressedAt.current < GG_TIMEOUT) {
+                setScrollOffset(0);
+                gPressedAt.current = null;
+            }
+            else {
+                gPressedAt.current = now;
+            }
+            return;
+        }
+        // Ctrl+d — half page down
+        if (key.ctrl && input === "d") {
+            setScrollOffset((o) => clamp(o + Math.floor(viewportHeight / 2)));
+            return;
+        }
+        // Ctrl+u — half page up
+        if (key.ctrl && input === "u") {
+            setScrollOffset((o) => clamp(o - Math.floor(viewportHeight / 2)));
+            return;
+        }
+        // Any other key resets gg state
+        gPressedAt.current = null;
+    }, { isActive });
+    return { scrollOffset, resetScroll };
+}

package/dist/hooks/useDetailTabs.d.ts

@@ -0,0 +1,14 @@
+import type { TrafficEntry } from "../store/index.js";
+import type { Panel } from "./useActivePanel.js";
+export type DetailTab = "headers" | "body" | "raw";
+type Options = {
+    activePanel: Panel;
+    selectedEntry?: TrafficEntry;
+};
+type Result = {
+    requestTab: DetailTab;
+    responseTab: DetailTab;
+    notification: string;
+};
+export declare function useDetailTabs({ activePanel, selectedEntry }: Options): Result;
+export {};

package/dist/hooks/useDetailTabs.js

@@ -0,0 +1,50 @@
+import { useInput } from "ink";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { copyToClipboard } from "../utils/copyToClipboard.js";
+import { getTabText } from "../utils/getTabText.js";
+const TABS = ["body", "headers", "raw"];
+export function useDetailTabs({ activePanel, selectedEntry }) {
+    const [requestTab, setRequestTab] = useState("body");
+    const [responseTab, setResponseTab] = useState("body");
+    const [notification, setNotification] = useState("");
+    const timerRef = useRef();
+    const clearNotification = useCallback(() => {
+        setNotification("");
+    }, []);
+    useEffect(() => {
+        return () => {
+            if (timerRef.current)
+                clearTimeout(timerRef.current);
+        };
+    }, []);
+    useInput((input) => {
+        const isDetail = activePanel === "request" || activePanel === "response";
+        if (!isDetail)
+            return;
+        if (input === "y" && selectedEntry) {
+            const side = activePanel;
+            const tab = side === "request" ? requestTab : responseTab;
+            const text = getTabText(selectedEntry, side, tab);
+            copyToClipboard(text);
+            setNotification("Copied!");
+            if (timerRef.current)
+                clearTimeout(timerRef.current);
+            timerRef.current = setTimeout(clearNotification, 2000);
+            return;
+        }
+        const setter = activePanel === "request" ? setRequestTab : setResponseTab;
+        const current = activePanel === "request" ? requestTab : responseTab;
+        const idx = TABS.indexOf(current);
+        if (input === "l") {
+            const next = TABS[idx + 1];
+            if (next)
+                setter(next);
+        }
+        else if (input === "h") {
+            const prev = TABS[idx - 1];
+            if (prev)
+                setter(prev);
+        }
+    }, { isActive: activePanel === "request" || activePanel === "response" });
+    return { requestTab, responseTab, notification };
+}

package/dist/hooks/useDomainFilter.d.ts

@@ -0,0 +1,30 @@
+import type { TrafficEntry } from "../store/index.js";
+export type SidebarItem = {
+    type: "all";
+    count: number;
+} | {
+    type: "group";
+    baseDomain: string;
+    count: number;
+    expanded: boolean;
+} | {
+    type: "domain";
+    host: string;
+    count: number;
+    grouped: boolean;
+};
+export type DomainGroup = {
+    baseDomain: string;
+    domains: {
+        host: string;
+        count: number;
+    }[];
+    totalCount: number;
+};
+export declare function useDomainGroups(entries: TrafficEntry[]): {
+    visibleItems: SidebarItem[];
+    groups: DomainGroup[];
+    toggleAtIndex: (index: number) => void;
+    expandAtIndex: (index: number) => void;
+    collapseAtIndex: (index: number) => void;
+};

package/dist/hooks/useDomainFilter.js

@@ -0,0 +1,103 @@
+import { useCallback, useMemo, useState } from "react";
+function getBaseDomain(host) {
+    const parts = host.split(".");
+    if (parts.length <= 2)
+        return host;
+    return parts.slice(-2).join(".");
+}
+export function useDomainGroups(entries) {
+    const [expandedGroups, setExpandedGroups] = useState(new Set());
+    const groups = useMemo(() => {
+        const counts = new Map();
+        for (const entry of entries) {
+            const host = entry.request.host;
+            counts.set(host, (counts.get(host) ?? 0) + 1);
+        }
+        const groupMap = new Map();
+        for (const [host, count] of counts) {
+            const base = getBaseDomain(host);
+            if (!groupMap.has(base))
+                groupMap.set(base, []);
+            groupMap.get(base)?.push({ host, count });
+        }
+        const result = [];
+        for (const [baseDomain, domains] of groupMap) {
+            domains.sort((a, b) => a.host.localeCompare(b.host));
+            const totalCount = domains.reduce((sum, d) => sum + d.count, 0);
+            result.push({ baseDomain, domains, totalCount });
+        }
+        result.sort((a, b) => a.baseDomain.localeCompare(b.baseDomain));
+        return result;
+    }, [entries]);
+    const visibleItems = useMemo(() => {
+        const items = [{ type: "all", count: entries.length }];
+        for (const group of groups) {
+            if (group.domains.length === 1) {
+                items.push({
+                    type: "domain",
+                    host: group.domains[0]?.host ?? "",
+                    count: group.domains[0]?.count ?? 0,
+                    grouped: false,
+                });
+            }
+            else {
+                const expanded = expandedGroups.has(group.baseDomain);
+                items.push({
+                    type: "group",
+                    baseDomain: group.baseDomain,
+                    count: group.totalCount,
+                    expanded,
+                });
+                if (expanded) {
+                    for (const domain of group.domains) {
+                        items.push({
+                            type: "domain",
+                            host: domain.host,
+                            count: domain.count,
+                            grouped: true,
+                        });
+                    }
+                }
+            }
+        }
+        return items;
+    }, [groups, expandedGroups, entries.length]);
+    const toggleAtIndex = useCallback((index) => {
+        const item = visibleItems[index];
+        if (!item || item.type !== "group")
+            return;
+        setExpandedGroups((prev) => {
+            const next = new Set(prev);
+            if (next.has(item.baseDomain)) {
+                next.delete(item.baseDomain);
+            }
+            else {
+                next.add(item.baseDomain);
+            }
+            return next;
+        });
+    }, [visibleItems]);
+    const expandAtIndex = useCallback((index) => {
+        const item = visibleItems[index];
+        if (!item || item.type !== "group" || item.expanded)
+            return;
+        setExpandedGroups((prev) => new Set([...prev, item.baseDomain]));
+    }, [visibleItems]);
+    const collapseAtIndex = useCallback((index) => {
+        const item = visibleItems[index];
+        if (!item || item.type !== "group" || !item.expanded)
+            return;
+        setExpandedGroups((prev) => {
+            const next = new Set(prev);
+            next.delete(item.baseDomain);
+            return next;
+        });
+    }, [visibleItems]);
+    return {
+        visibleItems,
+        groups,
+        toggleAtIndex,
+        expandAtIndex,
+        collapseAtIndex,
+    };
+}

package/dist/hooks/useListNavigation.d.ts

@@ -0,0 +1,12 @@
+type Options = {
+    itemCount: number;
+    viewportHeight: number;
+    isActive?: boolean;
+    keys?: string[];
+};
+type Result = {
+    selectedIndex: number;
+    scrollOffset: number;
+};
+export declare function useListNavigation({ itemCount, viewportHeight, isActive, keys, }: Options): Result;
+export {};

package/dist/hooks/useListNavigation.js

@@ -0,0 +1,105 @@
+import { useInput } from "ink";
+import { useCallback, useEffect, useRef, useState } from "react";
+const GG_TIMEOUT = 500;
+export function useListNavigation({ itemCount, viewportHeight, isActive = true, keys, }) {
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const gPressedAt = useRef(null);
+    const prevItemCount = useRef(itemCount);
+    const prevKeysRef = useRef(keys);
+    const selectedRef = useRef(selectedIndex);
+    selectedRef.current = selectedIndex;
+    // Key-based stabilization: when keys change, find the previously selected
+    // key in the new array and move the index to match
+    useEffect(() => {
+        const prev = prevKeysRef.current;
+        prevKeysRef.current = keys;
+        if (!keys || !prev)
+            return;
+        const prevKey = prev[selectedRef.current];
+        if (!prevKey)
+            return;
+        const newIdx = keys.indexOf(prevKey);
+        if (newIdx !== -1 && newIdx !== selectedRef.current) {
+            setSelectedIndex(newIdx);
+        }
+    }, [keys]);
+    // Auto-follow: if user was at the last item and a new one arrives, stay at bottom
+    // Disabled when keys are provided (keyed lists stabilize by identity instead)
+    useEffect(() => {
+        if (keys) {
+            prevItemCount.current = itemCount;
+            return;
+        }
+        const wasAtEnd = selectedIndex === prevItemCount.current - 1;
+        prevItemCount.current = itemCount;
+        if (wasAtEnd && itemCount > 0) {
+            setSelectedIndex(itemCount - 1);
+        }
+    }, [itemCount, selectedIndex, keys]);
+    // Clamp selectedIndex if itemCount shrinks
+    useEffect(() => {
+        if (itemCount === 0) {
+            setSelectedIndex(0);
+        }
+        else if (selectedIndex >= itemCount) {
+            setSelectedIndex(itemCount - 1);
+        }
+    }, [itemCount, selectedIndex]);
+    const clamp = useCallback((index) => Math.max(0, Math.min(index, itemCount - 1)), [itemCount]);
+    useInput((input, key) => {
+        if (itemCount === 0)
+            return;
+        // j / ↓ — move down
+        if (input === "j" || key.downArrow) {
+            setSelectedIndex((i) => clamp(i + 1));
+            return;
+        }
+        // k / ↑ — move up
+        if (input === "k" || key.upArrow) {
+            setSelectedIndex((i) => clamp(i - 1));
+            return;
+        }
+        // G — jump to bottom
+        if (input === "G") {
+            setSelectedIndex(itemCount - 1);
+            return;
+        }
+        // g — first press starts gg detection
+        if (input === "g") {
+            const now = Date.now();
+            if (gPressedAt.current !== null &&
+                now - gPressedAt.current < GG_TIMEOUT) {
+                // gg — jump to top
+                setSelectedIndex(0);
+                gPressedAt.current = null;
+            }
+            else {
+                gPressedAt.current = now;
+            }
+            return;
+        }
+        // Ctrl+d — page down
+        if (key.ctrl && input === "d") {
+            setSelectedIndex((i) => clamp(i + Math.floor(viewportHeight / 2)));
+            return;
+        }
+        // Ctrl+u — page up
+        if (key.ctrl && input === "u") {
+            setSelectedIndex((i) => clamp(i - Math.floor(viewportHeight / 2)));
+            return;
+        }
+        // Any other key resets gg state
+        gPressedAt.current = null;
+    }, { isActive });
+    // Derive scroll offset to keep selectedIndex visible
+    const scrollOffset = deriveScrollOffset(selectedIndex, viewportHeight, itemCount);
+    return { selectedIndex, scrollOffset };
+}
+function deriveScrollOffset(selectedIndex, viewportHeight, itemCount) {
+    if (itemCount <= viewportHeight)
+        return 0;
+    let offset = selectedIndex - Math.floor(viewportHeight / 2);
+    offset = Math.max(0, offset);
+    offset = Math.min(offset, itemCount - viewportHeight);
+    return offset;
+}

package/dist/hooks/useSorting.d.ts

@@ -0,0 +1,20 @@
+import type { TrafficEntry } from "../store/index.js";
+export type SortColumn = "id" | "method" | "url" | "status" | "duration" | "size";
+export type SortDirection = "asc" | "desc";
+export type SortConfig = {
+    column: SortColumn;
+    direction: SortDirection;
+};
+type Options = {
+    entries: TrafficEntry[];
+    isActive?: boolean;
+};
+type Result = {
+    sortedEntries: TrafficEntry[];
+    sortConfig: SortConfig | null;
+    modalOpen: boolean;
+    selectColumn: (column: SortColumn) => void;
+    closeModal: () => void;
+};
+export declare function useSorting({ entries, isActive }: Options): Result;
+export {};