@reopt-ai/dev-proxy 1.1.1

package/dist/components/detail-panel.js

@@ -0,0 +1,122 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useEffect, useRef } from "react";
+import { Box, Text } from "ink";
+import { useSelected, useSelectedDetail } from "../store.js";
+import { formatTime, formatDuration, formatSize, methodColor, statusColor, durationColor, truncate, palette, } from "../utils/format.js";
+const BORDER_ROWS = 2;
+const BORDER_COLS = 2;
+const PADDING_X = 1;
+// summary(3) + marginBottom(1) + separator(1)
+const DETAIL_RESERVED = 5;
+function buildDetailLines(detail, nameMax, valueMax) {
+    const lines = [];
+    const pushPlain = (text) => {
+        lines.push(_jsx(Box, { children: text }, `l-${lines.length}`));
+    };
+    const blank = () => {
+        pushPlain(_jsx(Text, { children: " " }));
+    };
+    if (!detail) {
+        pushPlain(_jsx(Text, { color: palette.muted, italic: true, children: "Detail expired (only last 50 requests retained)" }));
+        return lines;
+    }
+    const renderEntries = (entries, sep) => {
+        if (entries.length === 0) {
+            pushPlain(_jsxs(Text, { color: palette.muted, italic: true, children: [" ", "(empty)"] }));
+            return;
+        }
+        for (const [name, value] of entries) {
+            const display = Array.isArray(value) ? value.join(", ") : value;
+            pushPlain(_jsxs(_Fragment, { children: [_jsxs(Text, { color: palette.accent, children: [" ", truncate(name, nameMax)] }), _jsx(Text, { color: palette.subtle, children: sep }), _jsx(Text, { color: palette.dim, children: truncate(display, valueMax) })] }));
+        }
+    };
+    // Request Headers
+    const reqEntries = Object.entries(detail.requestHeaders);
+    pushPlain(_jsxs(_Fragment, { children: [_jsxs(Text, { color: palette.success, bold: true, children: ["\u25B2", " Request Headers"] }), _jsxs(Text, { color: palette.muted, children: [" (", reqEntries.length, ")"] })] }));
+    renderEntries(reqEntries, ": ");
+    blank();
+    // Response Headers
+    const resEntries = Object.entries(detail.responseHeaders);
+    const hasResponse = resEntries.length > 0;
+    pushPlain(_jsxs(_Fragment, { children: [_jsxs(Text, { color: palette.accent, bold: true, children: ["\u25BC", " Response Headers"] }), _jsxs(Text, { color: palette.muted, children: [" ", hasResponse ? `(${resEntries.length})` : "(pending)"] })] }));
+    if (hasResponse) {
+        renderEntries(resEntries, ": ");
+    }
+    else {
+        pushPlain(_jsxs(Text, { color: palette.muted, italic: true, children: [" ", "(awaiting response)"] }));
+    }
+    blank();
+    // Cookies
+    const cookieEntries = Object.entries(detail.cookies);
+    pushPlain(_jsxs(_Fragment, { children: [_jsxs(Text, { color: palette.warning, bold: true, children: ["\u25CF", " Cookies"] }), _jsxs(Text, { color: palette.muted, children: [" (", cookieEntries.length, ")"] })] }));
+    renderEntries(cookieEntries, " = ");
+    blank();
+    // Query
+    const queryEntries = Object.entries(detail.query);
+    pushPlain(_jsxs(_Fragment, { children: [_jsxs(Text, { color: palette.info, bold: true, children: ["\u25CF", " Query"] }), _jsxs(Text, { color: palette.muted, children: [" (", queryEntries.length, ")"] })] }));
+    renderEntries(queryEntries, " = ");
+    return lines;
+}
+function buildWsDetailLines() {
+    const lines = [];
+    lines.push(_jsx(Box, { children: _jsx(Text, { color: palette.muted, italic: true, children: "(WebSocket \u2014 no headers/body captured)" }) }, "ws-note"));
+    return lines;
+}
+function PanelEmpty({ active, height }) {
+    return (_jsxs(Box, { width: "50%", height: height, flexDirection: "column", borderStyle: "double", borderColor: active ? palette.accent : palette.border, paddingX: 1, paddingY: 1, children: [_jsx(Text, { color: palette.brand, bold: true, children: "INSPECTOR" }), _jsxs(Text, { color: palette.muted, italic: true, children: ["\u25CB", " Select a request to inspect"] })] }));
+}
+function HttpSummary({ event, urlMax, targetMax, }) {
+    const sColor = event.error ? palette.error : statusColor(event.statusCode);
+    const status = event.error
+        ? `ERR ${event.error}`
+        : String(event.statusCode ?? "\u2022\u2022\u2022");
+    return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: palette.brand, bold: true, children: "INSPECT" }), _jsx(Text, { color: palette.subtle, children: "\u2022" }), _jsx(Text, { color: methodColor(event.method), bold: true, children: event.method }), _jsx(Text, { color: palette.text, bold: true, children: truncate(event.url, urlMax) })] }), _jsxs(Box, { gap: 1, marginTop: 0, children: [_jsx(Text, { color: palette.dim, children: formatTime(event.timestamp) }), _jsx(Text, { color: sColor, bold: true, children: status }), _jsx(Text, { color: durationColor(event.duration), children: formatDuration(event.duration) }), event.responseSize !== undefined && (_jsx(Text, { color: palette.dim, children: formatSize(event.responseSize) }))] }), _jsxs(Box, { children: [_jsx(Text, { color: palette.muted, children: event.host }), _jsxs(Text, { color: palette.subtle, children: [" ", "\u2192", " "] }), _jsx(Text, { color: palette.dim, children: truncate(event.target, targetMax) })] })] }));
+}
+function WsSummary({ event, urlMax, targetMax, }) {
+    const wsStatusColor = event.wsStatus === "open"
+        ? palette.success
+        : event.wsStatus === "error"
+            ? palette.error
+            : palette.dim;
+    const wsStatusText = event.wsStatus.toUpperCase();
+    return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: palette.brand, bold: true, children: "INSPECT" }), _jsx(Text, { color: palette.subtle, children: "\u2022" }), _jsx(Text, { color: palette.ws, bold: true, children: "WS" }), _jsx(Text, { color: palette.text, bold: true, children: truncate(event.url, urlMax) })] }), _jsxs(Box, { gap: 1, marginTop: 0, children: [_jsx(Text, { color: palette.dim, children: formatTime(event.timestamp) }), _jsx(Text, { color: wsStatusColor, bold: true, children: wsStatusText }), _jsx(Text, { color: durationColor(event.duration), children: formatDuration(event.duration) })] }), _jsxs(Box, { children: [_jsx(Text, { color: palette.muted, children: event.host }), _jsxs(Text, { color: palette.subtle, children: [" ", "\u2192", " "] }), _jsx(Text, { color: palette.dim, children: truncate(event.target, targetMax) })] }), event.error && (_jsx(Box, { children: _jsx(Text, { color: palette.error, children: truncate(event.error, urlMax) }) }))] }));
+}
+export function DetailPanel({ termSize, scrollOffset, onScrollChange, onSelectionChange, active, }) {
+    const event = useSelected();
+    const detail = useSelectedDetail();
+    const panelWidth = Math.max(20, Math.floor(termSize.cols / 2));
+    const panelHeight = Math.max(4, termSize.rows);
+    const innerWidth = Math.max(12, panelWidth - BORDER_COLS - PADDING_X * 2);
+    const innerHeight = Math.max(1, panelHeight - BORDER_ROWS);
+    const nameMax = Math.max(8, Math.floor(innerWidth * 0.3));
+    const valueMax = Math.max(12, innerWidth - nameMax - 4);
+    const urlMax = Math.max(16, innerWidth - 10);
+    const targetMax = Math.max(16, innerWidth - 6);
+    const separatorWidth = Math.max(1, innerWidth - 1);
+    // Reset scroll when selection changes
+    const prevEventIdRef = useRef(undefined);
+    useEffect(() => {
+        if (event?.id !== prevEventIdRef.current) {
+            prevEventIdRef.current = event?.id;
+            onSelectionChange();
+        }
+    }, [event?.id, onSelectionChange]);
+    const availableRows = Math.max(1, innerHeight - DETAIL_RESERVED);
+    const isWs = event?.type === "ws";
+    const lines = React.useMemo(() => (isWs ? buildWsDetailLines() : buildDetailLines(detail, nameMax, valueMax)), [isWs, detail, nameMax, valueMax]);
+    const totalLines = lines.length;
+    const maxScroll = Math.max(0, totalLines - availableRows);
+    const clampedOffset = Math.min(scrollOffset, maxScroll);
+    // Sync clamped value back to parent after paint (avoids flicker from render-time setState)
+    useEffect(() => {
+        if (scrollOffset > maxScroll) {
+            onScrollChange(() => maxScroll);
+        }
+    }, [scrollOffset, maxScroll, onScrollChange]);
+    // When the event changes, the parent's onSelectionChange resets scrollOffset to 0.
+    // clampedOffset will be 0 on the subsequent render.
+    const displayOffset = clampedOffset;
+    if (!event)
+        return _jsx(PanelEmpty, { active: active, height: panelHeight });
+    return (_jsxs(Box, { width: "50%", height: panelHeight, flexDirection: "column", borderStyle: "double", borderColor: active ? palette.accent : palette.border, paddingX: PADDING_X, children: [event.type === "ws" ? (_jsx(WsSummary, { event: event, urlMax: urlMax, targetMax: targetMax })) : (_jsx(HttpSummary, { event: event, urlMax: urlMax, targetMax: targetMax })), _jsx(Text, { color: palette.subtle, children: "─".repeat(separatorWidth) }), _jsx(Box, { height: availableRows, flexDirection: "column", children: lines.slice(displayOffset, displayOffset + availableRows) })] }));
+}

