@reopt-ai/dev-proxy 1.1.1

package/dist/commands/worktree.js

@@ -0,0 +1,292 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { execSync } from "node:child_process";
+import { writeFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { Box, Text, render } from "ink";
+import { readGlobalConfig, readProjectConfig, writeProjectConfig, isValidPort, isValidSubdomain, allocatePorts, getEntryPorts, generateEnvContent, } from "../cli/config-io.js";
+import { Header, Row, SuccessMessage, ErrorMessage, ExitOnRender, } from "../cli/output.js";
+function findOwningProject(cwd) {
+    const cfg = readGlobalConfig();
+    const projects = cfg.projects ?? [];
+    for (const p of projects) {
+        if (cwd === p || cwd.startsWith(p + "/")) {
+            return p;
+        }
+    }
+    return null;
+}
+// ── List worktrees ───────────────────────────────────────────
+function WorktreeList() {
+    const cfg = readGlobalConfig();
+    const projects = cfg.projects ?? [];
+    const entries = [];
+    for (const p of projects) {
+        const pc = readProjectConfig(p);
+        for (const [name, entry] of Object.entries(pc.worktrees ?? {})) {
+            entries.push({ project: p, name, entry });
+        }
+    }
+    if (entries.length === 0) {
+        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(ExitOnRender, {}), _jsx(Header, { text: "Worktrees" }), _jsx(Text, { dimColor: true, children: "    (none)" })] }));
+    }
+    function formatPorts(entry) {
+        if ("ports" in entry) {
+            return Object.entries(entry.ports)
+                .map(([svc, p]) => `${svc}:${p}`)
+                .join(", ");
+        }
+        return `port ${entry.port}`;
+    }
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(ExitOnRender, {}), _jsx(Header, { text: "Worktrees" }), entries.map((e) => (_jsx(Row, { label: e.name, value: `${formatPorts(e.entry)}  (${e.project})`, pad: 20 }, `${e.project}:${e.name}`)))] }));
+}
+// ── Add worktree ─────────────────────────────────────────────
+function WorktreeAdd({ name, port }) {
+    const cwd = process.cwd();
+    const projectPath = findOwningProject(cwd);
+    if (!projectPath) {
+        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(ExitOnRender, {}), _jsx(ErrorMessage, { message: "Current directory is not inside a registered project", hint: "Run 'dev-proxy project add .' to register this project first" })] }));
+    }
+    const cfg = readProjectConfig(projectPath);
+    cfg.worktrees = cfg.worktrees ?? {};
+    cfg.worktrees[name] = { port };
+    writeProjectConfig(projectPath, cfg);
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(ExitOnRender, {}), _jsx(SuccessMessage, { message: `Added worktree "${name}" on port ${port}` })] }));
+}
+// ── Remove worktree ──────────────────────────────────────────
+function WorktreeRemove({ name }) {
+    const cwd = process.cwd();
+    const projectPath = findOwningProject(cwd);
+    if (!projectPath) {
+        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(ExitOnRender, {}), _jsx(ErrorMessage, { message: "Current directory is not inside a registered project", hint: "Run 'dev-proxy project add .' to register this project first" })] }));
+    }
+    const cfg = readProjectConfig(projectPath);
+    const worktrees = cfg.worktrees ?? {};
+    if (!(name in worktrees)) {
+        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(ExitOnRender, {}), _jsx(ErrorMessage, { message: `Worktree "${name}" not found in project`, hint: "Run 'dev-proxy worktree list' to see all worktrees" })] }));
+    }
+    const { [name]: _, ...remaining } = worktrees;
+    cfg.worktrees = remaining;
+    writeProjectConfig(projectPath, cfg);
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(ExitOnRender, {}), _jsx(SuccessMessage, { message: `Removed worktree "${name}"` })] }));
+}
+// ── Create worktree (full lifecycle) ─────────────────────────
+function WorktreeCreate({ branch }) {
+    const cwd = process.cwd();
+    const projectPath = findOwningProject(cwd);
+    if (!projectPath) {
+        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(ExitOnRender, {}), _jsx(ErrorMessage, { message: "Current directory is not inside a registered project", hint: "Run 'dev-proxy project add .' to register this project first" })] }));
+    }
+    const cfg = readProjectConfig(projectPath);
+    const wtConfig = cfg.worktreeConfig;
+    if (!wtConfig) {
+        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(ExitOnRender, {}), _jsx(ErrorMessage, { message: "worktreeConfig not configured in .dev-proxy.json", hint: 'Add "worktreeConfig": { "portRange": [4001, 5000], "directory": "../project-{branch}" }' })] }));
+    }
+    const worktrees = cfg.worktrees ?? {};
+    if (branch in worktrees) {
+        const existing = worktrees[branch];
+        const portInfo = "ports" in existing
+            ? Object.entries(existing.ports)
+                .map(([s, p]) => `${s}:${p}`)
+                .join(", ")
+            : `port ${existing.port}`;
+        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(ExitOnRender, {}), _jsx(ErrorMessage, { message: `Worktree "${branch}" already exists (${portInfo})` })] }));
+    }
+    // Collect used ports across all existing worktrees
+    const usedPorts = new Set(Object.values(worktrees).flatMap((w) => getEntryPorts(w)));
+    // Allocate ports — multi-service or single
+    const services = wtConfig.services;
+    const serviceNames = services ? Object.keys(services) : null;
+    const portCount = serviceNames ? serviceNames.length : 1;
+    const allocated = allocatePorts(portCount, wtConfig.portRange, usedPorts);
+    if (allocated === null) {
+        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(ExitOnRender, {}), _jsx(ErrorMessage, { message: `No available ports in range ${wtConfig.portRange[0]}-${wtConfig.portRange[1]}`, hint: "Destroy unused worktrees or expand portRange" })] }));
+    }
+    // Build the worktree entry
+    let worktreeEntry;
+    let portsMap = null;
+    if (serviceNames) {
+        portsMap = {};
+        for (let i = 0; i < serviceNames.length; i++) {
+            portsMap[serviceNames[i]] = allocated[i];
+        }
+        worktreeEntry = { ports: portsMap };
+    }
+    else {
+        worktreeEntry = { port: allocated[0] };
+    }
+    // Resolve directory
+    const dirPattern = wtConfig.directory.replace("{branch}", branch);
+    const worktreeDir = resolve(projectPath, dirPattern);
+    const messages = [];
+    const warnings = [];
+    // git worktree add
+    try {
+        execSync(`git worktree add ${JSON.stringify(worktreeDir)} ${branch}`, {
+            cwd: projectPath,
+            stdio: "pipe",
+        });
+        messages.push(`Created git worktree at ${worktreeDir}`);
+    }
+    catch (err) {
+        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(ExitOnRender, {}), _jsx(ErrorMessage, { message: `git worktree add failed: ${err.message}`, hint: "Ensure the branch exists or will be created" })] }));
+    }
+    // Update config
+    cfg.worktrees = { ...worktrees, [branch]: worktreeEntry };
+    try {
+        writeProjectConfig(projectPath, cfg);
+    }
+    catch (err) {
+        warnings.push(`Failed to update config: ${err.message}`);
+    }
+    if (portsMap) {
+        for (const [svc, p] of Object.entries(portsMap)) {
+            messages.push(`Allocated port ${p} for ${svc}`);
+        }
+    }
+    else {
+        messages.push(`Allocated port ${allocated[0]}`);
+    }
+    // Generate .env file for multi-service worktrees
+    if (services && portsMap) {
+        const envContent = generateEnvContent(services, portsMap);
+        const envFile = wtConfig.envFile ?? ".env.local";
+        try {
+            writeFileSync(resolve(worktreeDir, envFile), envContent);
+            messages.push(`Wrote ${envFile}`);
+        }
+        catch (err) {
+            warnings.push(`Failed to write ${envFile}: ${err.message}`);
+        }
+    }
+    // Run post-create hook
+    const hook = wtConfig.hooks?.["post-create"];
+    if (hook) {
+        try {
+            execSync(hook, { cwd: worktreeDir, stdio: "inherit" });
+            messages.push(`Hook post-create completed`);
+        }
+        catch {
+            warnings.push(`Hook post-create failed (worktree was still created)`);
+        }
+    }
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(ExitOnRender, {}), messages.map((m, i) => (_jsx(SuccessMessage, { message: m }, i))), warnings.map((w, i) => (_jsxs(Text, { children: ["  ", _jsx(Text, { color: "yellow", children: "\u26A0" }), _jsx(Text, { children: ` ${w}` })] }, i))), _jsx(Text, { children: "" }), _jsx(Text, { dimColor: true, children: `    Access: {branch}--*.${readGlobalConfig().domain ?? "localhost"}:${readGlobalConfig().port ?? 3000}` })] }));
+}
+// ── Destroy worktree (full lifecycle) ────────────────────────
+function WorktreeDestroy({ branch }) {
+    const cwd = process.cwd();
+    const projectPath = findOwningProject(cwd);
+    if (!projectPath) {
+        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(ExitOnRender, {}), _jsx(ErrorMessage, { message: "Current directory is not inside a registered project", hint: "Run 'dev-proxy project add .' to register this project first" })] }));
+    }
+    const cfg = readProjectConfig(projectPath);
+    const worktrees = cfg.worktrees ?? {};
+    if (!(branch in worktrees)) {
+        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(ExitOnRender, {}), _jsx(ErrorMessage, { message: `Worktree "${branch}" not found`, hint: "Run 'dev-proxy worktree list' to see all worktrees" })] }));
+    }
+    const wtConfig = cfg.worktreeConfig;
+    const messages = [];
+    const warnings = [];
+    // Resolve directory
+    const dirPattern = wtConfig
+        ? wtConfig.directory.replace("{branch}", branch)
+        : `../${branch}`;
+    const worktreeDir = resolve(projectPath, dirPattern);
+    // Run post-remove hook
+    const hook = wtConfig?.hooks?.["post-remove"];
+    if (hook) {
+        try {
+            execSync(hook, { cwd: worktreeDir, stdio: "inherit" });
+            messages.push(`Hook post-remove completed`);
+        }
+        catch {
+            warnings.push(`Hook post-remove failed (continuing with removal)`);
+        }
+    }
+    // git worktree remove
+    try {
+        execSync(`git worktree remove ${JSON.stringify(worktreeDir)} --force`, {
+            cwd: projectPath,
+            stdio: "pipe",
+        });
+        messages.push(`Removed git worktree at ${worktreeDir}`);
+    }
+    catch {
+        warnings.push(`git worktree remove failed (config entry still removed)`);
+    }
+    // Update config
+    const removed = worktrees[branch];
+    const { [branch]: _, ...remaining } = worktrees;
+    cfg.worktrees = remaining;
+    try {
+        writeProjectConfig(projectPath, cfg);
+    }
+    catch (err) {
+        warnings.push(`Failed to update config: ${err.message}`);
+    }
+    const releasedPorts = getEntryPorts(removed);
+    if ("ports" in removed) {
+        for (const [svc, p] of Object.entries(removed.ports)) {
+            messages.push(`Released port ${p} (${svc})`);
+        }
+    }
+    else {
+        messages.push(`Released port ${releasedPorts[0]}`);
+    }
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(ExitOnRender, {}), messages.map((m, i) => (_jsx(SuccessMessage, { message: m }, i))), warnings.map((w, i) => (_jsxs(Text, { children: ["  ", _jsx(Text, { color: "yellow", children: "\u26A0" }), _jsx(Text, { children: ` ${w}` })] }, i)))] }));
+}
+// ── Entry point ──────────────────────────────────────────────
+const args = process.argv.slice(3);
+const subcommand = args[0];
+if (subcommand === "create") {
+    const branch = args[1];
+    if (!branch) {
+        render(_jsx(ErrorMessage, { message: "Usage: dev-proxy worktree create <branch>" }));
+    }
+    else if (!isValidSubdomain(branch)) {
+        render(_jsx(ErrorMessage, { message: `Invalid branch name "${branch}" for subdomain routing`, hint: "Use lowercase alphanumeric and hyphens only (e.g. fix-auth-bug)" }));
+    }
+    else {
+        render(_jsx(WorktreeCreate, { branch: branch }));
+    }
+}
+else if (subcommand === "destroy") {
+    const branch = args[1];
+    if (!branch) {
+        render(_jsx(ErrorMessage, { message: "Usage: dev-proxy worktree destroy <branch>" }));
+    }
+    else {
+        render(_jsx(WorktreeDestroy, { branch: branch }));
+    }
+}
+else if (subcommand === "add") {
+    const name = args[1];
+    const portStr = args[2];
+    if (!name || !portStr) {
+        render(_jsx(ErrorMessage, { message: "Usage: dev-proxy worktree add <name> <port>" }));
+    }
+    else {
+        const port = Number(portStr);
+        if (!isValidSubdomain(name)) {
+            render(_jsx(ErrorMessage, { message: `Invalid worktree name "${name}"`, hint: "Use lowercase alphanumeric and hyphens only" }));
+        }
+        else if (!isValidPort(port)) {
+            render(_jsx(ErrorMessage, { message: `Invalid port "${portStr}"`, hint: "Expected an integer between 1 and 65535" }));
+        }
+        else {
+            render(_jsx(WorktreeAdd, { name: name, port: port }));
+        }
+    }
+}
+else if (subcommand === "remove") {
+    const name = args[1];
+    if (!name) {
+        render(_jsx(ErrorMessage, { message: "Usage: dev-proxy worktree remove <name>" }));
+    }
+    else {
+        render(_jsx(WorktreeRemove, { name: name }));
+    }
+}
+else {
+    // "list" or no subcommand → default to list
+    render(_jsx(WorktreeList, {}));
+}

