doru 1.0.0 → 1.1.0

package/dist/ui/app.js

@@ -23406,8 +23406,8 @@ var init_formatting = __esm({
     };
     METHOD_COLORS = {
       GET: "#2563eb",
-      POST: "#16a34a",
-      PUT: "#d97706",
+      POST: "#15803d",
+      PUT: "#b45309",
       DELETE: "#dc2626",
       PATCH: "#9333ea",
       HEAD: "#525252",
@@ -23625,7 +23625,7 @@ var init_EmptyState2 = __esm({
 });
 
 // src/ui/react/components/AnalyticsDashboard/AnalyticsDashboard.tsx
-var import_react3, import_jsx_runtime3, computeAnalytics, StatCardBase, StatCard, BreakdownBarBase, BreakdownBar, STATUS_COLORS, METHOD_COLORS2, AnalyticsDashboardBase, AnalyticsDashboard;
+var import_react3, import_jsx_runtime3, computeAnalytics, StatCardBase, StatCard, BreakdownBarBase, BreakdownBar, STATUS_COLORS, AnalyticsDashboardBase, AnalyticsDashboard;
 var init_AnalyticsDashboard = __esm({
   "src/ui/react/components/AnalyticsDashboard/AnalyticsDashboard.tsx"() {
     import_react3 = __toESM(require_react());
@@ -23703,7 +23703,7 @@ var init_AnalyticsDashboard = __esm({
           className: "breakdown-segment",
           style: {
             width: `${count / total * 100}%`,
-            backgroundColor: colorMap[key] || "#6b7280"
+            backgroundColor: colorMap[key] || "var(--color-muted)"
           },
           title: `${key}: ${count} (${(count / total * 100).toFixed(1)}%)`,
           "aria-label": `${key}: ${count} (${(count / total * 100).toFixed(1)}%)`
@@ -23714,23 +23714,19 @@ var init_AnalyticsDashboard = __esm({
     BreakdownBar = (0, import_react3.memo)(BreakdownBarBase);
     BreakdownBar.displayName = "BreakdownBar";
     STATUS_COLORS = {
-      "2xx": "#22c55e",
-      "3xx": "#3b82f6",
-      "4xx": "#f59e0b",
-      "5xx": "#ef4444",
-      Error: "#ef4444",
-      Pending: "#6b7280"
-    };
-    METHOD_COLORS2 = {
-      GET: "#22c55e",
-      POST: "#3b82f6",
-      PUT: "#f59e0b",
-      DELETE: "#ef4444",
-      PATCH: "#8b5cf6",
-      HEAD: "#6b7280"
+      "2xx": "var(--color-success)",
+      "3xx": "var(--color-redirect)",
+      "4xx": "var(--color-warning)",
+      "5xx": "var(--color-error)",
+      Error: "var(--color-error)",
+      Pending: "var(--color-muted)"
     };
     AnalyticsDashboardBase = ({ items, onSelect }) => {
       const analytics = (0, import_react3.useMemo)(() => computeAnalytics(items), [items]);
+      const methodColorMap = (0, import_react3.useMemo)(
+        () => Object.fromEntries(Object.keys(analytics.methodBreakdown).map((m) => [m, methodHue(m)])),
+        [analytics.methodBreakdown]
+      );
       if (items.length === 0) {
         return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "analytics-dashboard", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           EmptyState,
@@ -23759,7 +23755,7 @@ var init_AnalyticsDashboard = __esm({
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { children: "Status Breakdown" }),
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(BreakdownBar, { data: analytics.statusBreakdown, colorMap: STATUS_COLORS }),
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "breakdown-legend", children: Object.entries(analytics.statusBreakdown).map(([key, count]) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "legend-item", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "legend-dot", style: { backgroundColor: STATUS_COLORS[key] || "#6b7280" } }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "legend-dot", style: { backgroundColor: STATUS_COLORS[key] || "var(--color-muted)" } }),
             /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { children: [
               key,
               ": ",
@@ -23769,9 +23765,9 @@ var init_AnalyticsDashboard = __esm({
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "analytics-section", children: [
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { children: "Method Breakdown" }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(BreakdownBar, { data: analytics.methodBreakdown, colorMap: METHOD_COLORS2 }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(BreakdownBar, { data: analytics.methodBreakdown, colorMap: methodColorMap }),
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "breakdown-legend", children: Object.entries(analytics.methodBreakdown).map(([key, count]) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "legend-item", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "legend-dot", style: { backgroundColor: METHOD_COLORS2[key] || "#6b7280" } }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "legend-dot", style: { backgroundColor: methodHue(key) } }),
             /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { children: [
               key,
               ": ",
@@ -23931,6 +23927,31 @@ var init_generateCurl = __esm({
   }
 });
 
+// src/ui/react/hooks/useCopyFeedback.ts
+var import_react5, useCopyFeedback;
+var init_useCopyFeedback = __esm({
+  "src/ui/react/hooks/useCopyFeedback.ts"() {
+    import_react5 = __toESM(require_react());
+    init_generateCurl();
+    useCopyFeedback = (resetMs = 2e3) => {
+      const [status, setStatus] = (0, import_react5.useState)("idle");
+      const timer = (0, import_react5.useRef)(void 0);
+      (0, import_react5.useEffect)(() => () => clearTimeout(timer.current), []);
+      const copy = (0, import_react5.useCallback)(
+        (text) => {
+          void copyToClipboard(text).then((ok) => {
+            setStatus(ok ? "copied" : "error");
+            clearTimeout(timer.current);
+            timer.current = setTimeout(() => setStatus("idle"), resetMs);
+          });
+        },
+        [resetMs]
+      );
+      return [status, copy];
+    };
+  }
+});
+
 // src/ui/react/utils/mask.ts
 var SENSITIVE_HEADERS, UUID_PATTERN, JWT_PATTERN, BEARER_PATTERN, BASIC_AUTH_PATTERN, isSensitiveHeader, maskValue, maskHeaderValue, maskUrl, maskJsonValue;
 var init_mask = __esm({
@@ -24060,6 +24081,21 @@ var init_Tabs2 = __esm({
   }
 });
 
+// src/ui/react/hooks/usePortalTarget.ts
+var import_react6, usePortalTarget;
+var init_usePortalTarget = __esm({
+  "src/ui/react/hooks/usePortalTarget.ts"() {
+    import_react6 = __toESM(require_react());
+    usePortalTarget = (ref) => {
+      const [target, setTarget] = (0, import_react6.useState)(null);
+      (0, import_react6.useEffect)(() => {
+        setTarget(ref?.current ?? null);
+      }, [ref]);
+      return target;
+    };
+  }
+});
+
 // src/ui/react/utils/download.ts
 var b64toBlob, suggestFilename, downloadBlob;
 var init_download = __esm({
@@ -24089,24 +24125,25 @@ var init_download = __esm({
 });
 
 // src/ui/react/components/BodyRenderer/components/BinaryRenderer/BinaryRenderer.tsx
-var import_react5, import_react_dom, import_jsx_runtime5, BinaryRenderer;
+var import_react7, import_react_dom, import_jsx_runtime5, BinaryRenderer;
 var init_BinaryRenderer = __esm({
   "src/ui/react/components/BodyRenderer/components/BinaryRenderer/BinaryRenderer.tsx"() {
-    import_react5 = __toESM(require_react());
+    import_react7 = __toESM(require_react());
     import_react_dom = __toESM(require_react_dom());
+    init_usePortalTarget();
     init_content();
     init_download();
     import_jsx_runtime5 = __toESM(require_jsx_runtime());
     BinaryRenderer = ({ bin, contentType, label, controlsRef }) => {
-      const mime = (0, import_react5.useMemo)(
+      const mime = (0, import_react7.useMemo)(
         () => typeof contentType === "string" ? contentType.split(";")[0].trim() : "application/octet-stream",
         [contentType]
       );
-      const portalTarget = controlsRef?.current;
+      const portalTarget = usePortalTarget(controlsRef);
       const isImage = isImageType(contentType);
-      const blob = (0, import_react5.useMemo)(() => b64toBlob(bin.data, mime), [bin.data, mime]);
-      const [objectUrl, setObjectUrl] = (0, import_react5.useState)(null);
-      (0, import_react5.useEffect)(() => {
+      const blob = (0, import_react7.useMemo)(() => b64toBlob(bin.data, mime), [bin.data, mime]);
+      const [objectUrl, setObjectUrl] = (0, import_react7.useState)(null);
+      (0, import_react7.useEffect)(() => {
         if (!isImage) return;
         const url = URL.createObjectURL(blob);
         setObjectUrl(url);
@@ -24114,14 +24151,14 @@ var init_BinaryRenderer = __esm({
           URL.revokeObjectURL(url);
         };
       }, [blob, isImage]);
-      const handleDownload = (0, import_react5.useCallback)(() => {
+      const handleDownload = (0, import_react7.useCallback)(() => {
         downloadBlob(blob, suggestFilename(label, contentType));
       }, [blob, label, contentType]);
       const controls = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "controls", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { className: "btn", title: "Save body to file", onClick: handleDownload, children: "Download" }) });
       if (isImage && objectUrl) {
         return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "img-preview", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("img", { src: objectUrl, alt: `${label} image` }) }),
-          portalTarget ? (0, import_react_dom.createPortal)(controls, portalTarget) : controls
+          controlsRef ? portalTarget && (0, import_react_dom.createPortal)(controls, portalTarget) : controls
         ] });
       }
       return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
@@ -24130,7 +24167,7 @@ var init_BinaryRenderer = __esm({
           mime,
           ")"
         ] }),
-        portalTarget ? (0, import_react_dom.createPortal)(controls, portalTarget) : controls
+        controlsRef ? portalTarget && (0, import_react_dom.createPortal)(controls, portalTarget) : controls
       ] });
     };
   }
@@ -26507,10 +26544,10 @@ var require_main = __commonJS({
 });
 
 // src/ui/react/hooks/useTheme.ts
-var import_react6, getTheme, subscribeTheme, useTheme;
+var import_react8, getTheme, subscribeTheme, useTheme;
 var init_useTheme = __esm({
   "src/ui/react/hooks/useTheme.ts"() {
-    import_react6 = __toESM(require_react());
+    import_react8 = __toESM(require_react());
     getTheme = () => document.documentElement.dataset.theme || "dark";
     subscribeTheme = (cb) => {
       const observer = new MutationObserver(cb);
@@ -26520,15 +26557,15 @@ var init_useTheme = __esm({
       });
       return () => observer.disconnect();
     };
-    useTheme = () => (0, import_react6.useSyncExternalStore)(subscribeTheme, getTheme, () => "dark");
+    useTheme = () => (0, import_react8.useSyncExternalStore)(subscribeTheme, getTheme, () => "dark");
   }
 });
 
 // src/ui/react/components/BodyRenderer/components/JsonRenderer/JsonRenderer.tsx
-var import_react7, import_react_json_view, import_jsx_runtime8, JsonRenderer;
+var import_react9, import_react_json_view, import_jsx_runtime8, JsonRenderer;
 var init_JsonRenderer = __esm({
   "src/ui/react/components/BodyRenderer/components/JsonRenderer/JsonRenderer.tsx"() {
-    import_react7 = __toESM(require_react());
+    import_react9 = __toESM(require_react());
     import_react_json_view = __toESM(require_main());
     init_useMask();
     init_useTheme();
@@ -26537,7 +26574,7 @@ var init_JsonRenderer = __esm({
     JsonRenderer = ({ text }) => {
       const appTheme = useTheme();
       const { isMasked } = useMask();
-      const parsed = (0, import_react7.useMemo)(() => {
+      const parsed = (0, import_react9.useMemo)(() => {
         try {
           const data = JSON.parse(text);
           return { ok: true, data: isMasked ? maskJsonValue(data) : data };
@@ -26556,7 +26593,7 @@ var init_JsonRenderer = __esm({
             displayObjectSize: false,
             quotesOnKeys: false,
             theme: appTheme === "light" ? "rjv-default" : "monokai",
-            style: { background: "transparent" },
+            style: { background: "transparent", fontSize: "11px" },
             enableClipboard: true
           }
         ) });
@@ -26592,17 +26629,17 @@ var init_highlight = __esm({
 });
 
 // src/ui/react/components/BodyRenderer/components/XmlRenderer/XmlRenderer.tsx
-var import_react8, import_jsx_runtime9, XmlRenderer;
+var import_react10, import_jsx_runtime9, XmlRenderer;
 var init_XmlRenderer = __esm({
   "src/ui/react/components/BodyRenderer/components/XmlRenderer/XmlRenderer.tsx"() {
-    import_react8 = __toESM(require_react());
+    import_react10 = __toESM(require_react());
     init_useMask();
     init_highlight();
     init_mask();
     import_jsx_runtime9 = __toESM(require_jsx_runtime());
     XmlRenderer = ({ text, mode }) => {
       const { isMasked } = useMask();
-      const prettyContent = (0, import_react8.useMemo)(() => {
+      const prettyContent = (0, import_react10.useMemo)(() => {
         if (mode !== "pretty") return null;
         try {
           return prettyXML(text);
@@ -26626,11 +26663,13 @@ var init_XmlRenderer2 = __esm({
 });
 
 // src/ui/react/components/BodyRenderer/BodyRenderer.tsx
-var import_react9, import_react_dom2, import_jsx_runtime10, getInitialMode, getFileExtension, BodyRenderer;
+var import_react11, import_react_dom2, import_jsx_runtime10, getInitialMode, getFileExtension, BodyRenderer;
 var init_BodyRenderer = __esm({
   "src/ui/react/components/BodyRenderer/BodyRenderer.tsx"() {
-    import_react9 = __toESM(require_react());
+    import_react11 = __toESM(require_react());
     import_react_dom2 = __toESM(require_react_dom());
+    init_usePortalTarget();
+    init_useCopyFeedback();
     init_content();
     init_download();
     init_BinaryRenderer2();
@@ -26651,13 +26690,15 @@ var init_BodyRenderer = __esm({
       if (isXMLType(ct2)) return "xml";
       return "txt";
     };
-    BodyRenderer = (0, import_react9.memo)(({ label, body, headers, controlsRef }) => {
+    BodyRenderer = (0, import_react11.memo)(({ label, body, headers, controlsRef }) => {
       const ct2 = getHeader(headers, "content-type") || "";
-      const [mode, setMode] = (0, import_react9.useState)(getInitialMode(ct2));
-      const text = (0, import_react9.useMemo)(() => typeof body === "string" ? String(body) : null, [body]);
-      (0, import_react9.useEffect)(() => {
+      const [mode, setMode] = (0, import_react11.useState)(getInitialMode(ct2));
+      const text = (0, import_react11.useMemo)(() => typeof body === "string" ? String(body) : null, [body]);
+      (0, import_react11.useEffect)(() => {
         setMode(getInitialMode(ct2));
       }, [ct2]);
+      const portalTarget = usePortalTarget(controlsRef);
+      const [copyStatus, copy] = useCopyFeedback();
       if (!body) {
         return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "empty", children: [
           "No ",
@@ -26702,11 +26743,12 @@ var init_BodyRenderer = __esm({
           /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             "button",
             {
-              className: "btn",
+              className: `btn${copyStatus === "copied" ? " copied" : copyStatus === "error" ? " error" : ""}`,
               title: "Copy to clipboard",
-              onClick: () => navigator.clipboard.writeText(text).catch(() => {
-              }),
-              children: "Copy"
+              onClick: () => {
+                if (text !== null) copy(text);
+              },
+              children: copyStatus === "copied" ? "Copied" : copyStatus === "error" ? "Failed" : "Copy"
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
@@ -26724,10 +26766,9 @@ var init_BodyRenderer = __esm({
           )
         ] })
       ] });
-      const portalTarget = controlsRef?.current;
       return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
         renderContent(),
-        portalTarget ? (0, import_react_dom2.createPortal)(controls, portalTarget) : controls
+        controlsRef ? portalTarget && (0, import_react_dom2.createPortal)(controls, portalTarget) : controls
       ] });
     });
   }
@@ -26741,10 +26782,10 @@ var init_BodyRenderer2 = __esm({
 });
 
 // src/ui/react/components/DetailPanel/components/BodyTab/BodyTab.tsx
-var import_react10, import_jsx_runtime11, getResBodyContent, BodyTab;
+var import_react12, import_jsx_runtime11, getResBodyContent, BodyTab;
 var init_BodyTab = __esm({
   "src/ui/react/components/DetailPanel/components/BodyTab/BodyTab.tsx"() {
-    import_react10 = __toESM(require_react());
+    import_react12 = __toESM(require_react());
     init_react_resizable_panels();
     init_BodyRenderer2();
     import_jsx_runtime11 = __toESM(require_jsx_runtime());
@@ -26758,8 +26799,8 @@ var init_BodyTab = __esm({
       return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "empty", children: "No Response" });
     };
     BodyTab = ({ request: r, response: s, error: e }) => {
-      const reqBodyCtrlRef = (0, import_react10.useRef)(null);
-      const resBodyCtrlRef = (0, import_react10.useRef)(null);
+      const reqBodyCtrlRef = (0, import_react12.useRef)(null);
+      const resBodyCtrlRef = (0, import_react12.useRef)(null);
       const resBodyContent = getResBodyContent(r, s, e, resBodyCtrlRef);
       return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Gt, { orientation: "horizontal", children: [
         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(_t, { defaultSize: 50, minSize: 20, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "panel", children: [
@@ -26790,10 +26831,10 @@ var init_BodyTab2 = __esm({
 });
 
 // src/ui/react/components/KVGrid/KVGrid.tsx
-var import_react11, import_jsx_runtime12, toDisplayString, KVGrid;
+var import_react13, import_jsx_runtime12, toDisplayString, KVGrid;
 var init_KVGrid = __esm({
   "src/ui/react/components/KVGrid/KVGrid.tsx"() {
-    import_react11 = __toESM(require_react());
+    import_react13 = __toESM(require_react());
     init_useMask();
     init_mask();
     import_jsx_runtime12 = __toESM(require_jsx_runtime());
@@ -26809,9 +26850,9 @@ var init_KVGrid = __esm({
       }
       return String(v);
     };
-    KVGrid = (0, import_react11.memo)(({ data, empty = "No data", isHeaders = false }) => {
+    KVGrid = (0, import_react13.memo)(({ data, empty = "No data", isHeaders = false }) => {
       const { isMasked } = useMask();
-      const entries = (0, import_react11.useMemo)(() => Object.entries(data || {}), [data]);
+      const entries = (0, import_react13.useMemo)(() => Object.entries(data || {}), [data]);
       if (entries.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "empty", children: empty });
       return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { children: entries.map(([k2, v]) => {
         const displayValue = toDisplayString(v);
@@ -26879,10 +26920,10 @@ var init_HeadersTab2 = __esm({
 });
 
 // src/ui/react/components/DetailPanel/components/OverviewTab/OverviewTab.tsx
-var import_react12, import_jsx_runtime14, getResBodyContent2, renderResHeaders, OverviewTab;
+var import_react14, import_jsx_runtime14, getResBodyContent2, renderResHeaders, OverviewTab;
 var init_OverviewTab = __esm({
   "src/ui/react/components/DetailPanel/components/OverviewTab/OverviewTab.tsx"() {
-    import_react12 = __toESM(require_react());
+    import_react14 = __toESM(require_react());
     init_react_resizable_panels();
     init_BodyRenderer2();
     init_KVGrid2();
@@ -26917,8 +26958,8 @@ var init_OverviewTab = __esm({
       resGeneral,
       resHeadersRest
     }) => {
-      const ovReqBodyCtrlRef = (0, import_react12.useRef)(null);
-      const ovResBodyCtrlRef = (0, import_react12.useRef)(null);
+      const ovReqBodyCtrlRef = (0, import_react14.useRef)(null);
+      const ovResBodyCtrlRef = (0, import_react14.useRef)(null);
       const ovResBodyContent = getResBodyContent2(r, s, e, ovResBodyCtrlRef);
       return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Gt, { orientation: "horizontal", children: [
         /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(_t, { defaultSize: 50, minSize: 20, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Gt, { orientation: "vertical", children: [
@@ -26976,10 +27017,10 @@ var init_OverviewTab2 = __esm({
 });
 
 // src/ui/react/components/DetailPanel/components/QueryTab/QueryTab.tsx
-var import_react13, import_jsx_runtime15, QueryTab;
+var import_react15, import_jsx_runtime15, QueryTab;
 var init_QueryTab = __esm({
   "src/ui/react/components/DetailPanel/components/QueryTab/QueryTab.tsx"() {
-    import_react13 = __toESM(require_react());
+    import_react15 = __toESM(require_react());
     init_react_resizable_panels();
     init_useMask();
     init_content();
@@ -26988,8 +27029,8 @@ var init_QueryTab = __esm({
     import_jsx_runtime15 = __toESM(require_jsx_runtime());
     QueryTab = ({ request: r }) => {
       const { isMasked } = useMask();
-      const queryParams = (0, import_react13.useMemo)(() => r ? parseQuery(r.url || (r.hostname || "") + (r.path || "")) : [], [r]);
-      const formFields = (0, import_react13.useMemo)(() => r ? parseForm(r.body, getHeader(r.headers, "content-type")) : [], [r]);
+      const queryParams = (0, import_react15.useMemo)(() => r ? parseQuery(r.url || (r.hostname || "") + (r.path || "")) : [], [r]);
+      const formFields = (0, import_react15.useMemo)(() => r ? parseForm(r.body, getHeader(r.headers, "content-type")) : [], [r]);
       return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Gt, { orientation: "horizontal", children: [
         /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(_t, { defaultSize: 50, minSize: 20, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "panel", children: [
           /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "title", children: "Query Params" }),
@@ -27062,13 +27103,14 @@ var init_TimingTab2 = __esm({
 });
 
 // src/ui/react/components/DetailPanel/DetailPanel.tsx
-var import_react14, import_jsx_runtime17, REQ_HEADERS_TO_OMIT, RES_HEADERS_TO_OMIT, DetailPanelBase, DetailPanel;
+var import_react16, import_jsx_runtime17, REQ_HEADERS_TO_OMIT, RES_HEADERS_TO_OMIT, DetailPanelBase, DetailPanel;
 var init_DetailPanel = __esm({
   "src/ui/react/components/DetailPanel/DetailPanel.tsx"() {
-    import_react14 = __toESM(require_react());
+    import_react16 = __toESM(require_react());
     init_useMask();
     init_formatting();
     init_generateCurl();
+    init_useCopyFeedback();
     init_mask();
     init_parsing();
     init_EmptyState2();
@@ -27094,16 +27136,12 @@ var init_DetailPanel = __esm({
       const r = tx?.request;
       const s = tx?.response;
       const e = tx?.error;
-      const [copyStatus, setCopyStatus] = (0, import_react14.useState)("idle");
+      const [copyStatus, copyCurl] = useCopyFeedback();
       const { isMasked } = useMask();
-      const handleCopyCurl = (0, import_react14.useCallback)(async () => {
-        if (!r) return;
-        const curl = generateCurl(r);
-        const success = await copyToClipboard(curl);
-        setCopyStatus(success ? "copied" : "error");
-        setTimeout(() => setCopyStatus("idle"), 2e3);
-      }, [r]);
-      const summary = (0, import_react14.useMemo)(() => {
+      const handleCopyCurl = (0, import_react16.useCallback)(() => {
+        if (r) copyCurl(generateCurl(r));
+      }, [r, copyCurl]);
+      const summary = (0, import_react16.useMemo)(() => {
         if (!r) return null;
         const url = r.url || (r.hostname || "") + (r.path || "");
         const u = safeURL(url);
@@ -27119,18 +27157,18 @@ var init_DetailPanel = __esm({
         else if (e) statusClass = "s-5";
         return { u, size, dur, code, statusClass };
       }, [r, s, e]);
-      const parsedReq = (0, import_react14.useMemo)(() => {
+      const parsedReq = (0, import_react16.useMemo)(() => {
         const requestURL = r ? r.url || (r.hostname || "") + (r.path || "") : "";
         return requestURL ? safeURL(requestURL) : { href: "", host: "", path: "" };
       }, [r]);
-      const reqGeneral = (0, import_react14.useMemo)(
+      const reqGeneral = (0, import_react16.useMemo)(
         () => r ? {
           "Request URL": parsedReq.href,
           "Request Method": r.method || ""
         } : {},
         [r, parsedReq.href]
       );
-      const resGeneral = (0, import_react14.useMemo)(
+      const resGeneral = (0, import_react16.useMemo)(
         () => r ? {
           "Request URL": parsedReq.href,
           "Request Method": r.method || "",
@@ -27138,10 +27176,10 @@ var init_DetailPanel = __esm({
         } : {},
         [r, parsedReq.href, s]
       );
-      const reqHeaders = (0, import_react14.useMemo)(() => r?.headers || {}, [r?.headers]);
-      const resHeaders = (0, import_react14.useMemo)(() => s?.headers || {}, [s?.headers]);
-      const reqHeadersRest = (0, import_react14.useMemo)(() => omitKeysCI(reqHeaders, REQ_HEADERS_TO_OMIT), [reqHeaders]);
-      const resHeadersRest = (0, import_react14.useMemo)(() => omitKeysCI(resHeaders, RES_HEADERS_TO_OMIT), [resHeaders]);
+      const reqHeaders = (0, import_react16.useMemo)(() => r?.headers || {}, [r?.headers]);
+      const resHeaders = (0, import_react16.useMemo)(() => s?.headers || {}, [s?.headers]);
+      const reqHeadersRest = (0, import_react16.useMemo)(() => omitKeysCI(reqHeaders, REQ_HEADERS_TO_OMIT), [reqHeaders]);
+      const resHeadersRest = (0, import_react16.useMemo)(() => omitKeysCI(resHeaders, RES_HEADERS_TO_OMIT), [resHeaders]);
       if (!tx) {
         return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("section", { id: "detail", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           EmptyState,
@@ -27209,7 +27247,7 @@ var init_DetailPanel = __esm({
         ] })
       ] });
     };
-    DetailPanel = (0, import_react14.memo)(
+    DetailPanel = (0, import_react16.memo)(
       DetailPanelBase,
       (prev, next) => prev.activeTab === next.activeTab && prev.version === next.version && prev.tx?.captureId === next.tx?.captureId
     );
@@ -27224,12 +27262,12 @@ var init_DetailPanel2 = __esm({
 });
 
 // src/ui/react/components/ErrorBoundary/ErrorBoundary.tsx
-var import_react15, import_jsx_runtime18, ErrorBoundary;
+var import_react17, import_jsx_runtime18, ErrorBoundary;
 var init_ErrorBoundary = __esm({
   "src/ui/react/components/ErrorBoundary/ErrorBoundary.tsx"() {
-    import_react15 = __toESM(require_react());
+    import_react17 = __toESM(require_react());
     import_jsx_runtime18 = __toESM(require_jsx_runtime());
-    ErrorBoundary = class extends import_react15.Component {
+    ErrorBoundary = class extends import_react17.Component {
       constructor(props) {
         super(props);
         this.handleRetry = () => {
@@ -27322,13 +27360,13 @@ var init_ThemeSwitcher2 = __esm({
 });
 
 // src/ui/react/components/HeaderBar/HeaderBar.tsx
-var import_react16, import_jsx_runtime20, ViewButton, HeaderBar;
+var import_react18, import_jsx_runtime20, ViewButton, HeaderBar;
 var init_HeaderBar = __esm({
   "src/ui/react/components/HeaderBar/HeaderBar.tsx"() {
-    import_react16 = __toESM(require_react());
+    import_react18 = __toESM(require_react());
     init_ThemeSwitcher2();
     import_jsx_runtime20 = __toESM(require_jsx_runtime());
-    ViewButton = (0, import_react16.memo)(
+    ViewButton = (0, import_react18.memo)(
       ({
         view,
         currentView,
@@ -27346,7 +27384,7 @@ var init_HeaderBar = __esm({
       )
     );
     ViewButton.displayName = "ViewButton";
-    HeaderBar = (0, import_react16.memo)(
+    HeaderBar = (0, import_react18.memo)(
       ({
         isPaused,
         setPaused,
@@ -27358,10 +27396,11 @@ var init_HeaderBar = __esm({
         mainView,
         setMainView
       }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("header", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "brand", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "badge", children: "DORU" }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "brand-name", children: "INTERCEPTORU" })
-        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "brand brand--term", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "brand-term", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "term-prompt", children: "\u203A" }),
+          "doru",
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "term-caret", "aria-hidden": "true" })
+        ] }) }),
         /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "view-switcher", role: "group", "aria-label": "View options", children: [
           /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(ViewButton, { view: "list", currentView: mainView, onClick: () => setMainView("list"), children: [
             /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", "aria-hidden": "true", children: [
@@ -27395,7 +27434,7 @@ var init_HeaderBar = __esm({
             "button",
             {
               type: "button",
-              className: `btn${isPaused ? " active" : ""}`,
+              className: `btn pause-btn ${isPaused ? "paused" : "live"}`,
               title: isPaused ? "Resume auto-refresh" : "Pause auto-refresh",
               "aria-pressed": isPaused,
               onClick: () => setPaused(!isPaused),
@@ -28352,10 +28391,10 @@ var init_esm2 = __esm({
 });
 
 // src/ui/react/components/Skeleton/Skeleton.tsx
-var import_react17, import_jsx_runtime21, SkeletonBase, Skeleton, SkeletonRowBase, SkeletonRow, SkeletonListBase, SkeletonList;
+var import_react19, import_jsx_runtime21, SkeletonBase, Skeleton, SkeletonRowBase, SkeletonRow, SkeletonListBase, SkeletonList;
 var init_Skeleton = __esm({
   "src/ui/react/components/Skeleton/Skeleton.tsx"() {
-    import_react17 = __toESM(require_react());
+    import_react19 = __toESM(require_react());
     import_jsx_runtime21 = __toESM(require_jsx_runtime());
     SkeletonBase = ({ width = "100%", height = 16, borderRadius = 4, className = "" }) => {
       return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
@@ -28370,7 +28409,7 @@ var init_Skeleton = __esm({
         }
       );
     };
-    Skeleton = (0, import_react17.memo)(SkeletonBase);
+    Skeleton = (0, import_react19.memo)(SkeletonBase);
     Skeleton.displayName = "Skeleton";
     SkeletonRowBase = ({ columns = 6 }) => {
       return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "skeleton-row", children: Array.from({ length: columns }).map((_2, i) => (
@@ -28378,7 +28417,7 @@ var init_Skeleton = __esm({
         /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Skeleton, { height: 14, width: i === 2 ? "80%" : "60%" }, `col-${i}`)
       )) });
     };
-    SkeletonRow = (0, import_react17.memo)(SkeletonRowBase);
+    SkeletonRow = (0, import_react19.memo)(SkeletonRowBase);
     SkeletonRow.displayName = "SkeletonRow";
     SkeletonListBase = ({ rows = 10, columns = 6 }) => {
       return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "skeleton-list", "aria-busy": "true", "aria-label": "Loading content", children: Array.from({ length: rows }).map((_2, i) => (
@@ -28386,7 +28425,7 @@ var init_Skeleton = __esm({
         /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SkeletonRow, { columns }, `row-${i}`)
       )) });
     };
-    SkeletonList = (0, import_react17.memo)(SkeletonListBase);
+    SkeletonList = (0, import_react19.memo)(SkeletonListBase);
     SkeletonList.displayName = "SkeletonList";
   }
 });
@@ -28399,10 +28438,10 @@ var init_Skeleton2 = __esm({
 });
 
 // src/ui/react/components/StatusIcon/StatusIcon.tsx
-var import_react18, import_jsx_runtime22, getStatusType, STATUS_COLORS2, StatusIconBase, StatusIcon;
+var import_react20, import_jsx_runtime22, getStatusType, STATUS_COLORS2, StatusIconBase, StatusIcon;
 var init_StatusIcon = __esm({
   "src/ui/react/components/StatusIcon/StatusIcon.tsx"() {
-    import_react18 = __toESM(require_react());
+    import_react20 = __toESM(require_react());
     import_jsx_runtime22 = __toESM(require_jsx_runtime());
     getStatusType = (status) => {
       if (status === "error") return "error";
@@ -28435,7 +28474,6 @@ var init_StatusIcon = __esm({
             "path",
             {
               d: "M3.5 3.5 L6.5 6.5 M6.5 3.5 L3.5 6.5",
-              stroke: "white",
               strokeWidth: "1.2",
               strokeLinecap: "round"
             }
@@ -28449,7 +28487,6 @@ var init_StatusIcon = __esm({
           {
             d: "M3 5 L4.5 6.5 L7 3.5",
             fill: "none",
-            stroke: "white",
             strokeWidth: "1.2",
             strokeLinecap: "round",
             strokeLinejoin: "round"
@@ -28460,7 +28497,6 @@ var init_StatusIcon = __esm({
           {
             d: "M4 5 L6 5 M5 3.5 L6.5 5 L5 6.5",
             fill: "none",
-            stroke: "white",
             strokeWidth: "1.2",
             strokeLinecap: "round",
             strokeLinejoin: "round"
@@ -28468,7 +28504,7 @@ var init_StatusIcon = __esm({
         )
       ] });
     };
-    StatusIcon = (0, import_react18.memo)(StatusIconBase);
+    StatusIcon = (0, import_react20.memo)(StatusIconBase);
     StatusIcon.displayName = "StatusIcon";
   }
 });
@@ -28481,10 +28517,10 @@ var init_StatusIcon2 = __esm({
 });
 
 // src/ui/react/components/ListPanel/ListPanel.tsx
-var import_react19, import_jsx_runtime23, METHODS, STATUS_FILTERS, getDuration, getArrow, getAriaSort, SortHeader, ListPanelBase, ListPanel;
+var import_react21, import_jsx_runtime23, METHODS, STATUS_FILTERS, getDuration, getArrow, getAriaSort, SortHeader, ListPanelBase, ListPanel;
 var init_ListPanel = __esm({
   "src/ui/react/components/ListPanel/ListPanel.tsx"() {
-    import_react19 = __toESM(require_react());
+    import_react21 = __toESM(require_react());
     init_esm2();
     init_useMask();
     init_formatting();
@@ -28514,7 +28550,7 @@ var init_ListPanel = __esm({
       if (!isActive) return void 0;
       return direction === "asc" ? "ascending" : "descending";
     };
-    SortHeader = (0, import_react19.memo)(({ column, label, sort, onSort, className = "" }) => {
+    SortHeader = (0, import_react21.memo)(({ column, label, sort, onSort, className = "" }) => {
       const isActive = sort.column === column;
       return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
         "div",
@@ -28549,12 +28585,12 @@ var init_ListPanel = __esm({
       isLoading = false,
       error = null
     }) => {
-      const parentRef = (0, import_react19.useRef)(null);
+      const parentRef = (0, import_react21.useRef)(null);
       const { isMasked } = useMask();
       const onQ = (e) => onFilters({ ...filters, q: e.target.value });
       const onM = (e) => onFilters({ ...filters, m: e.target.value });
       const onS = (e) => onFilters({ ...filters, s: e.target.value });
-      const handleSort = (0, import_react19.useCallback)(
+      const handleSort = (0, import_react21.useCallback)(
         (column) => {
           if (sort.column === column) {
             onSort({ column, direction: sort.direction === "asc" ? "desc" : "asc" });
@@ -28570,7 +28606,7 @@ var init_ListPanel = __esm({
         estimateSize: () => 36,
         overscan: 15
       });
-      (0, import_react19.useEffect)(() => {
+      (0, import_react21.useEffect)(() => {
         const onKey = (e) => {
           if (!["ArrowDown", "ArrowUp", "Enter"].includes(e.key)) return;
           if (items.length === 0) return;
@@ -28651,7 +28687,7 @@ var init_ListPanel = __esm({
               let codeText = "Pending";
               let codeCls = "status";
               if (e) {
-                codeText = "ERROR";
+                codeText = "ERR";
                 codeCls += " s-5";
               } else if (s && s.statusCode) {
                 const range = Math.floor(s.statusCode / 100);
@@ -28696,7 +28732,7 @@ var init_ListPanel = __esm({
         ) })
       ] });
     };
-    ListPanel = (0, import_react19.memo)(ListPanelBase);
+    ListPanel = (0, import_react21.memo)(ListPanelBase);
   }
 });
 
@@ -28708,10 +28744,10 @@ var init_ListPanel2 = __esm({
 });
 
 // src/ui/react/components/WaterfallView/WaterfallView.tsx
-var import_react20, import_jsx_runtime24, getDuration2, getTimestamp, WaterfallViewBase, WaterfallView;
+var import_react22, import_jsx_runtime24, getDuration2, getTimestamp, WaterfallViewBase, WaterfallView;
 var init_WaterfallView = __esm({
   "src/ui/react/components/WaterfallView/WaterfallView.tsx"() {
-    import_react20 = __toESM(require_react());
+    import_react22 = __toESM(require_react());
     init_esm2();
     init_formatting();
     init_parsing();
@@ -28726,8 +28762,8 @@ var init_WaterfallView = __esm({
       return new Date(tx.request?.timestamp || 0).getTime();
     };
     WaterfallViewBase = ({ items, selectedId, onSelect }) => {
-      const parentRef = (0, import_react20.useRef)(null);
-      const handleKeyDown = (0, import_react20.useCallback)(
+      const parentRef = (0, import_react22.useRef)(null);
+      const handleKeyDown = (0, import_react22.useCallback)(
         (e, captureId) => {
           if (e.key === "Enter" || e.key === " ") {
             e.preventDefault();
@@ -28736,7 +28772,7 @@ var init_WaterfallView = __esm({
         },
         [onSelect]
       );
-      const { minTime, totalDuration } = (0, import_react20.useMemo)(() => {
+      const { minTime, totalDuration } = (0, import_react22.useMemo)(() => {
         if (items.length === 0) return { minTime: 0, totalDuration: 1 };
         let min = Infinity;
         let max = -Infinity;
@@ -28748,7 +28784,7 @@ var init_WaterfallView = __esm({
         }
         return { minTime: min, totalDuration: Math.max(max - min, 1) };
       }, [items]);
-      const timeMarkers = (0, import_react20.useMemo)(() => {
+      const timeMarkers = (0, import_react22.useMemo)(() => {
         const markers = [];
         const interval = totalDuration / 5;
         for (let i = 0; i <= 5; i++) {
@@ -28847,7 +28883,7 @@ var init_WaterfallView = __esm({
         ) })
       ] });
     };
-    WaterfallView = (0, import_react20.memo)(WaterfallViewBase);
+    WaterfallView = (0, import_react22.memo)(WaterfallViewBase);
     WaterfallView.displayName = "WaterfallView";
   }
 });
@@ -28860,10 +28896,10 @@ var init_WaterfallView2 = __esm({
 });
 
 // src/ui/react/hooks/useCapture.ts
-var import_react21, calcSize2, getDuration3, getStatus, sortTransactions, useCapture;
+var import_react23, calcSize2, getDuration3, getStatus, sortTransactions, useCapture;
 var init_useCapture = __esm({
   "src/ui/react/hooks/useCapture.ts"() {
-    import_react21 = __toESM(require_react());
+    import_react23 = __toESM(require_react());
     init_parsing();
     calcSize2 = (tx) => {
       const body = tx.response?.body || tx.request?.body;
@@ -28912,18 +28948,18 @@ var init_useCapture = __esm({
       });
     };
     useCapture = (intervalMs = 2e3) => {
-      const [tx, setTx] = (0, import_react21.useState)([]);
-      const [filters, setFilters] = (0, import_react21.useState)({ q: "", m: "", s: "" });
-      const [selectedId, setSelectedId] = (0, import_react21.useState)(null);
-      const [paused, setPaused] = (0, import_react21.useState)(false);
-      const [activeTab, setActiveTab] = (0, import_react21.useState)("overview");
-      const [isLoading, setIsLoading] = (0, import_react21.useState)(true);
-      const [error, setError] = (0, import_react21.useState)(null);
-      const [sort, setSort] = (0, import_react21.useState)({ column: "time", direction: "desc" });
-      const offsetRef = (0, import_react21.useRef)(0);
-      const rawRecordsRef = (0, import_react21.useRef)([]);
-      const pendingLineRef = (0, import_react21.useRef)("");
-      const load = (0, import_react21.useCallback)(async () => {
+      const [tx, setTx] = (0, import_react23.useState)([]);
+      const [filters, setFilters] = (0, import_react23.useState)({ q: "", m: "", s: "" });
+      const [selectedId, setSelectedId] = (0, import_react23.useState)(null);
+      const [paused, setPaused] = (0, import_react23.useState)(false);
+      const [activeTab, setActiveTab] = (0, import_react23.useState)("overview");
+      const [isLoading, setIsLoading] = (0, import_react23.useState)(true);
+      const [error, setError] = (0, import_react23.useState)(null);
+      const [sort, setSort] = (0, import_react23.useState)({ column: "time", direction: "desc" });
+      const offsetRef = (0, import_react23.useRef)(0);
+      const rawRecordsRef = (0, import_react23.useRef)([]);
+      const pendingLineRef = (0, import_react23.useRef)("");
+      const load = (0, import_react23.useCallback)(async () => {
         if (paused) return;
         try {
           setError(null);
@@ -28976,7 +29012,7 @@ var init_useCapture = __esm({
           setIsLoading(false);
         }
       }, [paused]);
-      (0, import_react21.useEffect)(() => {
+      (0, import_react23.useEffect)(() => {
         const initialLoad = async () => {
           try {
             setIsLoading(true);
@@ -29007,12 +29043,12 @@ var init_useCapture = __esm({
         };
         initialLoad();
       }, []);
-      (0, import_react21.useEffect)(() => {
+      (0, import_react23.useEffect)(() => {
         if (isLoading) return;
         const id = setInterval(load, intervalMs);
         return () => clearInterval(id);
       }, [load, intervalMs, isLoading]);
-      const filtered = (0, import_react21.useMemo)(() => {
+      const filtered = (0, import_react23.useMemo)(() => {
         const q = filters.q.toLowerCase();
         const m = filters.m;
         const s = filters.s;
@@ -29026,8 +29062,8 @@ var init_useCapture = __esm({
           return true;
         });
       }, [tx, filters]);
-      const sorted = (0, import_react21.useMemo)(() => sortTransactions(filtered, sort), [filtered, sort]);
-      const stats = (0, import_react21.useMemo)(() => {
+      const sorted = (0, import_react23.useMemo)(() => sortTransactions(filtered, sort), [filtered, sort]);
+      const stats = (0, import_react23.useMemo)(() => {
         const total = sorted.length;
         const ok = sorted.filter((t) => (t.response && t.response.statusCode || 0) < 400).length;
         const errors = sorted.filter(
@@ -29035,12 +29071,12 @@ var init_useCapture = __esm({
         ).length;
         return { total, ok, errors };
       }, [sorted]);
-      const selected = (0, import_react21.useMemo)(
+      const selected = (0, import_react23.useMemo)(
         () => sorted.find((t) => t.captureId === selectedId) || tx.find((t) => t.captureId === selectedId) || null,
         [sorted, tx, selectedId]
       );
-      const selectedVersion = (0, import_react21.useMemo)(() => getTxVersion(selected), [selected]);
-      (0, import_react21.useEffect)(() => {
+      const selectedVersion = (0, import_react23.useMemo)(() => getTxVersion(selected), [selected]);
+      (0, import_react23.useEffect)(() => {
         if (!selectedId && sorted.length > 0) {
           setSelectedId(sorted[0].captureId);
         }
@@ -29068,12 +29104,12 @@ var init_useCapture = __esm({
 });
 
 // src/ui/react/hooks/useFavicon.ts
-var import_react22, useFavicon;
+var import_react24, useFavicon;
 var init_useFavicon = __esm({
   "src/ui/react/hooks/useFavicon.ts"() {
-    import_react22 = __toESM(require_react());
+    import_react24 = __toESM(require_react());
     useFavicon = (isRecording) => {
-      (0, import_react22.useEffect)(() => {
+      (0, import_react24.useEffect)(() => {
         const link = document.querySelector('link[rel="icon"]');
         if (link) {
           link.href = isRecording ? "./favicon.svg" : "./favicon-paused.svg";
@@ -29085,7 +29121,7 @@ var init_useFavicon = __esm({
 
 // src/ui/react/hooks/useLocalStorage.ts
 function useLocalStorage(key, initialValue) {
-  const [storedValue, setStoredValue] = (0, import_react23.useState)(() => {
+  const [storedValue, setStoredValue] = (0, import_react25.useState)(() => {
     if (typeof window === "undefined") return initialValue;
     try {
       const item = localStorage.getItem(key);
@@ -29094,7 +29130,7 @@ function useLocalStorage(key, initialValue) {
       return initialValue;
     }
   });
-  const setValue = (0, import_react23.useCallback)(
+  const setValue = (0, import_react25.useCallback)(
     (value) => {
       setStoredValue(value);
       if (typeof window !== "undefined") {
@@ -29108,18 +29144,18 @@ function useLocalStorage(key, initialValue) {
   );
   return [storedValue, setValue];
 }
-var import_react23;
+var import_react25;
 var init_useLocalStorage = __esm({
   "src/ui/react/hooks/useLocalStorage.ts"() {
-    import_react23 = __toESM(require_react());
+    import_react25 = __toESM(require_react());
   }
 });
 
 // src/ui/react/App.tsx
-var import_react24, import_jsx_runtime25, MainContent, App;
+var import_react26, import_jsx_runtime25, MainContent, App;
 var init_App = __esm({
   "src/ui/react/App.tsx"() {
-    import_react24 = __toESM(require_react());
+    import_react26 = __toESM(require_react());
     init_react_resizable_panels();
     init_AnalyticsDashboard2();
     init_DetailPanel2();
@@ -29181,8 +29217,8 @@ var init_App = __esm({
     App = () => {
       const [theme, setTheme] = useLocalStorage("doru-theme", "dark");
       const [isMasked, setMasked] = useLocalStorage("doru-mask", false);
-      const [mainView, setMainView] = (0, import_react24.useState)("list");
-      (0, import_react24.useEffect)(() => {
+      const [mainView, setMainView] = (0, import_react26.useState)("list");
+      (0, import_react26.useEffect)(() => {
         document.documentElement.dataset.theme = theme;
       }, [theme]);
       const {
@@ -29204,10 +29240,10 @@ var init_App = __esm({
         setSort
       } = useCapture(2e3);
       useFavicon(!paused);
-      const txMap = (0, import_react24.useMemo)(() => new Map(tx.map((t) => [t.captureId, t])), [tx]);
-      const selected = (0, import_react24.useMemo)(() => selectedId ? txMap.get(selectedId) ?? null : null, [txMap, selectedId]);
+      const txMap = (0, import_react26.useMemo)(() => new Map(tx.map((t) => [t.captureId, t])), [tx]);
+      const selected = (0, import_react26.useMemo)(() => selectedId ? txMap.get(selectedId) ?? null : null, [txMap, selectedId]);
       const statsText = `${stats.total} reqs \u2022 ${stats.ok} ok \u2022 ${stats.errors} err`;
-      const maskContextValue = (0, import_react24.useMemo)(() => ({ isMasked, setMasked }), [isMasked, setMasked]);
+      const maskContextValue = (0, import_react26.useMemo)(() => ({ isMasked, setMasked }), [isMasked, setMasked]);
       return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ErrorBoundary, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(MaskContext.Provider, { value: maskContextValue, children: [
         /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           HeaderBar,