package/dist/components/footer-bar.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState, useEffect } from "react";
+import { Box, Text } from "ink";
+import { palette } from "../utils/format.js";
+function HintItem({ keys, label }) {
+    return (_jsxs(Text, { children: [_jsx(Text, { color: palette.accent, bold: true, children: keys }), _jsxs(Text, { color: palette.muted, children: [" ", label] })] }));
+}
+const MEM_INTERVAL = 5000;
+function formatMB(bytes) {
+    const mb = bytes / (1024 * 1024);
+    return mb >= 100 ? `${mb.toFixed(0)} MB` : `${mb.toFixed(1)} MB`;
+}
+/**
+ * Standalone memory display — does NOT subscribe to the main store.
+ * Only triggers a re-render when the formatted string actually changes,
+ * keeping FooterBar completely idle during normal request traffic.
+ */
+function useMemoryDisplay() {
+    const [display, setDisplay] = useState(() => formatMB(process.memoryUsage.rss()));
+    useEffect(() => {
+        const id = setInterval(() => {
+            setDisplay((prev) => {
+                const next = formatMB(process.memoryUsage.rss());
+                return prev === next ? prev : next;
+            });
+        }, MEM_INTERVAL);
+        return () => {
+            clearInterval(id);
+        };
+    }, []);
+    return display;
+}
+export function FooterBar({ termSize, focus, showDetail }) {
+    const mem = useMemoryDisplay();
+    const base = [
+        ...(showDetail ? [{ keys: "←/→", label: "FOCUS" }] : []),
+        focus === "detail" ? { keys: "↑/↓", label: "SCROLL" } : { keys: "↑/↓", label: "NAV" },
+        { keys: "J/K", label: "NAV" },
+        { keys: "G", label: "TOP" },
+        { keys: "SHIFT+G", label: "END" },
+        { keys: "ENTER", label: showDetail ? "INSPECT" : "DETAIL" },
+        { keys: "/", label: "FILTER" },
+        { keys: "F", label: "FOLLOW" },
+        { keys: "N", label: "QUIET" },
+        { keys: "E", label: "ERRORS" },
+        { keys: "R", label: "REPLAY" },
+        { keys: "Y", label: "COPY" },
+        { keys: "X", label: "CLEAR" },
+        ...(showDetail ? [{ keys: "ESC", label: "CLOSE" }] : []),
+    ];
+    const maxHints = termSize.cols >= 140
+        ? 12
+        : termSize.cols >= 120
+            ? 10
+            : termSize.cols >= 100
+                ? 8
+                : termSize.cols >= 80
+                    ? 6
+                    : 4;
+    const hints = base.slice(0, maxHints);
+    return (_jsxs(Box, { width: "100%", paddingX: 1, justifyContent: "space-between", children: [_jsx(Box, { gap: 1, children: hints.map((hint, i) => (_jsxs(React.Fragment, { children: [i > 0 && _jsx(Text, { color: palette.subtle, children: "\u00B7" }), _jsx(HintItem, { ...hint })] }, `${hint.keys}-${hint.label}`))) }), _jsx(Text, { color: palette.dim, children: mem })] }));
+}