package/dist/components/app.js

@@ -0,0 +1,394 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import http from "node:http";
+import https from "node:https";
+import { spawnSync } from "node:child_process";
+import { Box, Text, useInput, useStdout } from "ink";
+import { Splash } from "./splash.js";
+import { StatusBar } from "./status-bar.js";
+import { RequestList } from "./request-list.js";
+import { DetailPanel } from "./detail-panel.js";
+import { FooterBar } from "./footer-bar.js";
+import { HTTPS_PORT, PROXY_PORT } from "../proxy/routes.js";
+import { palette } from "../utils/format.js";
+import { useMouse } from "../hooks/use-mouse.js";
+import { buildListHeaderTokens, getListDimensions, LIST_PADDING_X, LIST_RESERVED_LINES, } from "../utils/list-layout.js";
+import { useStore, setInspectActive, selectNext, selectPrev, selectFirst, selectLast, selectByFilteredIndex, pauseFollow, toggleFollow, toggleHideNoise, toggleErrorsOnly, setSearchQuery, getSearchQuery, clearAll, getSelectedReplayInfo, getSelectedCurl, } from "../store.js";
+const MOUSE_PREFIX = "\x1b[<";
+const INSPECT_IDLE_MS = 60_000;
+const CLIPBOARD_COMMANDS = process.platform === "darwin"
+    ? [["pbcopy"]]
+    : process.platform === "win32"
+        ? [["clip"]]
+        : [
+            ["wl-copy"],
+            ["xclip", "-selection", "clipboard"],
+            ["xsel", "--clipboard", "--input"],
+        ];
+function tokensLength(tokens) {
+    if (tokens.length === 0)
+        return 0;
+    const total = tokens.reduce((sum, token) => sum + token.text.length, 0);
+    return total + (tokens.length - 1);
+}
+function hitToken(tokens, col) {
+    let cursor = 1;
+    for (let i = 0; i < tokens.length; i++) {
+        const token = tokens[i];
+        const start = cursor;
+        const end = start + token.text.length - 1;
+        if (col >= start && col <= end)
+            return token;
+        cursor = end + 1;
+        if (i < tokens.length - 1)
+            cursor += 1;
+    }
+    return null;
+}
+function getScrollOffset(total, selectedIdx, visibleRows) {
+    if (total <= visibleRows)
+        return 0;
+    const safeSelected = Math.max(0, selectedIdx);
+    return Math.max(0, Math.min(safeSelected - Math.floor(visibleRows / 2), total - visibleRows));
+}
+function resolveReplayTarget(info) {
+    const defaultPort = info.protocol === "https" ? HTTPS_PORT : PROXY_PORT;
+    try {
+        const origin = new URL(`${info.protocol}://${info.host}`);
+        return {
+            hostname: origin.hostname,
+            port: origin.port ? Number(origin.port) : defaultPort,
+        };
+    }
+    catch {
+        // Malformed URL — fall back to manual host parsing
+        return {
+            hostname: info.host.split(":")[0] ?? "localhost",
+            port: defaultPort,
+        };
+    }
+}
+function copyToClipboard(text) {
+    for (const [command, ...args] of CLIPBOARD_COMMANDS) {
+        const result = spawnSync(command, args, {
+            input: text,
+            stdio: ["pipe", "ignore", "ignore"],
+        });
+        if (!result.error && result.status === 0) {
+            return true;
+        }
+    }
+    return false;
+}
+function StandbyView({ termSize, httpsEnabled, }) {
+    const line = "─".repeat(Math.max(24, Math.min(termSize.cols - 18, 52)));
+    return (_jsx(Box, { alignItems: "center", justifyContent: "center", flexGrow: 1, children: _jsxs(Box, { flexDirection: "column", borderStyle: "double", borderColor: palette.muted, paddingX: 4, paddingY: 1, children: [_jsxs(Box, { justifyContent: "center", gap: 1, children: [_jsx(Text, { color: palette.brand, bold: true, children: "DEV-PROXY" }), _jsx(Text, { color: palette.subtle, children: "\u00B7" }), _jsx(Text, { color: palette.success, bold: true, children: "ACTIVE" })] }), _jsx(Box, { justifyContent: "center", marginTop: 1, children: _jsx(Text, { color: palette.muted, children: "Inspect UI sleeping to reduce memory pressure" }) }), _jsx(Box, { justifyContent: "center", marginTop: 1, children: _jsx(Text, { color: palette.subtle, children: line }) }), _jsxs(Box, { justifyContent: "center", marginTop: 1, children: [_jsxs(Text, { color: palette.accent, bold: true, children: ["LISTENING :", PROXY_PORT] }), httpsEnabled && (_jsxs(_Fragment, { children: [_jsxs(Text, { color: palette.subtle, children: [" ", "\u00B7", " "] }), _jsxs(Text, { color: palette.success, bold: true, children: ["TLS :", HTTPS_PORT] })] }))] }), _jsx(Box, { justifyContent: "center", marginTop: 1, children: _jsx(Text, { color: palette.dim, children: "Proxying requests in background. Live inspect is paused." }) }), _jsxs(Box, { justifyContent: "center", marginTop: 1, children: [_jsx(Text, { color: palette.muted, children: "Press " }), _jsx(Text, { color: palette.accent, bold: true, children: "I" }), _jsx(Text, { color: palette.muted, children: " or " }), _jsx(Text, { color: palette.accent, bold: true, children: "Enter" }), _jsx(Text, { color: palette.muted, children: " to resume inspect" })] }), _jsx(Box, { justifyContent: "center", marginTop: 1, children: _jsx(Text, { color: palette.subtle, children: "Auto-sleeps after 60s without inspect interaction" }) })] }) }));
+}
+function InspectView({ httpsEnabled, termSize, searchMode, searchInput, detailScroll, onDetailScrollChange, onSelectionChange, focus, showDetail, noteActivity, }) {
+    const store = useStore();
+    const chromeRows = 1 + (searchMode ? 1 : 0) + 1;
+    const contentSize = {
+        rows: Math.max(1, termSize.rows - chromeRows),
+        cols: termSize.cols,
+    };
+    const listDims = getListDimensions(contentSize, showDetail);
+    const headerTokens = buildListHeaderTokens({
+        available: listDims.available,
+        count: store.events.length,
+        followMode: store.followMode,
+        errorsOnly: store.errorsOnly,
+        hideNextStatic: store.hideNextStatic,
+        searchQuery: store.searchQuery,
+    });
+    const scrollOffset = getScrollOffset(store.events.length, store.selectedIndex, listDims.visibleRows);
+    useMouse((event) => {
+        noteActivity();
+        const contentTop = 1 + (searchMode ? 1 : 0) + 1;
+        const contentBottom = contentTop + contentSize.rows - 1;
+        if (event.y < contentTop || event.y > contentBottom)
+            return;
+        const listWidth = showDetail ? Math.floor(termSize.cols / 2) : termSize.cols;
+        const listLeft = 1;
+        const listRight = listLeft + listWidth - 1;
+        const inList = event.x >= listLeft && event.x <= listRight;
+        const inDetail = event.x > listRight && event.x <= termSize.cols;
+        if (event.kind === "scroll") {
+            if (inList) {
+                if (event.direction === "up")
+                    selectPrev();
+                else
+                    selectNext();
+            }
+            else if (inDetail) {
+                pauseFollow();
+                onDetailScrollChange((s) => Math.max(0, s + (event.direction === "up" ? -1 : 1)));
+            }
+            return;
+        }
+        // After the scroll-return above, the only remaining kind is "down" + "left"
+        if (inList) {
+            const listInnerLeft = listLeft + 1 + LIST_PADDING_X;
+            const colInInner = event.x - listInnerLeft + 1;
+            if (colInInner < 1 || colInInner > listDims.innerWidth)
+                return;
+            const listHeaderRow = contentTop + 1;
+            if (event.y === listHeaderRow) {
+                const leftLen = tokensLength(headerTokens.left);
+                const rightLen = tokensLength(headerTokens.right);
+                if (colInInner <= leftLen) {
+                    const token = hitToken(headerTokens.left, colInInner);
+                    if (token?.kind === "follow")
+                        toggleFollow();
+                }
+                else if (rightLen > 0) {
+                    const rightStart = Math.max(1, listDims.innerWidth - rightLen + 1);
+                    if (colInInner >= rightStart) {
+                        const token = hitToken(headerTokens.right, colInInner - rightStart + 1);
+                        if (token?.kind === "err")
+                            toggleErrorsOnly();
+                        if (token?.kind === "quiet")
+                            toggleHideNoise();
+                    }
+                }
+                return;
+            }
+            const listDataStart = contentTop + 1 + LIST_RESERVED_LINES;
+            const rowIndex = event.y - listDataStart;
+            if (rowIndex >= 0 && rowIndex < listDims.visibleRows) {
+                selectByFilteredIndex(scrollOffset + rowIndex);
+            }
+        }
+        else if (inDetail) {
+            pauseFollow();
+        }
+    });
+    return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsx(StatusBar, { termSize: termSize, httpsEnabled: httpsEnabled }), searchMode && (_jsxs(Box, { children: [_jsx(Text, { color: palette.brand, bold: true, children: "FILTER" }), _jsxs(Text, { color: palette.subtle, children: [" ", "\u276F", " "] }), _jsx(Text, { color: palette.accent, bold: true, children: "/" }), _jsxs(Text, { color: palette.text, children: [" ", searchInput] }), _jsx(Text, { color: palette.muted, children: "\u2588" })] })), _jsxs(Box, { flexGrow: 1, children: [_jsx(RequestList, { halfWidth: showDetail, termSize: contentSize, active: focus === "list" }), showDetail && (_jsx(DetailPanel, { termSize: contentSize, scrollOffset: detailScroll, onScrollChange: onDetailScrollChange, onSelectionChange: onSelectionChange, active: focus === "detail" }))] }), _jsx(FooterBar, { termSize: termSize, focus: focus, showDetail: showDetail })] }));
+}
+export function App({ httpsEnabled = false }) {
+    const [showSplash, setShowSplash] = useState(true);
+    const [inspectMode, setInspectMode] = useState(false);
+    const [searchMode, setSearchMode] = useState(false);
+    const [searchInput, setSearchInput] = useState("");
+    const [detailScroll, setDetailScroll] = useState(0);
+    const [focus, setFocus] = useState("list");
+    const [showDetail, setShowDetail] = useState(true);
+    const idleTimerRef = useRef(null);
+    const { stdout } = useStdout();
+    const [termSize, setTermSize] = useState({
+        rows: stdout.rows,
+        cols: stdout.columns,
+    });
+    useEffect(() => {
+        const handle = () => {
+            setTermSize({ rows: stdout.rows, cols: stdout.columns });
+        };
+        stdout.on("resize", handle);
+        return () => {
+            stdout.off("resize", handle);
+        };
+    }, [stdout]);
+    const resetDetailScroll = useCallback(() => {
+        setDetailScroll(0);
+    }, []);
+    const clearInspectIdle = useCallback(() => {
+        if (idleTimerRef.current) {
+            clearTimeout(idleTimerRef.current);
+            idleTimerRef.current = null;
+        }
+    }, []);
+    const scheduleInspectIdle = useCallback(() => {
+        clearInspectIdle();
+        idleTimerRef.current = setTimeout(() => {
+            setInspectMode(false);
+            setSearchMode(false);
+        }, INSPECT_IDLE_MS);
+    }, [clearInspectIdle]);
+    const resumeInspect = useCallback(() => {
+        setInspectMode(true);
+        setShowDetail(true);
+        resetDetailScroll();
+    }, [resetDetailScroll]);
+    const noteInspectActivity = useCallback(() => {
+        if (!showSplash && inspectMode) {
+            scheduleInspectIdle();
+        }
+    }, [inspectMode, scheduleInspectIdle, showSplash]);
+    useEffect(() => {
+        setInspectActive(!showSplash && inspectMode);
+    }, [inspectMode, showSplash]);
+    useEffect(() => {
+        if (showSplash || !inspectMode) {
+            clearInspectIdle();
+            return;
+        }
+        scheduleInspectIdle();
+        return clearInspectIdle;
+    }, [clearInspectIdle, inspectMode, scheduleInspectIdle, showSplash]);
+    // ── Keyboard handler ──────────────────────────────────────
+    // State machine: Splash → (Enter) → Inspect ↔ (idle 60s / i) ↔ Standby
+    // Within Inspect: searchMode overlays on top; focus toggles list/detail
+    useInput((input, key) => {
+        if (input.includes(MOUSE_PREFIX))
+            return;
+        const lowerInput = input.toLowerCase();
+        // ── Splash gate ──
+        if (showSplash) {
+            if (key.return) {
+                setShowSplash(false);
+                setInspectMode(true);
+            }
+            return;
+        }
+        if (!inspectMode) {
+            if (lowerInput === "i" || key.return) {
+                resumeInspect();
+            }
+            return;
+        }
+        noteInspectActivity();
+        if (searchMode) {
+            if (key.escape) {
+                setSearchMode(false);
+                setSearchInput("");
+                setSearchQuery("");
+            }
+            else if (key.return) {
+                setSearchMode(false);
+            }
+            else if (key.backspace || key.delete) {
+                const next = searchInput.slice(0, -1);
+                setSearchInput(next);
+                setSearchQuery(next);
+            }
+            else if (input && !key.ctrl && !key.meta) {
+                const next = searchInput + input;
+                setSearchInput(next);
+                setSearchQuery(next);
+            }
+            return;
+        }
+        if (key.leftArrow) {
+            setFocus("list");
+        }
+        else if (key.rightArrow) {
+            if (!showDetail)
+                setShowDetail(true);
+            setFocus("detail");
+            pauseFollow();
+        }
+        else if (focus === "detail" && key.downArrow) {
+            setDetailScroll((s) => s + 1);
+        }
+        else if (focus === "detail" && key.upArrow) {
+            setDetailScroll((s) => Math.max(0, s - 1));
+        }
+        else if (focus === "list" && (input === "j" || key.downArrow)) {
+            selectNext();
+        }
+        else if (focus === "list" && (input === "k" || key.upArrow)) {
+            selectPrev();
+        }
+        else if (focus === "detail" && input === "j") {
+            // Allow j/k navigation from detail — switch to list and move
+            setFocus("list");
+            selectNext();
+        }
+        else if (focus === "detail" && input === "k") {
+            setFocus("list");
+            selectPrev();
+        }
+        else if (input === "g") {
+            selectFirst();
+        }
+        else if (input === "G") {
+            selectLast();
+        }
+        else if (input === "f") {
+            toggleFollow();
+        }
+        else if (input === "n") {
+            toggleHideNoise();
+        }
+        else if (input === "e") {
+            toggleErrorsOnly();
+        }
+        else if (input === "x") {
+            clearAll();
+        }
+        else if (input === "/") {
+            setSearchMode(true);
+            setSearchInput(getSearchQuery());
+        }
+        else if (key.return) {
+            if (!showDetail)
+                setShowDetail(true);
+            setFocus("detail");
+            pauseFollow();
+            resetDetailScroll();
+        }
+        else if (key.escape) {
+            if (getSearchQuery()) {
+                setSearchInput("");
+                setSearchQuery("");
+            }
+            else if (showDetail) {
+                setShowDetail(false);
+                setFocus("list");
+            }
+        }
+        else if (input === "r") {
+            const info = getSelectedReplayInfo();
+            if (info) {
+                const { hostname, port } = resolveReplayTarget(info);
+                // Build replay headers from original request
+                const replayHeaders = {};
+                for (const [key, value] of Object.entries(info.requestHeaders)) {
+                    // Skip hop-by-hop and forwarding headers — they belong to the original hop
+                    if (key === "host" ||
+                        key === "connection" ||
+                        key === "keep-alive" ||
+                        key === "transfer-encoding" ||
+                        key === "content-length" ||
+                        key.startsWith("x-forwarded-"))
+                        continue;
+                    replayHeaders[key] = value;
+                }
+                replayHeaders.host = info.host;
+                const req = info.protocol === "https"
+                    ? https.request({
+                        hostname,
+                        port,
+                        path: info.url,
+                        method: info.method,
+                        headers: replayHeaders,
+                        servername: hostname,
+                        rejectUnauthorized: false,
+                    })
+                    : http.request({
+                        hostname,
+                        port,
+                        path: info.url,
+                        method: info.method,
+                        headers: replayHeaders,
+                    });
+                req.on("error", () => {
+                    /* fire-and-forget: replay failure is non-critical */
+                });
+                req.end();
+            }
+        }
+        else if (input === "y") {
+            const curl = getSelectedCurl();
+            if (curl) {
+                copyToClipboard(curl);
+            }
+        }
+    });
+    if (showSplash) {
+        return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsx(StatusBar, { termSize: termSize, httpsEnabled: httpsEnabled }), _jsx(Splash, { httpsEnabled: httpsEnabled })] }));
+    }
+    if (!inspectMode) {
+        return _jsx(StandbyView, { termSize: termSize, httpsEnabled: httpsEnabled });
+    }
+    return (_jsx(InspectView, { httpsEnabled: httpsEnabled, termSize: termSize, searchMode: searchMode, searchInput: searchInput, detailScroll: detailScroll, onDetailScrollChange: setDetailScroll, onSelectionChange: resetDetailScroll, focus: focus, showDetail: showDetail, noteActivity: noteInspectActivity }));
+}