peep-proxy 0.1.0

package/dist/app.d.ts

@@ -0,0 +1,9 @@
+import type { TrafficStore } from "./store/index.js";
+export type QuitStep = (message: string, replaceLast?: boolean) => void;
+type Props = {
+    store: TrafficStore;
+    port: number;
+    onQuit: (step: QuitStep) => Promise<void>;
+};
+export default function App({ store, port, onQuit }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/app.js

@@ -0,0 +1,162 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text, useApp, useInput } from "ink";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { DetailPanel } from "./components/DetailPanel.js";
+import { DomainSidebar } from "./components/DomainSidebar.js";
+import { RequestList } from "./components/RequestList.js";
+import { SortModal } from "./components/SortModal.js";
+import { StatusBar } from "./components/StatusBar.js";
+import { useActivePanel } from "./hooks/useActivePanel.js";
+import { useDetailTabs } from "./hooks/useDetailTabs.js";
+import { useDomainGroups } from "./hooks/useDomainFilter.js";
+import { useListNavigation } from "./hooks/useListNavigation.js";
+import { useSorting } from "./hooks/useSorting.js";
+import { useTerminalDimensions } from "./hooks/useTerminalDimensions.js";
+import { useTrafficEntries } from "./hooks/useTrafficEntries.js";
+const COL_ID = 4;
+const COL_METHOD = 7;
+const COL_STATUS = 6;
+const COL_DURATION = 8;
+const COL_SIZE = 7;
+const COL_PADDING = 12; // leading space + 5 separators (1 each) + trailing
+const STATUS_BAR_HEIGHT = 1;
+const LIST_CHROME_LINES = 3; // border top + header row + border bottom
+const SIDEBAR_BORDER_LINES = 2; // top + bottom border
+const SIDEBAR_WIDTH = 22;
+export default function App({ store, port, onQuit }) {
+    const { exit } = useApp();
+    const [quitting, setQuitting] = useState(false);
+    const [quitSteps, setQuitSteps] = useState([]);
+    const entries = useTrafficEntries(store);
+    const { columns, rows } = useTerminalDimensions();
+    useEffect(() => {
+        if (!quitting)
+            return;
+        let cancelled = false;
+        const step = (message, replaceLast) => {
+            if (!cancelled)
+                setQuitSteps((prev) => replaceLast ? [...prev.slice(0, -1), message] : [...prev, message]);
+        };
+        onQuit(step).finally(() => {
+            if (!cancelled)
+                exit();
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [quitting, onQuit, exit]);
+    // Refs to break circular deps: useActivePanel needs hasEntries/awaitingColumn
+    // which come from hooks that need activePanel. Refs use previous render values
+    // for those guards, while activePanel itself is always fresh.
+    const hasSelectionRef = useRef(false);
+    const sortModalOpenRef = useRef(false);
+    const sidebarSelectedRef = useRef(0);
+    const available = Math.max(1, rows - STATUS_BAR_HEIGHT);
+    const contentWidth = columns - SIDEBAR_WIDTH;
+    const listInnerWidth = contentWidth - 2; // bordered box borders
+    const sidebarViewportHeight = Math.max(1, available - SIDEBAR_BORDER_LINES);
+    // Active panel — called first so activePanel is fresh for isActive guards
+    const { activePanel, setActivePanel } = useActivePanel({
+        hasSelection: hasSelectionRef.current,
+        awaitingColumn: sortModalOpenRef.current,
+    });
+    // Domain grouping (expand/collapse, no dependency on selected index)
+    const { visibleItems, groups, expandAtIndex, collapseAtIndex } = useDomainGroups(entries);
+    const sidebarKeys = useMemo(() => visibleItems.map((item) => {
+        if (item.type === "all")
+            return "all";
+        if (item.type === "group")
+            return `group:${item.baseDomain}`;
+        return `domain:${item.host}`;
+    }), [visibleItems]);
+    // Sidebar navigation — uses activePanel directly (not a ref)
+    const { selectedIndex: sidebarSelectedIndex, scrollOffset: sidebarScrollOffset, } = useListNavigation({
+        itemCount: visibleItems.length,
+        viewportHeight: sidebarViewportHeight,
+        isActive: activePanel === "sidebar",
+        keys: sidebarKeys,
+    });
+    sidebarSelectedRef.current = sidebarSelectedIndex;
+    // Domain filtering (inline, uses selected index from navigation)
+    const filteredEntries = useMemo(() => {
+        const item = visibleItems[sidebarSelectedIndex];
+        if (!item || item.type === "all")
+            return entries;
+        if (item.type === "domain") {
+            return entries.filter((e) => e.request.host === item.host);
+        }
+        const group = groups.find((g) => g.baseDomain === item.baseDomain);
+        if (!group)
+            return entries;
+        const hosts = new Set(group.domains.map((d) => d.host));
+        return entries.filter((e) => hosts.has(e.request.host));
+    }, [entries, sidebarSelectedIndex, visibleItems, groups]);
+    const { sortedEntries, sortConfig, modalOpen, selectColumn, closeModal } = useSorting({
+        entries: filteredEntries,
+        isActive: activePanel === "list",
+    });
+    const hasEntries = sortedEntries.length > 0;
+    // Update refs for next render
+    hasSelectionRef.current = hasEntries;
+    sortModalOpenRef.current = modalOpen;
+    const listHeight = hasEntries
+        ? Math.max(LIST_CHROME_LINES + 1, Math.floor(available * 0.4))
+        : available;
+    const detailHeight = available - listHeight;
+    const listViewportHeight = Math.max(1, listHeight - LIST_CHROME_LINES);
+    const colUrl = Math.max(10, listInnerWidth -
+        COL_ID -
+        COL_METHOD -
+        COL_STATUS -
+        COL_DURATION -
+        COL_SIZE -
+        COL_PADDING);
+    const requestKeys = useMemo(() => sortedEntries.map((e) => e.id), [sortedEntries]);
+    const { selectedIndex, scrollOffset } = useListNavigation({
+        itemCount: sortedEntries.length,
+        viewportHeight: listViewportHeight,
+        isActive: activePanel === "list" && !modalOpen,
+        keys: requestKeys,
+    });
+    const { requestTab, responseTab, notification } = useDetailTabs({
+        activePanel,
+        selectedEntry: sortedEntries[selectedIndex],
+    });
+    useInput(useCallback((input, key) => {
+        if (input === "q") {
+            setQuitting(true);
+            return;
+        }
+        if (modalOpen)
+            return;
+        if (activePanel === "sidebar") {
+            if (key.return) {
+                setActivePanel("list");
+            }
+            else if (input === "l") {
+                expandAtIndex(sidebarSelectedRef.current);
+            }
+            else if (input === "h") {
+                collapseAtIndex(sidebarSelectedRef.current);
+            }
+        }
+        else if (activePanel === "list") {
+            if (key.return && hasSelectionRef.current) {
+                setActivePanel("request");
+            }
+        }
+    }, [modalOpen, activePanel, expandAtIndex, collapseAtIndex, setActivePanel]));
+    const columnWidths = {
+        id: COL_ID,
+        method: COL_METHOD,
+        status: COL_STATUS,
+        duration: COL_DURATION,
+        size: COL_SIZE,
+        url: colUrl,
+    };
+    const selectedEntry = sortedEntries[selectedIndex];
+    if (quitting) {
+        return (_jsxs(Box, { flexDirection: "column", height: rows, paddingTop: 1, paddingLeft: 2, children: [_jsx(Text, { bold: true, children: "Shutting down\u2026" }), quitSteps.map((msg) => (_jsxs(Text, { dimColor: true, children: [" ", msg] }, msg)))] }));
+    }
+    return (_jsxs(Box, { flexDirection: "column", height: rows, children: [modalOpen && (_jsx(Box, { position: "absolute", marginTop: Math.max(0, Math.floor((rows - 8) / 2)), marginLeft: Math.max(0, Math.floor((columns - 22) / 2)), children: _jsx(SortModal, { sortConfig: sortConfig, onSelect: selectColumn, onClose: closeModal }) })), _jsxs(Box, { flexDirection: "row", height: available, children: [_jsx(DomainSidebar, { items: visibleItems, selectedIndex: sidebarSelectedIndex, scrollOffset: sidebarScrollOffset, viewportHeight: sidebarViewportHeight, width: SIDEBAR_WIDTH, height: available, isActive: activePanel === "sidebar" }), _jsxs(Box, { flexDirection: "column", width: contentWidth, children: [_jsx(RequestList, { entries: sortedEntries, selectedIndex: selectedIndex, scrollOffset: scrollOffset, viewportHeight: listViewportHeight, sortConfig: sortConfig, columnWidths: columnWidths, width: contentWidth, height: listHeight, isActive: activePanel === "list" }), selectedEntry && detailHeight > 0 && (_jsx(DetailPanel, { entry: selectedEntry, activePanel: activePanel, requestTab: requestTab, responseTab: responseTab, width: contentWidth, height: detailHeight }))] })] }), _jsx(StatusBar, { port: port, requestCount: sortedEntries.length, selectedIndex: selectedIndex, columns: columns, activePanel: activePanel, notification: notification })] }));
+}

package/dist/cli.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/dist/cli.js

@@ -0,0 +1,98 @@
+#!/usr/bin/env node
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as os from "node:os";
+import * as path from "node:path";
+import { render } from "ink";
+import meow from "meow";
+import { findNssProfiles, isCaTrusted, isNssTrusted, trustCa, trustNssStores, } from "./proxy/cert-trust.js";
+import { loadOrCreateCA, ProxyServer } from "./proxy/index.js";
+import { disableSystemProxy, enableSystemProxy } from "./proxy/system-proxy.js";
+import { TrafficStore } from "./store/index.js";
+import App from "./app.js";
+const cli = meow(`
+	Usage
+	  $ peep
+
+	Options
+		--port  Proxy port (default: 8080)
+
+	Examples
+	  $ peep --port=3128
+`, {
+    importMeta: import.meta,
+    flags: {
+        port: {
+            type: "number",
+            default: 8080,
+        },
+    },
+});
+const port = cli.flags.port;
+const caDir = path.join(os.homedir(), ".peep");
+const certPath = path.join(caDir, "ca-cert.pem");
+const ca = await loadOrCreateCA(caDir);
+if (!isCaTrusted(certPath)) {
+    process.stderr.write("\nPeep Proxy CA is not trusted. Type your user password to install it.\n\n");
+    const ok = trustCa(certPath);
+    if (!ok) {
+        process.stderr.write("Failed to install CA. HTTPS interception may not work.\n\n");
+    }
+}
+if (findNssProfiles().length > 0 && !isNssTrusted()) {
+    process.stderr.write("\nFirefox/Zen use their own certificate store and need separate trust setup.\n");
+    const result = trustNssStores(certPath);
+    switch (result.status) {
+        case "ok":
+            process.stderr.write(`CA trusted in ${result.count} browser profile(s). Restart your browser to apply.\n\n`);
+            break;
+        case "no-certutil":
+            if (result.hasBrew) {
+                process.stderr.write('Run "brew install nss" and restart peep to enable Firefox/Zen HTTPS support.\n\n');
+            }
+            else {
+                process.stderr.write("Install certutil (from nss) to enable Firefox/Zen HTTPS support.\n\n");
+            }
+            break;
+        case "install-failed":
+            process.stderr.write('Failed to install nss. Run "brew install nss" manually and restart peep.\n\n');
+            break;
+        case "partial":
+            process.stderr.write(`CA trusted in ${result.trusted}/${result.total} browser profile(s). Some profiles may not work.\n\n`);
+            break;
+    }
+}
+const proxy = new ProxyServer({ port, ca });
+const store = new TrafficStore(proxy);
+await proxy.start();
+const proxyService = enableSystemProxy(port);
+function cleanup() {
+    if (proxyService)
+        disableSystemProxy(proxyService);
+}
+async function onQuit(step) {
+    let t = performance.now();
+    if (proxyService) {
+        step("Restoring system proxy…");
+        disableSystemProxy(proxyService);
+        step(`Restored system proxy (${elapsed(t)})`, true);
+    }
+    t = performance.now();
+    step("Stopping proxy server…");
+    store.destroy();
+    await proxy.stop();
+    step(`Stopped proxy server (${elapsed(t)})`, true);
+}
+function elapsed(start) {
+    return `${Math.round(performance.now() - start)}ms`;
+}
+process.on("SIGINT", () => {
+    cleanup();
+    process.exit(0);
+});
+process.on("SIGTERM", () => {
+    cleanup();
+    process.exit(0);
+});
+const { waitUntilExit } = render(_jsx(App, { store: store, port: port, onQuit: onQuit }));
+await waitUntilExit();
+process.exit(0);

package/dist/components/BorderedBox.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+type Props = {
+    title: string;
+    width: number;
+    height: number;
+    isActive: boolean;
+    children: ReactNode;
+};
+export declare function BorderedBox({ title, width, height, isActive, children, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/BorderedBox.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import { PRIMARY_COLOR } from "../theme.js";
+export function BorderedBox({ title, width, height, isActive, children, }) {
+    const innerWidth = Math.max(0, width - 2);
+    const innerHeight = Math.max(0, height - 2);
+    const titleStr = ` ${title} `;
+    const remaining = Math.max(0, innerWidth - titleStr.length - 1);
+    const topLine = `┌─${titleStr}${"─".repeat(remaining)}┐`;
+    const bottomLine = `└${"─".repeat(innerWidth)}┘`;
+    const borderColor = isActive ? PRIMARY_COLOR : undefined;
+    return (_jsxs(Box, { flexDirection: "column", width: width, height: height, children: [_jsx(Text, { bold: isActive, color: borderColor, dimColor: !isActive, children: topLine }), _jsxs(Box, { flexDirection: "row", height: innerHeight, children: [_jsx(Text, { color: borderColor, dimColor: !isActive, children: "│\n".repeat(innerHeight).trimEnd() }), _jsx(Box, { flexDirection: "column", width: innerWidth, children: children }), _jsx(Text, { color: borderColor, dimColor: !isActive, children: "│\n".repeat(innerHeight).trimEnd() })] }), _jsx(Text, { color: borderColor, dimColor: !isActive, children: bottomLine })] }));
+}

package/dist/components/DetailPanel.d.ts

@@ -0,0 +1,13 @@
+import type { Panel } from "../hooks/useActivePanel.js";
+import type { DetailTab } from "../hooks/useDetailTabs.js";
+import type { TrafficEntry } from "../store/index.js";
+type Props = {
+    entry: TrafficEntry;
+    activePanel: Panel;
+    requestTab: DetailTab;
+    responseTab: DetailTab;
+    width: number;
+    height: number;
+};
+export declare function DetailPanel({ entry, activePanel, requestTab, responseTab, width, height, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/DetailPanel.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from "ink";
+import { DetailView } from "./DetailView.js";
+export function DetailPanel({ entry, activePanel, requestTab, responseTab, width, height, }) {
+    const leftWidth = Math.floor(width / 2);
+    const rightWidth = width - leftWidth;
+    return (_jsxs(Box, { height: height, children: [_jsx(DetailView, { entry: entry, side: "request", activeTab: requestTab, isActive: activePanel === "request", width: leftWidth, height: height }), _jsx(DetailView, { entry: entry, side: "response", activeTab: responseTab, isActive: activePanel === "response", width: rightWidth, height: height })] }));
+}

package/dist/components/DetailView.d.ts

@@ -0,0 +1,12 @@
+import type { DetailTab } from "../hooks/useDetailTabs.js";
+import type { TrafficEntry } from "../store/index.js";
+type Props = {
+    entry: TrafficEntry;
+    side: "request" | "response";
+    activeTab: DetailTab;
+    isActive: boolean;
+    width: number;
+    height: number;
+};
+export declare function DetailView({ entry, side, activeTab, isActive, width, height, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/DetailView.js

@@ -0,0 +1,151 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cliTruncate from "cli-truncate";
+import { Box, Text } from "ink";
+import { useDetailScroll } from "../hooks/useDetailScroll.js";
+import { PRIMARY_COLOR } from "../theme.js";
+import { getHighlightLanguage, hasBinaryBytes, isBinaryContentType, parseContentType, } from "../utils/contentType.js";
+import { decompressBody } from "../utils/decompress.js";
+import { formatBytes } from "../utils/formatBytes.js";
+import { highlightBody } from "../utils/highlightBody.js";
+import { BorderedBox } from "./BorderedBox.js";
+const TABS = ["body", "headers", "raw"];
+const TAB_LABELS = {
+    headers: "Headers",
+    body: "Body",
+    raw: "Raw",
+};
+const CHROME_LINES = 1; // tab bar only (title is now in border)
+function formatHeaders(headers) {
+    return Object.entries(headers).flatMap(([key, value]) => {
+        if (Array.isArray(value)) {
+            return value.map((v) => `${key}: ${v}`);
+        }
+        return [`${key}: ${value ?? ""}`];
+    });
+}
+function getRequestBodyLines(entry) {
+    if (entry.request.body.length === 0) {
+        return ["Empty body"];
+    }
+    const body = decompressBody(entry.request.body, entry.request.headers);
+    const mime = parseContentType(entry.request.headers);
+    if (isBinary(mime, body)) {
+        const label = mime || "unknown";
+        const size = formatBytes(entry.request.body.length);
+        return [`[Binary content: ${label}, ${size}]`];
+    }
+    const text = body.toString("utf-8");
+    const language = getHighlightLanguage(mime);
+    return highlightBody(text, language).split("\n");
+}
+function getDecompressedBody(entry) {
+    if (!entry.response)
+        return Buffer.alloc(0);
+    return decompressBody(entry.response.body, entry.response.headers);
+}
+function isBinary(mime, body) {
+    if (isBinaryContentType(mime))
+        return true;
+    return hasBinaryBytes(body);
+}
+function getResponseBodyLines(entry) {
+    if (entry.state === "pending" || !entry.response) {
+        return ["Waiting for response..."];
+    }
+    if (entry.response.body.length === 0) {
+        return ["Empty body"];
+    }
+    const body = getDecompressedBody(entry);
+    const mime = parseContentType(entry.response.headers);
+    if (isBinary(mime, body)) {
+        const label = mime || "unknown";
+        const size = formatBytes(entry.response.body.length);
+        return [`[Binary content: ${label}, ${size}]`];
+    }
+    const text = body.toString("utf-8");
+    const language = getHighlightLanguage(mime);
+    return highlightBody(text, language).split("\n");
+}
+function formatRawRequest(entry) {
+    const { method, path, headers, body } = entry.request;
+    const lines = [`${method} ${path} HTTP/1.1`];
+    lines.push(...formatHeaders(headers));
+    if (body.length > 0) {
+        lines.push("");
+        const decompressed = decompressBody(body, headers);
+        const mime = parseContentType(headers);
+        if (isBinary(mime, decompressed)) {
+            const label = mime || "unknown";
+            const size = formatBytes(body.length);
+            lines.push(`[Binary content: ${label}, ${size}]`);
+        }
+        else {
+            lines.push(...decompressed.toString("utf-8").split("\n"));
+        }
+    }
+    return lines;
+}
+function formatRawResponse(entry) {
+    if (entry.state === "pending" || !entry.response) {
+        return ["Waiting for response..."];
+    }
+    const { statusCode, headers, body } = entry.response;
+    const lines = [`HTTP/1.1 ${statusCode}`];
+    lines.push(...formatHeaders(headers));
+    if (body.length > 0) {
+        lines.push("");
+        const decompressed = getDecompressedBody(entry);
+        const mime = parseContentType(headers);
+        if (isBinary(mime, decompressed)) {
+            const label = mime || "unknown";
+            const size = formatBytes(body.length);
+            lines.push(`[Binary content: ${label}, ${size}]`);
+        }
+        else {
+            lines.push(...decompressed.toString("utf-8").split("\n"));
+        }
+    }
+    return lines;
+}
+function getContentLines(entry, side, tab) {
+    if (tab === "headers") {
+        const headers = side === "request" ? entry.request.headers : entry.response?.headers;
+        if (!headers)
+            return ["Waiting for response..."];
+        return formatHeaders(headers);
+    }
+    if (tab === "body") {
+        return side === "request"
+            ? getRequestBodyLines(entry)
+            : getResponseBodyLines(entry);
+    }
+    // raw
+    return side === "request"
+        ? formatRawRequest(entry)
+        : formatRawResponse(entry);
+}
+function truncateLine(line, width) {
+    return cliTruncate(line, width);
+}
+export function DetailView({ entry, side, activeTab, isActive, width, height, }) {
+    const innerHeight = Math.max(0, height - 2); // border top + bottom
+    const contentLines = getContentLines(entry, side, activeTab);
+    const viewportHeight = Math.max(1, innerHeight - CHROME_LINES);
+    const { scrollOffset } = useDetailScroll({
+        contentHeight: contentLines.length,
+        viewportHeight,
+        isActive,
+    });
+    const visibleLines = contentLines.slice(scrollOffset, scrollOffset + viewportHeight);
+    const title = side === "request" ? "Request" : "Response";
+    const innerWidth = Math.max(0, width - 2);
+    return (_jsxs(BorderedBox, { title: title, width: width, height: height, isActive: isActive, children: [_jsx(Text, { children: TABS.map((tab, i) => {
+                    const label = TAB_LABELS[tab];
+                    const sep = i < TABS.length - 1 ? " │ " : "";
+                    const isCurrent = tab === activeTab;
+                    if (isCurrent && isActive) {
+                        return (_jsxs(Text, { children: [_jsx(Text, { bold: true, color: PRIMARY_COLOR, children: ` ${label} ` }), sep] }, tab));
+                    }
+                    return (_jsxs(Text, { dimColor: !isActive, children: [` ${label} `, sep] }, tab));
+                }) }), side === "response" && entry.state === "pending" ? (_jsx(Box, { paddingLeft: 1, paddingTop: 1, children: _jsx(Text, { dimColor: !isActive, children: " Waiting for response\u2026" }) })) : (visibleLines.map((line, i) => (_jsx(Text, { dimColor: !isActive, children: ` ${truncateLine(line, innerWidth - 1)}` }, `${scrollOffset + i}`))))] }));
+}

package/dist/components/DomainSidebar.d.ts

@@ -0,0 +1,12 @@
+import type { SidebarItem } from "../hooks/useDomainFilter.js";
+type Props = {
+    items: SidebarItem[];
+    selectedIndex: number;
+    scrollOffset: number;
+    viewportHeight: number;
+    width: number;
+    height: number;
+    isActive: boolean;
+};
+export declare function DomainSidebar({ items, selectedIndex, scrollOffset, viewportHeight, width, height, isActive, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/DomainSidebar.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from "ink";
+import { PRIMARY_COLOR } from "../theme.js";
+import { BorderedBox } from "./BorderedBox.js";
+function formatItem(item, maxWidth) {
+    if (item.type === "all") {
+        return ` All (${item.count})`.slice(0, maxWidth).padEnd(maxWidth);
+    }
+    if (item.type === "group") {
+        const arrow = item.expanded ? "▼" : "▶";
+        const label = `${arrow} ${item.baseDomain} (${item.count})`;
+        return label.slice(0, maxWidth).padEnd(maxWidth);
+    }
+    const prefix = item.grouped ? "   " : " ";
+    const label = `${prefix}${item.host} (${item.count})`;
+    return label.slice(0, maxWidth).padEnd(maxWidth);
+}
+function itemKey(item) {
+    if (item.type === "all")
+        return "all";
+    if (item.type === "group")
+        return `g:${item.baseDomain}`;
+    return `d:${item.host}`;
+}
+export function DomainSidebar({ items, selectedIndex, scrollOffset, viewportHeight, width, height, isActive, }) {
+    const contentWidth = width - 2;
+    const visible = items.slice(scrollOffset, scrollOffset + viewportHeight);
+    return (_jsxs(BorderedBox, { title: "Domains", width: width, height: height, isActive: isActive, children: [visible.map((item, i) => {
+                const idx = scrollOffset + i;
+                const isSelected = idx === selectedIndex;
+                const text = formatItem(item, contentWidth);
+                return (_jsx(Text, { backgroundColor: isSelected ? PRIMARY_COLOR : undefined, color: isSelected ? "black" : undefined, dimColor: !isActive && !isSelected, children: text }, itemKey(item)));
+            }), visible.length < viewportHeight && (_jsx(Text, { children: `${" ".repeat(contentWidth)}\n`
+                    .repeat(viewportHeight - visible.length)
+                    .trimEnd() }))] }));
+}

package/dist/components/RequestList.d.ts

@@ -0,0 +1,22 @@
+import type { SortConfig } from "../hooks/useSorting.js";
+import type { TrafficEntry } from "../store/index.js";
+type Props = {
+    entries: TrafficEntry[];
+    selectedIndex: number;
+    scrollOffset: number;
+    viewportHeight: number;
+    sortConfig: SortConfig | null;
+    columnWidths: {
+        id: number;
+        method: number;
+        status: number;
+        duration: number;
+        size: number;
+        url: number;
+    };
+    width: number;
+    height: number;
+    isActive: boolean;
+};
+export declare function RequestList({ entries, selectedIndex, scrollOffset, viewportHeight, sortConfig, columnWidths, width, height, isActive, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/RequestList.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import { BorderedBox } from "./BorderedBox.js";
+import { RequestRow } from "./RequestRow.js";
+const COLUMN_LABELS = {
+    id: "#",
+    method: "Method",
+    url: "URL",
+    status: "Status",
+    duration: "Time",
+    size: "Size",
+};
+function headerLabel(label, column, sortConfig, width) {
+    const effective = sortConfig ?? {
+        column: "id",
+        direction: "desc",
+    };
+    if (effective.column === column) {
+        const arrow = effective.direction === "asc" ? "▲" : "▼";
+        return `${label}${arrow}`.slice(0, width).padEnd(width);
+    }
+    return label.padEnd(width);
+}
+export function RequestList({ entries, selectedIndex, scrollOffset, viewportHeight, sortConfig, columnWidths, width, height, isActive, }) {
+    if (entries.length === 0) {
+        return (_jsx(BorderedBox, { title: "Requests", width: width, height: height, isActive: isActive, children: _jsx(Box, { flexDirection: "column", height: Math.max(0, height - 2), justifyContent: "center", alignItems: "center", children: _jsx(Text, { dimColor: true, children: "No requests captured" }) }) }));
+    }
+    const visible = entries.slice(scrollOffset, scrollOffset + viewportHeight);
+    return (_jsxs(BorderedBox, { title: "Requests", width: width, height: height, isActive: isActive, children: [_jsxs(Text, { bold: true, dimColor: !isActive, children: [_jsx(Text, { children: " " }), _jsx(Text, { children: headerLabel(COLUMN_LABELS.id, "id", sortConfig, columnWidths.id) }), _jsx(Text, { children: " " }), _jsx(Text, { children: headerLabel(COLUMN_LABELS.method, "method", sortConfig, columnWidths.method) }), _jsx(Text, { children: " " }), _jsx(Text, { children: headerLabel(COLUMN_LABELS.url, "url", sortConfig, columnWidths.url) }), _jsx(Text, { children: " " }), _jsx(Text, { children: headerLabel(COLUMN_LABELS.status, "status", sortConfig, columnWidths.status) }), _jsx(Text, { children: " " }), _jsx(Text, { children: headerLabel(COLUMN_LABELS.duration, "duration", sortConfig, columnWidths.duration) }), _jsx(Text, { children: " " }), _jsx(Text, { children: headerLabel(COLUMN_LABELS.size, "size", sortConfig, columnWidths.size) })] }), visible.map((entry, i) => (_jsx(RequestRow, { entry: entry, isSelected: scrollOffset + i === selectedIndex, columnWidths: columnWidths }, entry.id)))] }));
+}

package/dist/components/RequestRow.d.ts

@@ -0,0 +1,15 @@
+import type { TrafficEntry } from "../store/index.js";
+type Props = {
+    entry: TrafficEntry;
+    isSelected: boolean;
+    columnWidths: {
+        id: number;
+        method: number;
+        status: number;
+        duration: number;
+        size: number;
+        url: number;
+    };
+};
+export declare function RequestRow({ entry, isSelected, columnWidths }: Props): import("react/jsx-runtime").JSX.Element;
+export {};