package/dist/components/request-list.js

@@ -0,0 +1,104 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useMemo } from "react";
+import { Box, Text } from "ink";
+import { useStore } from "../store.js";
+import { DOMAIN, PROXY_PORT } from "../proxy/routes.js";
+import { formatTime, formatDuration, formatSize, methodColor, statusColor, durationColor, compactUrl, truncate, pad, subdomainFrom, subdomainColor, palette, } from "../utils/format.js";
+import { LIST_COL as COL, getListDimensions, buildListHeaderTokens, LIST_PADDING_X, } from "../utils/list-layout.js";
+function headerTokenColor(token) {
+    switch (token.kind) {
+        case "requests":
+            return { color: palette.brand, bold: true };
+        case "follow":
+            return {
+                color: token.active ? palette.success : palette.dim,
+                bold: !!token.active,
+            };
+        case "meta":
+            return { color: palette.dim };
+        case "filter-label":
+            return { color: palette.subtle };
+        case "err":
+            return {
+                color: token.active ? palette.error : palette.dim,
+                bold: !!token.active,
+            };
+        case "quiet":
+            return {
+                color: token.active ? palette.accent : palette.dim,
+                bold: !!token.active,
+            };
+        case "query":
+            return { color: palette.accent, bold: true };
+        default:
+            return { color: palette.text };
+    }
+}
+const ListHeader = memo(function ListHeader({ count, available, followMode, errorsOnly, hideNextStatic, searchQuery, }) {
+    const { left, right } = buildListHeaderTokens({
+        available,
+        count,
+        followMode,
+        errorsOnly,
+        hideNextStatic,
+        searchQuery,
+    });
+    return (_jsxs(Box, { justifyContent: "space-between", children: [_jsx(Box, { gap: 1, children: left.map((token) => {
+                    const { color, bold } = headerTokenColor(token);
+                    return (_jsx(Text, { color: color, bold: bold, children: token.text }, `left-${token.kind}`));
+                }) }), _jsx(Box, { gap: 1, children: right.map((token, i) => {
+                    const { color, bold } = headerTokenColor(token);
+                    return (_jsx(Text, { color: color, bold: bold, children: token.text }, `right-${token.kind}-${i}`));
+                }) })] }));
+});
+const TableHeader = memo(function TableHeader({ pathW }) {
+    return (_jsx(Box, { children: _jsxs(Text, { color: palette.brand, bold: true, children: [" ", pad("REQ TIME", COL.time), pad("METHOD", COL.method), pad("SUB", COL.sub), pad("URL", pathW), pad("ST", COL.status), pad("SIZE", COL.size), "DR"] }) }));
+});
+function EmptyState() {
+    return (_jsxs(Box, { flexDirection: "column", paddingY: 2, paddingX: 2, children: [_jsxs(Text, { color: palette.brand, bold: true, children: ["\u25C9", " Listening for traffic", "\u2026"] }), _jsxs(Text, { color: palette.muted, children: ["Open ", _jsx(Text, { color: palette.accent, bold: true, children: `http://*.${DOMAIN}:${PROXY_PORT}` }), " ", "in your browser"] })] }));
+}
+const RequestRow = memo(function RequestRow({ event, isSelected, isEven, pathW, }) {
+    const pointer = isSelected ? "\u27A4" : " ";
+    const time = formatTime(event.timestamp);
+    const method = event.method.toUpperCase();
+    const sub = subdomainFrom(event.host);
+    const path = truncate(compactUrl(event.url), pathW - 1);
+    // WS-specific rendering
+    if (event.type === "ws") {
+        const wsStatusText = event.wsStatus === "open" ? "OPEN" : event.wsStatus === "closed" ? "CLOS" : "ERR";
+        const wsStatusColor = event.wsStatus === "open"
+            ? palette.success
+            : event.wsStatus === "error"
+                ? palette.error
+                : palette.dim;
+        const dur = formatDuration(event.duration);
+        const dColor = durationColor(event.duration);
+        const rowBg = isSelected ? palette.selection : undefined;
+        return (_jsx(Box, { children: _jsxs(Text, { backgroundColor: rowBg, dimColor: !isSelected && !isEven, children: [_jsx(Text, { color: isSelected ? palette.accent : palette.subtle, children: pointer }), _jsxs(Text, { color: isSelected ? palette.accent : palette.muted, children: [time, " "] }), _jsx(Text, { color: palette.ws, bold: true, children: pad(method, 7) }), _jsx(Text, { children: " " }), _jsx(Text, { color: subdomainColor(sub), bold: isSelected, children: pad(sub, COL.sub - 1) }), _jsx(Text, { children: " " }), _jsx(Text, { color: isSelected ? palette.text : palette.dim, children: pad(path, pathW - 1) }), _jsx(Text, { color: wsStatusColor, bold: true, children: pad(wsStatusText, 5) }), _jsx(Text, { color: palette.muted, children: pad("-", COL.size) }), _jsxs(Text, { color: dColor, children: [" ", dur] })] }) }));
+    }
+    // HTTP rendering
+    const dur = formatDuration(event.duration);
+    const size = formatSize(event.responseSize);
+    const status = event.error
+        ? "ERR"
+        : event.statusCode
+            ? String(event.statusCode)
+            : "\u2022\u2022\u2022";
+    const sColor = event.error ? palette.error : statusColor(event.statusCode);
+    const dColor = durationColor(event.duration);
+    // Selected row: subtle background tint + brighter text, no inverse
+    const rowBg = isSelected ? palette.selection : undefined;
+    return (_jsx(Box, { children: _jsxs(Text, { backgroundColor: rowBg, dimColor: !isSelected && !isEven, children: [_jsx(Text, { color: isSelected ? palette.accent : palette.subtle, children: pointer }), _jsxs(Text, { color: isSelected ? palette.accent : palette.muted, children: [time, " "] }), _jsx(Text, { color: methodColor(method), bold: true, children: pad(method, 7) }), _jsx(Text, { children: " " }), _jsx(Text, { color: subdomainColor(sub), bold: isSelected, children: pad(sub, COL.sub - 1) }), _jsx(Text, { children: " " }), _jsx(Text, { color: isSelected ? palette.text : palette.dim, children: pad(path, pathW - 1) }), _jsx(Text, { color: sColor, bold: !!event.statusCode || !!event.error, children: pad(status, 5) }), _jsx(Text, { color: palette.dim, children: pad(size, COL.size) }), _jsxs(Text, { color: dColor, children: [" ", dur] })] }) }));
+});
+export function RequestList({ halfWidth, termSize, active }) {
+    const { events, selectedIndex, followMode, errorsOnly, hideNextStatic, searchQuery } = useStore();
+    const { innerWidth, pathW, visibleRows } = getListDimensions(termSize, halfWidth);
+    // Auto-scroll: keep selectedIndex visible
+    const scrollOffset = useMemo(() => {
+        if (events.length <= visibleRows)
+            return 0;
+        return Math.max(0, Math.min(selectedIndex - Math.floor(visibleRows / 2), events.length - visibleRows));
+    }, [events.length, selectedIndex, visibleRows]);
+    const visible = useMemo(() => events.slice(scrollOffset, scrollOffset + visibleRows), [events, scrollOffset, visibleRows]);
+    return (_jsx(Box, { width: halfWidth ? "50%" : "100%", height: termSize.rows, borderStyle: "double", borderColor: active ? palette.accent : palette.border, paddingX: LIST_PADDING_X, children: _jsxs(Box, { flexDirection: "column", flexGrow: 1, width: "100%", children: [_jsx(ListHeader, { count: events.length, available: innerWidth, followMode: followMode, errorsOnly: errorsOnly, hideNextStatic: hideNextStatic, searchQuery: searchQuery }), _jsx(TableHeader, { pathW: pathW }), _jsx(Text, { color: palette.subtle, children: "─".repeat(Math.max(1, innerWidth - 1)) }), events.length === 0 ? (_jsx(EmptyState, {})) : (visible.map((event, i) => (_jsx(RequestRow, { event: event, isSelected: scrollOffset + i === selectedIndex, isEven: (scrollOffset + i) % 2 === 0, pathW: pathW }, event.id))))] }) }));
+}

package/dist/components/splash.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import { DOMAIN, ROUTES, DEFAULT_TARGET, PROXY_PORT, HTTPS_PORT, } from "../proxy/routes.js";
+import { useWorktrees } from "../proxy/worktrees.js";
+import { palette } from "../utils/format.js";
+export function Splash({ httpsEnabled = false }) {
+    const sorted = Object.entries(ROUTES).sort(([a], [b]) => a.localeCompare(b));
+    const worktrees = useWorktrees();
+    const line = "─".repeat(44);
+    return (_jsx(Box, { alignItems: "center", justifyContent: "center", flexGrow: 1, children: _jsxs(Box, { flexDirection: "column", borderStyle: "double", borderColor: palette.accent, paddingX: 4, paddingY: 1, children: [_jsx(Box, { justifyContent: "center", children: _jsx(Text, { color: palette.accent, bold: true, children: "DEV-PROXY" }) }), _jsx(Box, { justifyContent: "center", marginTop: 1, children: _jsx(Text, { color: palette.dim, children: "LIVE TRAFFIC INSPECTOR" }) }), _jsx(Box, { justifyContent: "center", marginTop: 1, children: _jsx(Text, { color: palette.subtle, children: line }) }), _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [sorted.map(([sub, target]) => (_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: palette.brand, children: `${sub}.${DOMAIN}`.padEnd(22) }), _jsx(Text, { color: palette.subtle, children: "\u279C" }), _jsx(Text, { color: palette.dim, children: target })] }, sub))), DEFAULT_TARGET && (_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: palette.muted, children: `*.${DOMAIN}`.padEnd(22) }), _jsx(Text, { color: palette.subtle, children: "\u279C" }), _jsx(Text, { color: palette.dim, children: DEFAULT_TARGET })] }))] }), (() => {
+                    const wts = [...worktrees.entries()]
+                        .filter(([b]) => b !== "main")
+                        .sort(([a], [b]) => a.localeCompare(b));
+                    if (wts.length === 0)
+                        return null;
+                    return (_jsxs(_Fragment, { children: [_jsx(Box, { justifyContent: "center", marginTop: 1, children: _jsx(Text, { color: palette.subtle, children: line }) }), _jsx(Box, { justifyContent: "center", marginTop: 1, children: _jsx(Text, { color: palette.dim, children: "WORKTREES" }) }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: wts.map(([branch, entry]) => {
+                                    let portLabel;
+                                    if ("ports" in entry) {
+                                        const vals = Object.values(entry.ports);
+                                        const first = vals[0];
+                                        portLabel =
+                                            vals.length > 1
+                                                ? `:${first} +${vals.length - 1} more`
+                                                : `:${first}`;
+                                    }
+                                    else {
+                                        portLabel = `:${entry.port}`;
+                                    }
+                                    return (_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: palette.accent, children: branch.padEnd(14) }), _jsx(Text, { color: palette.muted, children: portLabel.padEnd(6) }), _jsx(Text, { color: palette.dim, children: `${branch}--*.${DOMAIN}` })] }, branch));
+                                }) })] }));
+                })(), _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: [_jsx(Text, { color: palette.subtle, children: " \u00B7 " }), _jsxs(Text, { color: palette.success, bold: true, children: ["TLS :", HTTPS_PORT] })] }))] }), _jsxs(Box, { justifyContent: "center", marginTop: 1, children: [_jsx(Text, { color: palette.muted, children: "Press " }), _jsx(Text, { color: palette.accent, bold: true, children: "Enter" }), _jsx(Text, { color: palette.muted, children: " to arm" })] }), _jsx(Box, { justifyContent: "center", marginTop: 1, children: _jsx(Text, { color: palette.subtle, children: "/ filter \u00B7 j/k nav \u00B7 r replay \u00B7 y copy" }) })] }) }));
+}

package/dist/components/status-bar.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import { PROXY_PORT, HTTPS_PORT } from "../proxy/routes.js";
+import { useWorktrees } from "../proxy/worktrees.js";
+import { useStore } from "../store.js";
+import { truncate, palette } from "../utils/format.js";
+function Tag({ label, color }) {
+    return _jsx(Text, { color: color, bold: true, children: `[${label}]` });
+}
+export function StatusBar({ termSize, httpsEnabled }) {
+    const { followMode, events, errorsOnly, hideNextStatic, searchQuery, activeWsCount } = useStore();
+    const wts = useWorktrees();
+    const wtCount = [...wts.keys()].filter((k) => k !== "main").length;
+    const showFlags = termSize.cols >= 80;
+    const showSearch = !!searchQuery && termSize.cols >= 90;
+    const showHints = termSize.cols >= 120;
+    const query = searchQuery ? truncate(searchQuery, showHints ? 28 : 16) : "";
+    return (_jsxs(Box, { width: "100%", paddingX: 1, justifyContent: "space-between", children: [_jsxs(Box, { gap: 1, children: [_jsxs(Text, { color: palette.brand, bold: true, children: ["\u25C9", " DEV-PROXY"] }), _jsx(Text, { color: palette.subtle, children: "\u2502" }), _jsx(Text, { color: palette.success, bold: true, children: "LIVE" }), _jsx(Text, { color: palette.subtle, children: "\u2502" }), _jsxs(Text, { color: palette.accent, bold: true, children: [":", PROXY_PORT] }), httpsEnabled && (_jsxs(_Fragment, { children: [_jsx(Text, { color: palette.subtle, children: "\u2502" }), _jsxs(Text, { color: palette.success, bold: true, children: ["TLS :", HTTPS_PORT] })] })), wtCount > 0 && (_jsxs(_Fragment, { children: [_jsx(Text, { color: palette.subtle, children: "\u2502" }), _jsx(Tag, { label: `WT ${wtCount}`, color: palette.accent })] }))] }), _jsxs(Box, { gap: 1, children: [_jsxs(Text, { color: palette.dim, children: [events.length, " REQ"] }), activeWsCount > 0 && (_jsxs(Text, { color: palette.ws, bold: true, children: ["WS ", activeWsCount] })), showFlags && followMode && _jsx(Tag, { label: "FOL", color: palette.success }), showFlags && errorsOnly && _jsx(Tag, { label: "ERR", color: palette.error }), showFlags && hideNextStatic && _jsx(Tag, { label: "QUIET", color: palette.muted }), showSearch && _jsx(Tag, { label: `/${query}`, color: palette.accent }), showHints && _jsx(Text, { color: palette.muted, children: "J/K \u00B7 ENTER \u00B7 /" })] })] }));
+}

package/dist/hooks/use-mouse.js

@@ -0,0 +1,66 @@
+import { useEffect, useRef } from "react";
+import { useStdin, useStdout } from "ink";
+const ENABLE_MOUSE = "\x1b[?1000h\x1b[?1006h";
+const DISABLE_MOUSE = "\x1b[?1000l\x1b[?1006l";
+// eslint-disable-next-line no-control-regex -- intentional terminal escape sequence matching
+const SGR_RE = /\x1b\[<(\d+);(\d+);(\d+)([mM])/g;
+function parseSgrEvent(code, x, y, isDown) {
+    const isWheel = (code & 64) === 64;
+    if (isWheel) {
+        const direction = (code & 1) === 1 ? "down" : "up";
+        return { kind: "scroll", direction, x, y };
+    }
+    if (!isDown)
+        return null;
+    const button = code & 3;
+    if (button === 0)
+        return { kind: "down", button: "left", x, y };
+    return null;
+}
+export function useMouse(handler) {
+    const { stdout } = useStdout();
+    const { internal_eventEmitter } = useStdin();
+    const handlerRef = useRef(handler);
+    const bufferRef = useRef("");
+    useEffect(() => {
+        handlerRef.current = handler;
+    }, [handler]);
+    useEffect(() => {
+        stdout.write(ENABLE_MOUSE);
+        const onInput = (data) => {
+            const chunk = typeof data === "string" ? data : data.toString("utf8");
+            bufferRef.current += chunk;
+            let match;
+            let lastIndex = 0;
+            SGR_RE.lastIndex = 0;
+            while ((match = SGR_RE.exec(bufferRef.current)) !== null) {
+                lastIndex = SGR_RE.lastIndex;
+                const code = Number(match[1]);
+                const x = Number(match[2]);
+                const y = Number(match[3]);
+                const isDown = match[4] === "M";
+                const event = parseSgrEvent(code, x, y, isDown);
+                if (event)
+                    handlerRef.current(event);
+            }
+            if (lastIndex > 0) {
+                bufferRef.current = bufferRef.current.slice(lastIndex);
+            }
+            else {
+                const prefixIndex = bufferRef.current.lastIndexOf("\x1b[<");
+                if (prefixIndex === -1)
+                    bufferRef.current = "";
+                else if (prefixIndex > 0)
+                    bufferRef.current = bufferRef.current.slice(prefixIndex);
+            }
+            if (bufferRef.current.length > 2000) {
+                bufferRef.current = bufferRef.current.slice(-200);
+            }
+        };
+        internal_eventEmitter.on("input", onInput);
+        return () => {
+            internal_eventEmitter.removeListener("input", onInput);
+            stdout.write(DISABLE_MOUSE);
+        };
+    }, [stdout, internal_eventEmitter]);
+}

package/dist/index.js

@@ -0,0 +1,153 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+process.title = "dev-proxy";
+import { render } from "ink";
+import { createProxyServer, startProxyServer, destroyAgents } from "./proxy/server.js";
+import { loadRegistry, stopRegistry } from "./proxy/worktrees.js";
+import { pushHttp, pushWs } from "./store.js";
+import { App } from "./components/app.js";
+loadRegistry();
+const { server, httpsServer, emitter } = createProxyServer();
+let shuttingDown = false;
+emitter.on("request", (event) => {
+    pushHttp(event);
+});
+emitter.on("request:complete", (event) => {
+    pushHttp(event);
+});
+emitter.on("request:error", (event) => {
+    pushHttp(event);
+});
+emitter.on("ws", (event) => {
+    pushWs(event);
+});
+try {
+    await startProxyServer(server, httpsServer);
+}
+catch (err) {
+    console.error(`[dev-proxy] Failed to start: ${err.message}`);
+    process.exit(1);
+}
+// ── Alternate screen buffer (fullscreen) ─────────────────────
+process.stdout.write("\x1b[?1049h\x1b[2J\x1b[H");
+// ── Synchronized output wrapper ──────────────────────────────
+// Buffers all stdout.write calls within the same event-loop tick and
+// flushes them as a single atomic frame wrapped in DEC synchronized
+// output markers (mode 2026). This prevents the terminal from painting
+// intermediate states (cursor moves, partial line rewrites) which the
+// user would perceive as flicker.
+// Supported: iTerm2, kitty, WezTerm, Alacritty, Windows Terminal, etc.
+// Unsupported terminals safely ignore the escape sequences.
+const _raw = process.stdout.write.bind(process.stdout);
+const MAX_BUF = 100;
+let _buf = [];
+let _pending = false;
+let altScreenActive = true;
+process.stdout.write = ((chunk, encodingOrCb, cb) => {
+    _buf.push(typeof chunk === "string"
+        ? chunk
+        : Buffer.isBuffer(chunk)
+            ? chunk.toString(typeof encodingOrCb === "string" ? encodingOrCb : "utf-8")
+            : String(chunk));
+    // Force early flush if buffer grows too large
+    if (_buf.length >= MAX_BUF) {
+        flushBufferedFrame();
+        return true;
+    }
+    if (!_pending) {
+        _pending = true;
+        setImmediate(() => {
+            try {
+                const frame = _buf.join("");
+                _buf = [];
+                if (frame)
+                    _raw("\x1b[?2026h" + frame + "\x1b[?2026l");
+            }
+            catch {
+                // stdout closed or broken — drop the frame silently
+            }
+            finally {
+                _pending = false;
+            }
+        });
+    }
+    const callback = typeof encodingOrCb === "function" ? encodingOrCb : cb;
+    if (callback)
+        callback();
+    return true;
+});
+/** Flush any buffered frame immediately via _raw (bypass setImmediate) */
+function flushBufferedFrame() {
+    try {
+        if (_buf.length > 0) {
+            const frame = _buf.join("");
+            _buf = [];
+            if (frame)
+                _raw(frame);
+        }
+    }
+    catch {
+        /* ignored: stdout may be closed during shutdown */
+    }
+    _pending = false;
+}
+const app = render(_jsx(App, { httpsEnabled: httpsServer !== null }), {
+    patchConsole: false,
+});
+// ── Graceful shutdown ────────────────────────────────────────
+function restoreTerminal() {
+    if (!altScreenActive)
+        return;
+    altScreenActive = false;
+    _raw("\x1b[?1049l");
+}
+function shutdown(code = 0) {
+    if (shuttingDown)
+        return;
+    shuttingDown = true;
+    stopRegistry();
+    try {
+        app.unmount();
+    }
+    catch {
+        /* ignored: best-effort cleanup */
+    }
+    try {
+        server.close();
+    }
+    catch {
+        /* ignored: best-effort cleanup */
+    }
+    try {
+        httpsServer?.close();
+    }
+    catch {
+        /* ignored: best-effort cleanup */
+    }
+    destroyAgents();
+    // Drain any buffered frame before leaving alternate screen
+    flushBufferedFrame();
+    restoreTerminal();
+    process.exit(code);
+}
+process.on("SIGINT", () => {
+    shutdown(0);
+});
+process.on("SIGTERM", () => {
+    shutdown(0);
+});
+process.on("SIGHUP", () => {
+    shutdown(0);
+});
+process.on("uncaughtException", (err, origin) => {
+    flushBufferedFrame();
+    restoreTerminal();
+    console.error(`[dev-proxy] Uncaught exception (${origin}): ${err.stack ?? err.message}`);
+    shutdown(1);
+});
+process.on("unhandledRejection", (reason) => {
+    const message = reason instanceof Error ? (reason.stack ?? reason.message) : String(reason);
+    flushBufferedFrame();
+    restoreTerminal();
+    console.error(`[dev-proxy] Unhandled rejection: ${message}`);
+    shutdown(1);
+});

package/dist/proxy/certs.js

@@ -0,0 +1,68 @@
+import fs from "node:fs";
+import { constants } from "node:fs";
+import path from "node:path";
+import { execFileSync, execSync } from "node:child_process";
+import { config, CONFIG_DIR } from "./config.js";
+const CERTS_DIR = path.resolve(CONFIG_DIR, "certs");
+const DEFAULT_CERT = path.join(CERTS_DIR, `${config.domain}+1.pem`);
+const DEFAULT_KEY = path.join(CERTS_DIR, `${config.domain}+1-key.pem`);
+const DOMAINS = [`*.${config.domain}`, config.domain];
+function hasMkcert() {
+    try {
+        execSync("which mkcert", { stdio: "ignore" });
+        return true;
+    }
+    catch {
+        // Expected: mkcert is simply not installed
+        return false;
+    }
+}
+/**
+ * Resolves TLS certificate paths for the dev proxy.
+ *
+ * 1. If explicit paths are provided (from config), uses those.
+ * 2. Otherwise checks for certs at ~/.dev-proxy/certs/.
+ * 3. If missing, auto-generates using mkcert (installs local CA if needed).
+ * 4. If mkcert is not installed, logs instructions and returns null.
+ */
+export function resolveCerts(configCertPath, configKeyPath) {
+    // Explicit config — use as-is
+    if (configCertPath && configKeyPath) {
+        if (fs.existsSync(configCertPath) && fs.existsSync(configKeyPath)) {
+            return { certPath: configCertPath, keyPath: configKeyPath };
+        }
+        console.error(`[dev-proxy] Configured cert/key not found:\n  cert: ${configCertPath}\n  key:  ${configKeyPath}`);
+        return null;
+    }
+    // Default location — check if already generated
+    if (fs.existsSync(DEFAULT_CERT) && fs.existsSync(DEFAULT_KEY)) {
+        return { certPath: DEFAULT_CERT, keyPath: DEFAULT_KEY };
+    }
+    // Auto-generate with mkcert
+    if (!hasMkcert()) {
+        console.error("[dev-proxy] HTTPS disabled — mkcert not found.\n" +
+            "  Install: brew install mkcert && mkcert -install");
+        return null;
+    }
+    try {
+        fs.mkdirSync(CERTS_DIR, { recursive: true });
+        // Ensure local CA is installed (idempotent)
+        execFileSync("mkcert", ["-install"], { stdio: "ignore" });
+        // Generate wildcard cert (use execFileSync to avoid shell injection)
+        execFileSync("mkcert", ["-cert-file", DEFAULT_CERT, "-key-file", DEFAULT_KEY, ...DOMAINS], { stdio: "inherit" });
+        // Restrict cert file permissions to owner-only (0600)
+        try {
+            fs.chmodSync(DEFAULT_CERT, constants.S_IRUSR | constants.S_IWUSR);
+            fs.chmodSync(DEFAULT_KEY, constants.S_IRUSR | constants.S_IWUSR);
+        }
+        catch {
+            // Non-fatal: best-effort permission tightening
+        }
+        console.warn("[dev-proxy] TLS certificates generated with mkcert");
+        return { certPath: DEFAULT_CERT, keyPath: DEFAULT_KEY };
+    }
+    catch (err) {
+        console.error(`[dev-proxy] HTTPS disabled — mkcert failed: ${err.message}`);
+        return null;
+    }
+}