@hakam-aldeen-kh/blix 0.9.0 → 0.10.0

package/README.md

@@ -810,6 +810,12 @@ that one: emptying Redux leaves Network alone. Pinned entries survive it, and
 it is disabled when the source has nothing left to clear. To empty every
 source at once, use **Clear log** in the overflow menu, or `⇧C`.
 
+**The launcher badge summarizes the log while the panel is closed.** It shows
+one count per source that has captured anything — Network, Realtime, Redux,
+Query, each with its rail icon — and, in red beside a count, how many of that
+source's entries failed. The dot is capture state: green while capturing,
+amber while paused, pulsing while something is in flight.
+
 The panel opens **floating** the first time. Dock it to the bottom or the
 right from the header; the choice is saved per project.
 
@@ -868,9 +874,12 @@ literal rather than a pre-serialized string.
 ### Exporting the log
 
 The **Export** button in the header offers six formats and a scope
-toggle — **Shown** (what the current section and filters leave visible) or
-**All**. It defaults to Shown, with both counts on the control, so an export
-says what it will contain before you pick a format.
+toggle — **Selected** (the one entry open in the detail pane: a request, a
+Redux action or a query), **Shown** (what the current section and filters
+leave visible) or **All**. It defaults to Shown, with every count on the
+control, so an export says what it will contain before you pick a format.
+Selected is disabled until you select an entry; if it was your last choice and
+nothing is selected, the menu opens on Shown instead.
 
 | | Format | For |
 | --- | --- | --- |

package/dist/{DevToolsPanel-5XOY5WN5.js → DevToolsPanel-KK5DTPZA.js}

@@ -922,7 +922,26 @@ function Icon({ name, size = 15 }) {
           /* @__PURE__ */ jsx("ellipse", { cx: "8", cy: "4.1", rx: "5.1", ry: "2" }),
           /* @__PURE__ */ jsx("path", { d: "M2.9 4.1v3.8c0 1.1 2.3 2 5.1 2s5.1-.9 5.1-2V4.1" }),
           /* @__PURE__ */ jsx("path", { d: "M2.9 7.9v3.8c0 1.1 2.3 2 5.1 2s5.1-.9 5.1-2V7.9" })
-        ] })
+        ] }),
+        name === "lock" && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("rect", { x: "3.2", y: "7", width: "9.6", height: "6.6", rx: "1.4" }),
+          /* @__PURE__ */ jsx("path", { d: "M5.4 7V5.2a2.6 2.6 0 0 1 5.2 0V7" })
+        ] }),
+        name === "columns" && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("rect", { x: "2.2", y: "2.8", width: "11.6", height: "10.4", rx: "1.6" }),
+          /* @__PURE__ */ jsx("path", { d: "M6.1 2.8v10.4M9.9 2.8v10.4" })
+        ] }),
+        name === "corner" && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("path", { d: "M3 13V7.4A4.4 4.4 0 0 1 7.4 3H13" }),
+          /* @__PURE__ */ jsx("path", { d: "M8 13h5V8", strokeDasharray: "1.4 1.8" })
+        ] }),
+        name === "purge" && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("ellipse", { cx: "7", cy: "4.1", rx: "4.6", ry: "1.8" }),
+          /* @__PURE__ */ jsx("path", { d: "M2.4 4.1v7.6c0 1 2 1.8 4.6 1.8" }),
+          /* @__PURE__ */ jsx("path", { d: "M11.6 4.1v3.1" }),
+          /* @__PURE__ */ jsx("path", { d: "M10 10l3.6 3.6M13.6 10 10 13.6" })
+        ] }),
+        name === "command" && /* @__PURE__ */ jsx("path", { d: "M6 6h4v4H6zM6 6V4.5A1.5 1.5 0 1 0 4.5 6H6M10 6V4.5A1.5 1.5 0 1 1 11.5 6H10M6 10v1.5A1.5 1.5 0 1 1 4.5 10H6M10 10v1.5a1.5 1.5 0 1 0 1.5-1.5H10" })
       ]
     }
   );
@@ -4592,8 +4611,130 @@ function useFabDrag(onOpen, onDock) {
   return { dragPos, docking, start };
 }
 
-// src/ui/components/MonitorFab.tsx
+// src/ui/components/SourcesRail.tsx
 import { Fragment as Fragment9, jsx as jsx15, jsxs as jsxs15 } from "react/jsx-runtime";
+var SECTION_DEFS = [
+  { id: "network", label: "Network", hotkey: "1", title: "HTTP requests (1)", icon: "network" },
+  { id: "realtime", label: "Realtime", hotkey: "2", title: "WebSocket / ActionCable connections (2)", icon: "bolt" },
+  { id: "redux", label: "Redux", hotkey: "3", title: "Redux actions (3)", icon: "stack" },
+  { id: "query", label: "Query", hotkey: "4", title: "TanStack Query cache activity (4)", icon: "database" }
+];
+function SourcesRail({
+  width,
+  mini,
+  section,
+  counts,
+  stats,
+  onSection,
+  onToggle,
+  onOpenPalette
+}) {
+  const rows = [
+    ["Captured", String(stats.captured), ""],
+    ["Transferred", formatBytes(stats.transferred), ""],
+    ["Slowest", stats.slowestMs > 0 ? formatDuration(stats.slowestMs) : "\u2014", stats.slowestMs > 0 ? "nm-hot" : "nm-zero"],
+    ["Failing", String(stats.failing), stats.failing > 0 ? "nm-bad" : "nm-zero"],
+    ...stats.persistedLabel ? [["On disk", stats.persistedLabel, stats.persistedLabel === "0 B" ? "nm-zero" : ""]] : []
+  ];
+  return /* @__PURE__ */ jsxs15(
+    "nav",
+    {
+      className: `nm-rail${mini ? " nm-rail-mini" : ""}`,
+      style: { width },
+      "aria-label": "Sources",
+      children: [
+        /* @__PURE__ */ jsxs15("div", { className: "nm-rail-head", children: [
+          /* @__PURE__ */ jsx15("span", { className: "nm-rail-label", children: "SOURCES" }),
+          /* @__PURE__ */ jsx15(
+            "button",
+            {
+              type: "button",
+              className: "nm-rail-collapse",
+              onClick: onToggle,
+              "aria-label": mini ? "Expand the sidebar" : "Collapse the sidebar",
+              "aria-expanded": !mini,
+              title: mini ? "Expand" : "Collapse",
+              children: /* @__PURE__ */ jsx15(Icon, { name: "chevron", size: 10 })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx15("div", { className: "nm-rail-list", role: "tablist", "aria-orientation": "vertical", children: SECTION_DEFS.map((s) => {
+          const empty = counts[s.id] === 0;
+          const active = section === s.id;
+          return /* @__PURE__ */ jsxs15(
+            "button",
+            {
+              type: "button",
+              role: "tab",
+              "aria-selected": active,
+              "data-src": s.id,
+              className: `nm-rail-item${active ? " active" : ""}${empty ? " nm-rail-empty" : ""}`,
+              onClick: () => onSection(s.id),
+              title: `${s.title} \u2014 ${counts[s.id]}`,
+              children: [
+                /* @__PURE__ */ jsx15("span", { className: "nm-rail-ico", children: /* @__PURE__ */ jsx15(Icon, { name: s.icon, size: 12 }) }),
+                /* @__PURE__ */ jsx15("span", { className: "nm-rail-name", children: s.label }),
+                /* @__PURE__ */ jsx15("span", { className: "nm-rail-n", children: counts[s.id] }),
+                /* @__PURE__ */ jsx15("span", { className: "nm-rail-key", children: s.hotkey })
+              ]
+            },
+            s.id
+          );
+        }) }),
+        /* @__PURE__ */ jsxs15("div", { className: "nm-rail-stats", children: [
+          /* @__PURE__ */ jsx15("div", { className: "nm-rail-stats-head", children: "SESSION" }),
+          rows.map(([k, v, tone]) => /* @__PURE__ */ jsxs15("div", { className: "nm-rail-stat", children: [
+            /* @__PURE__ */ jsx15("span", { className: "nm-rail-stat-k", children: k }),
+            /* @__PURE__ */ jsx15("span", { className: `nm-rail-stat-v ${tone}`, children: v })
+          ] }, k))
+        ] }),
+        /* @__PURE__ */ jsx15("div", { className: "nm-rail-spacer" }),
+        /* @__PURE__ */ jsx15("div", { className: "nm-rail-cmdwrap", children: /* @__PURE__ */ jsx15(
+          "button",
+          {
+            type: "button",
+            className: "nm-rail-cmd",
+            onClick: onOpenPalette,
+            "aria-label": "All commands",
+            title: "All commands (\u2318K)",
+            children: mini ? /* @__PURE__ */ jsx15(Icon, { name: "search", size: 12 }) : /* @__PURE__ */ jsxs15(Fragment9, { children: [
+              /* @__PURE__ */ jsx15("span", { children: "All commands" }),
+              /* @__PURE__ */ jsx15("span", { className: "nm-rail-key", children: "\u2318K" })
+            ] })
+          }
+        ) })
+      ]
+    }
+  );
+}
+
+// src/ui/components/MonitorFab.tsx
+import { Fragment as Fragment10, jsx as jsx16, jsxs as jsxs16 } from "react/jsx-runtime";
+function SourceCounts({
+  counts,
+  errors
+}) {
+  const present = SECTION_DEFS.filter((s) => counts[s.id] > 0);
+  if (present.length === 0) return /* @__PURE__ */ jsx16("span", { className: "nm-fab-count", children: "0" });
+  return /* @__PURE__ */ jsx16(Fragment10, { children: present.map((s) => {
+    var _a;
+    const failed = (_a = errors == null ? void 0 : errors[s.id]) != null ? _a : 0;
+    return /* @__PURE__ */ jsxs16(
+      "span",
+      {
+        className: "nm-fab-src",
+        "data-src": s.id,
+        title: `${counts[s.id]} ${s.label}${failed > 0 ? `, ${failed} failing` : ""}`,
+        children: [
+          /* @__PURE__ */ jsx16(Icon, { name: s.icon, size: 11 }),
+          counts[s.id],
+          failed > 0 && /* @__PURE__ */ jsx16("span", { className: "nm-fab-err", children: failed })
+        ]
+      },
+      s.id
+    );
+  }) });
+}
 var CORNER_STYLE = {
   "bottom-left": { bottom: MARGIN, left: MARGIN },
   "bottom-right": { bottom: MARGIN, right: MARGIN },
@@ -4610,11 +4751,13 @@ var BADGE_LABEL = "blix";
 function MonitorFab({
   paused,
   total,
+  counts,
+  sourceErrors,
   errors,
   pending,
   onPointerDown
 }) {
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs16(
     "button",
     {
       type: "button",
@@ -4625,16 +4768,13 @@ function MonitorFab({
       "aria-label": `Blix \u2014 ${total} captured${errors > 0 ? `, ${errors} failing` : ""}`,
       title: "Blix \u2014 click to open, drag to a corner",
       children: [
-        /* @__PURE__ */ jsxs15("span", { className: "nm-fab-brand", children: [
-          /* @__PURE__ */ jsx15("span", { className: "nm-fab-dot" }),
-          /* @__PURE__ */ jsx15("span", { className: "nm-fab-label", children: BADGE_LABEL })
-        ] }),
-        /* @__PURE__ */ jsx15("span", { className: "nm-fab-sep" }),
-        /* @__PURE__ */ jsxs15("span", { className: "nm-fab-stats", children: [
-          /* @__PURE__ */ jsx15("span", { className: "nm-fab-count", title: `${total} captured`, children: total }),
-          errors > 0 && /* @__PURE__ */ jsx15("span", { className: "nm-fab-err", title: `${errors} failing`, children: errors })
+        /* @__PURE__ */ jsxs16("span", { className: "nm-fab-brand", children: [
+          /* @__PURE__ */ jsx16("span", { className: "nm-fab-dot" }),
+          /* @__PURE__ */ jsx16("span", { className: "nm-fab-label", children: BADGE_LABEL })
         ] }),
-        /* @__PURE__ */ jsx15("span", { className: "nm-fab-grip", "aria-hidden": true, children: /* @__PURE__ */ jsx15(Icon, { name: "grip", size: 12 }) })
+        /* @__PURE__ */ jsx16("span", { className: "nm-fab-sep" }),
+        /* @__PURE__ */ jsx16("span", { className: "nm-fab-stats", children: /* @__PURE__ */ jsx16(SourceCounts, { counts, errors: sourceErrors }) }),
+        /* @__PURE__ */ jsx16("span", { className: "nm-fab-grip", "aria-hidden": true, children: /* @__PURE__ */ jsx16(Icon, { name: "grip", size: 12 }) })
       ]
     }
   );
@@ -4642,11 +4782,11 @@ function MonitorFab({
 function FabDragPreview({
   pos,
   paused,
-  total
+  counts
 }) {
   const target = nearestCorner(pos.x, pos.y);
-  return /* @__PURE__ */ jsxs15(Fragment9, { children: [
-    CORNERS.map((c) => /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsxs16(Fragment10, { children: [
+    CORNERS.map((c) => /* @__PURE__ */ jsx16(
       "span",
       {
         className: `nm-zone${target === c.id ? " active" : ""}`,
@@ -4655,19 +4795,19 @@ function FabDragPreview({
       },
       c.id
     )),
-    /* @__PURE__ */ jsxs15(
+    /* @__PURE__ */ jsxs16(
       "span",
       {
         className: "nm-fab nm-fab-ghost",
         "data-paused": paused || void 0,
         style: { left: pos.x, top: pos.y },
         children: [
-          /* @__PURE__ */ jsxs15("span", { className: "nm-fab-brand", children: [
-            /* @__PURE__ */ jsx15("span", { className: "nm-fab-dot" }),
-            /* @__PURE__ */ jsx15("span", { className: "nm-fab-label", children: BADGE_LABEL })
+          /* @__PURE__ */ jsxs16("span", { className: "nm-fab-brand", children: [
+            /* @__PURE__ */ jsx16("span", { className: "nm-fab-dot" }),
+            /* @__PURE__ */ jsx16("span", { className: "nm-fab-label", children: BADGE_LABEL })
           ] }),
-          /* @__PURE__ */ jsx15("span", { className: "nm-fab-sep" }),
-          /* @__PURE__ */ jsx15("span", { className: "nm-fab-stats", children: /* @__PURE__ */ jsx15("span", { className: "nm-fab-count", children: total }) })
+          /* @__PURE__ */ jsx16("span", { className: "nm-fab-sep" }),
+          /* @__PURE__ */ jsx16("span", { className: "nm-fab-stats", children: /* @__PURE__ */ jsx16(SourceCounts, { counts }) })
         ]
       }
     )
@@ -4676,7 +4816,7 @@ function FabDragPreview({
 
 // src/ui/components/MonitorToolbar.tsx
 import { useRef as useRef6 } from "react";
-import { Fragment as Fragment10, jsx as jsx16, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx17, jsxs as jsxs17 } from "react/jsx-runtime";
 var DOCKS = [
   { mode: "bottom", icon: "dock-bottom", title: "Dock to the bottom" },
   { mode: "right", icon: "dock-right", title: "Dock to the right" },
@@ -4728,15 +4868,15 @@ function MonitorToolbar(props) {
       right: Math.max(8, window.innerWidth - rect.right)
     } : null;
   };
-  return /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs17(
     "div",
     {
       className: `nm-header${mode === "float" && !maximized ? " nm-draggable" : ""}`,
       onPointerDown,
       children: [
-        mode === "float" && !maximized && /* @__PURE__ */ jsx16("button", { type: "button", className: "nm-grip", "aria-label": "Move panel", children: /* @__PURE__ */ jsx16(Icon, { name: "grip", size: 12 }) }),
-        /* @__PURE__ */ jsx16("span", { className: "nm-title", children: "blix" }),
-        /* @__PURE__ */ jsxs16(
+        mode === "float" && !maximized && /* @__PURE__ */ jsx17("button", { type: "button", className: "nm-grip", "aria-label": "Move panel", children: /* @__PURE__ */ jsx17(Icon, { name: "grip", size: 12 }) }),
+        /* @__PURE__ */ jsx17("span", { className: "nm-title", children: "blix" }),
+        /* @__PURE__ */ jsxs17(
           "button",
           {
             type: "button",
@@ -4746,14 +4886,14 @@ function MonitorToolbar(props) {
             "aria-pressed": paused,
             title: paused ? "Resume capturing (Space)" : "Pause capturing (Space)",
             children: [
-              /* @__PURE__ */ jsx16("span", { className: "nm-chip-dot" }),
-              /* @__PURE__ */ jsx16("span", { children: paused ? "paused" : "capturing" })
+              /* @__PURE__ */ jsx17("span", { className: "nm-chip-dot" }),
+              /* @__PURE__ */ jsx17("span", { children: paused ? "paused" : "capturing" })
             ]
           }
         ),
-        /* @__PURE__ */ jsxs16("div", { className: "nm-filter", onPointerDown: (e) => e.stopPropagation(), children: [
-          /* @__PURE__ */ jsx16("span", { className: "nm-filter-ico", "aria-hidden": true, children: /* @__PURE__ */ jsx16(Icon, { name: "search", size: 11 }) }),
-          /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsxs17("div", { className: "nm-filter", onPointerDown: (e) => e.stopPropagation(), children: [
+          /* @__PURE__ */ jsx17("span", { className: "nm-filter-ico", "aria-hidden": true, children: /* @__PURE__ */ jsx17(Icon, { name: "search", size: 11 }) }),
+          /* @__PURE__ */ jsx17(
             "input",
             {
               ref: searchRef,
@@ -4765,13 +4905,13 @@ function MonitorToolbar(props) {
               placeholder: "method:post   is:error   route:tickets   -cached"
             }
           ),
-          searching && /* @__PURE__ */ jsxs16(Fragment10, { children: [
-            /* @__PURE__ */ jsxs16("span", { className: "nm-filter-count", children: [
+          searching && /* @__PURE__ */ jsxs17(Fragment11, { children: [
+            /* @__PURE__ */ jsxs17("span", { className: "nm-filter-count", children: [
               shown,
               " of ",
               total
             ] }),
-            /* @__PURE__ */ jsx16(
+            /* @__PURE__ */ jsx17(
               "button",
               {
                 type: "button",
@@ -4783,7 +4923,7 @@ function MonitorToolbar(props) {
               }
             )
           ] }),
-          /* @__PURE__ */ jsx16(
+          /* @__PURE__ */ jsx17(
             "button",
             {
               type: "button",
@@ -4795,9 +4935,9 @@ function MonitorToolbar(props) {
               children: ".*"
             }
           ),
-          /* @__PURE__ */ jsx16("button", { type: "button", className: "nm-kbd", onClick: onOpenPalette, title: "Command palette", children: "\u2318K" })
+          /* @__PURE__ */ jsx17("button", { type: "button", className: "nm-kbd", onClick: onOpenPalette, title: "Command palette", children: "\u2318K" })
         ] }),
-        /* @__PURE__ */ jsxs16(
+        /* @__PURE__ */ jsxs17(
           "button",
           {
             type: "button",
@@ -4807,13 +4947,13 @@ function MonitorToolbar(props) {
             "aria-pressed": preserveLog,
             title: preserveLog ? "Preserve log is on \u2014 captured traffic survives a reload (Shift+L)" : "Preserve log \u2014 keep captured traffic across reloads (Shift+L)",
             children: [
-              /* @__PURE__ */ jsx16("span", { className: "nm-chip-ico", "aria-hidden": true, children: /* @__PURE__ */ jsx16(Icon, { name: "preserve", size: 10 }) }),
-              /* @__PURE__ */ jsx16("span", { children: preserveLog ? "preserving" : "preserve" })
+              /* @__PURE__ */ jsx17("span", { className: "nm-chip-ico", "aria-hidden": true, children: /* @__PURE__ */ jsx17(Icon, { name: "preserve", size: 10 }) }),
+              /* @__PURE__ */ jsx17("span", { children: preserveLog ? "preserving" : "preserve" })
             ]
           }
         ),
-        /* @__PURE__ */ jsxs16("div", { className: "nm-actions", children: [
-          /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsxs17("div", { className: "nm-actions", children: [
+          /* @__PURE__ */ jsx17(
             "button",
             {
               type: "button",
@@ -4825,10 +4965,10 @@ function MonitorToolbar(props) {
               "aria-haspopup": "menu",
               "aria-expanded": exportOpen,
               title: "Export the log",
-              children: /* @__PURE__ */ jsx16(Icon, { name: "download", size: 13 })
+              children: /* @__PURE__ */ jsx17(Icon, { name: "download", size: 13 })
             }
           ),
-          /* @__PURE__ */ jsx16(
+          /* @__PURE__ */ jsx17(
             "button",
             {
               type: "button",
@@ -4837,10 +4977,10 @@ function MonitorToolbar(props) {
               disabled: clearDisabled,
               "aria-label": `Clear the ${sectionLabel} log`,
               title: `Clear the ${sectionLabel} log \u2014 other sources and pinned entries are kept`,
-              children: /* @__PURE__ */ jsx16(Icon, { name: "clear", size: 13 })
+              children: /* @__PURE__ */ jsx17(Icon, { name: "clear", size: 13 })
             }
           ),
-          /* @__PURE__ */ jsx16(
+          /* @__PURE__ */ jsx17(
             "button",
             {
               type: "button",
@@ -4851,10 +4991,10 @@ function MonitorToolbar(props) {
               "aria-haspopup": "menu",
               "aria-expanded": themeOpen,
               title: `Appearance \u2014 ${themeLabel}`,
-              children: /* @__PURE__ */ jsx16(Icon, { name: "theme", size: 13 })
+              children: /* @__PURE__ */ jsx17(Icon, { name: "theme", size: 13 })
             }
           ),
-          /* @__PURE__ */ jsx16(
+          /* @__PURE__ */ jsx17(
             "button",
             {
               type: "button",
@@ -4865,14 +5005,14 @@ function MonitorToolbar(props) {
               "aria-haspopup": "menu",
               "aria-expanded": moreOpen,
               title: "More options",
-              children: /* @__PURE__ */ jsx16(Icon, { name: "more", size: 13 })
+              children: /* @__PURE__ */ jsx17(Icon, { name: "more", size: 13 })
             }
           )
         ] }),
-        !tiny && /* @__PURE__ */ jsxs16(Fragment10, { children: [
-          /* @__PURE__ */ jsx16("span", { className: "nm-hsep" }),
-          /* @__PURE__ */ jsxs16("div", { className: "nm-actions", children: [
-            DOCKS.map((d) => /* @__PURE__ */ jsx16(
+        !tiny && /* @__PURE__ */ jsxs17(Fragment11, { children: [
+          /* @__PURE__ */ jsx17("span", { className: "nm-hsep" }),
+          /* @__PURE__ */ jsxs17("div", { className: "nm-actions", children: [
+            DOCKS.map((d) => /* @__PURE__ */ jsx17(
               "button",
               {
                 type: "button",
@@ -4881,11 +5021,11 @@ function MonitorToolbar(props) {
                 "aria-label": d.title,
                 "aria-pressed": mode === d.mode,
                 title: d.title,
-                children: /* @__PURE__ */ jsx16(Icon, { name: d.icon, size: 13 })
+                children: /* @__PURE__ */ jsx17(Icon, { name: d.icon, size: 13 })
               },
               d.mode
             )),
-            !compact && mode === "float" && /* @__PURE__ */ jsx16(
+            !compact && mode === "float" && /* @__PURE__ */ jsx17(
               "button",
               {
                 type: "button",
@@ -4893,10 +5033,10 @@ function MonitorToolbar(props) {
                 onClick: onToggleMaximize,
                 "aria-label": maximized ? "Restore" : "Maximize",
                 title: maximized ? "Restore" : "Maximize",
-                children: /* @__PURE__ */ jsx16(Icon, { name: maximized ? "restore" : "maximize", size: 13 })
+                children: /* @__PURE__ */ jsx17(Icon, { name: maximized ? "restore" : "maximize", size: 13 })
               }
             ),
-            /* @__PURE__ */ jsx16(
+            /* @__PURE__ */ jsx17(
               "button",
               {
                 type: "button",
@@ -4904,7 +5044,7 @@ function MonitorToolbar(props) {
                 onClick: onClose,
                 "aria-label": "Close the panel",
                 title: "Close (Esc)",
-                children: /* @__PURE__ */ jsx16(Icon, { name: "close", size: 13 })
+                children: /* @__PURE__ */ jsx17(Icon, { name: "close", size: 13 })
               }
             )
           ] })
@@ -4916,7 +5056,7 @@ function MonitorToolbar(props) {
 
 // src/ui/components/RequestTable.tsx
 import { memo, useEffect as useEffect6, useRef as useRef7 } from "react";
-import { jsx as jsx17, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs18 } from "react/jsx-runtime";
 var COLUMNS = {
   network: ["STATUS", "TIME"],
   realtime: ["STATE", "OPEN"],
@@ -4979,7 +5119,7 @@ var RequestRow = memo(function RequestRow2({
   const route = splitRoute(entry);
   const note = rowNote(entry);
   const slow = ((_a = entry.durationMs) != null ? _a : 0) >= 1e3;
-  return /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsxs18(
     "div",
     {
       role: "row",
@@ -4998,8 +5138,8 @@ var RequestRow = memo(function RequestRow2({
       onContextMenu: (e) => onContextMenu(e, entry),
       title: `${route.head}${route.tail}`,
       children: [
-        /* @__PURE__ */ jsx17("span", { className: `nm-row-rail${forced ? " nm-row-rail-forced" : ""}`, "aria-hidden": true }),
-        /* @__PURE__ */ jsx17("span", { className: "nm-col-pin", "data-col": "pin", role: "gridcell", children: /* @__PURE__ */ jsx17(
+        /* @__PURE__ */ jsx18("span", { className: `nm-row-rail${forced ? " nm-row-rail-forced" : ""}`, "aria-hidden": true }),
+        /* @__PURE__ */ jsx18("span", { className: "nm-col-pin", "data-col": "pin", role: "gridcell", children: /* @__PURE__ */ jsx18(
           "button",
           {
             type: "button",
@@ -5012,10 +5152,10 @@ var RequestRow = memo(function RequestRow2({
             "aria-pressed": entry.pinned,
             title: entry.pinned ? "Unpin" : "Pin (survives Clear)",
             tabIndex: tabbable ? 0 : -1,
-            children: /* @__PURE__ */ jsx17(Icon, { name: "pin", size: 10 })
+            children: /* @__PURE__ */ jsx18(Icon, { name: "pin", size: 10 })
           }
         ) }),
-        /* @__PURE__ */ jsx17(
+        /* @__PURE__ */ jsx18(
           "span",
           {
             className: "nm-col-method",
@@ -5025,21 +5165,21 @@ var RequestRow = memo(function RequestRow2({
             children: methodLabel(entry)
           }
         ),
-        /* @__PURE__ */ jsxs17("span", { className: "nm-col-route", role: "gridcell", children: [
-          /* @__PURE__ */ jsx17("span", { className: "nm-route-head", children: route.head }),
-          /* @__PURE__ */ jsxs17("span", { className: "nm-route-tail", children: [
+        /* @__PURE__ */ jsxs18("span", { className: "nm-col-route", role: "gridcell", children: [
+          /* @__PURE__ */ jsx18("span", { className: "nm-route-head", children: route.head }),
+          /* @__PURE__ */ jsxs18("span", { className: "nm-route-tail", children: [
             route.tail,
-            note && /* @__PURE__ */ jsx17("span", { className: "nm-route-note", children: note })
+            note && /* @__PURE__ */ jsx18("span", { className: "nm-route-note", children: note })
           ] })
         ] }),
-        /* @__PURE__ */ jsx17("span", { className: "nm-col-size", "data-col": "size", role: "gridcell", children: sizeLabel(entry) }),
-        /* @__PURE__ */ jsx17("span", { className: "nm-col-status", "data-col": "status", role: "gridcell", children: entryStatusLabel(entry) }),
-        /* @__PURE__ */ jsx17("span", { className: "nm-col-time", "data-col": "time", role: "gridcell", "data-slow": slow || void 0, children: timeLabel(entry) }),
-        /* @__PURE__ */ jsx17("span", { className: "nm-col-links", "data-col": "links", role: "gridcell", children: linkTags ? linkTags.split(",").map((s) => /* @__PURE__ */ jsx17("span", { className: "nm-link-tick", "data-src": s, title: `Linked ${s} event` }, s)) : null }),
-        /* @__PURE__ */ jsx17("span", { className: "nm-col-timing", "data-col": "timing", role: "gridcell", children: /* @__PURE__ */ jsxs17("span", { className: "nm-tbar", "aria-hidden": true, children: [
-          /* @__PURE__ */ jsx17("span", { className: "nm-tbar-off", style: { width: `${timing.offsetPct}%` } }),
-          /* @__PURE__ */ jsx17("span", { className: "nm-tbar-wait", style: { width: `${timing.waitPct}%` } }),
-          /* @__PURE__ */ jsx17("span", { className: "nm-tbar-xfer", style: { width: `${timing.transferPct}%` } })
+        /* @__PURE__ */ jsx18("span", { className: "nm-col-size", "data-col": "size", role: "gridcell", children: sizeLabel(entry) }),
+        /* @__PURE__ */ jsx18("span", { className: "nm-col-status", "data-col": "status", role: "gridcell", children: entryStatusLabel(entry) }),
+        /* @__PURE__ */ jsx18("span", { className: "nm-col-time", "data-col": "time", role: "gridcell", "data-slow": slow || void 0, children: timeLabel(entry) }),
+        /* @__PURE__ */ jsx18("span", { className: "nm-col-links", "data-col": "links", role: "gridcell", children: linkTags ? linkTags.split(",").map((s) => /* @__PURE__ */ jsx18("span", { className: "nm-link-tick", "data-src": s, title: `Linked ${s} event` }, s)) : null }),
+        /* @__PURE__ */ jsx18("span", { className: "nm-col-timing", "data-col": "timing", role: "gridcell", children: /* @__PURE__ */ jsxs18("span", { className: "nm-tbar", "aria-hidden": true, children: [
+          /* @__PURE__ */ jsx18("span", { className: "nm-tbar-off", style: { width: `${timing.offsetPct}%` } }),
+          /* @__PURE__ */ jsx18("span", { className: "nm-tbar-wait", style: { width: `${timing.waitPct}%` } }),
+          /* @__PURE__ */ jsx18("span", { className: "nm-tbar-xfer", style: { width: `${timing.transferPct}%` } })
         ] }) })
       ]
     }
@@ -5094,7 +5234,7 @@ function RequestTable({
   ];
   if (counts.aborted > 0) segments.push(["aborted", "Aborted", counts.aborted]);
   const ticks = axisTicks(scaleMs);
-  const header = (key, label, className, col) => /* @__PURE__ */ jsxs17(
+  const header = (key, label, className, col) => /* @__PURE__ */ jsxs18(
     "button",
     {
       type: "button",
@@ -5106,12 +5246,12 @@ function RequestTable({
       title: `Sort by ${label.toLowerCase()}`,
       children: [
         label,
-        sort.key === key && /* @__PURE__ */ jsx17("span", { className: "nm-sort-arrow", children: sort.dir === "asc" ? "\u25B2" : "\u25BC" })
+        sort.key === key && /* @__PURE__ */ jsx18("span", { className: "nm-sort-arrow", children: sort.dir === "asc" ? "\u25B2" : "\u25BC" })
       ]
     }
   );
-  return /* @__PURE__ */ jsxs17("div", { className: "nm-table", "data-hide": hidden.size ? [...hidden].join(" ") : void 0, children: [
-    /* @__PURE__ */ jsx17("div", { className: "nm-fchips nm-strip-scroll", role: "tablist", children: segments.map(([key, label, n]) => /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsxs18("div", { className: "nm-table", "data-hide": hidden.size ? [...hidden].join(" ") : void 0, children: [
+    /* @__PURE__ */ jsx18("div", { className: "nm-fchips nm-strip-scroll", role: "tablist", children: segments.map(([key, label, n]) => /* @__PURE__ */ jsxs18(
       "button",
       {
         type: "button",
@@ -5122,15 +5262,15 @@ function RequestTable({
         onClick: () => onStateFilter(key),
         title: `${label} \u2014 ${n} ${n === 1 ? "entry" : "entries"}`,
         children: [
-          /* @__PURE__ */ jsx17("span", { className: "nm-fchip-dot" }),
-          /* @__PURE__ */ jsx17("span", { className: "nm-fchip-label", children: label }),
-          /* @__PURE__ */ jsx17("span", { className: "nm-fchip-n", children: n })
+          /* @__PURE__ */ jsx18("span", { className: "nm-fchip-dot" }),
+          /* @__PURE__ */ jsx18("span", { className: "nm-fchip-label", children: label }),
+          /* @__PURE__ */ jsx18("span", { className: "nm-fchip-n", children: n })
         ]
       },
       key
     )) }),
-    /* @__PURE__ */ jsxs17("div", { className: "nm-grid", role: "grid", "aria-label": "Captured entries", ref: gridRef, children: [
-      /* @__PURE__ */ jsxs17(
+    /* @__PURE__ */ jsxs18("div", { className: "nm-grid", role: "grid", "aria-label": "Captured entries", ref: gridRef, children: [
+      /* @__PURE__ */ jsxs18(
         "div",
         {
           className: "nm-cols",
@@ -5141,32 +5281,32 @@ function RequestTable({
           },
           title: "Right-click to choose columns",
           children: [
-            /* @__PURE__ */ jsx17("span", { className: "nm-col-lead", "data-col": "pin", role: "columnheader", "aria-label": "Pin" }),
-            /* @__PURE__ */ jsx17("span", { className: "nm-col-method", "data-col": "method", role: "columnheader", children: "METHOD" }),
-            /* @__PURE__ */ jsx17("span", { className: "nm-col-route", role: "columnheader", children: "ROUTE" }),
-            /* @__PURE__ */ jsx17("span", { className: "nm-col-size", "data-col": "size", role: "columnheader", children: "SIZE" }),
+            /* @__PURE__ */ jsx18("span", { className: "nm-col-lead", "data-col": "pin", role: "columnheader", "aria-label": "Pin" }),
+            /* @__PURE__ */ jsx18("span", { className: "nm-col-method", "data-col": "method", role: "columnheader", children: "METHOD" }),
+            /* @__PURE__ */ jsx18("span", { className: "nm-col-route", role: "columnheader", children: "ROUTE" }),
+            /* @__PURE__ */ jsx18("span", { className: "nm-col-size", "data-col": "size", role: "columnheader", children: "SIZE" }),
             header("status", statusCol, "nm-col-status", "status"),
             header("duration", timeCol, "nm-col-time", "time"),
-            /* @__PURE__ */ jsx17("span", { className: "nm-col-links", "data-col": "links", role: "columnheader", "aria-label": "Linked entries" }),
-            /* @__PURE__ */ jsxs17("span", { className: "nm-col-timing nm-axis", "data-col": "timing", role: "columnheader", children: [
-              /* @__PURE__ */ jsx17("span", { children: ticks[0] }),
-              /* @__PURE__ */ jsx17("span", { children: ticks[1] }),
-              /* @__PURE__ */ jsx17("span", { children: ticks[2] })
+            /* @__PURE__ */ jsx18("span", { className: "nm-col-links", "data-col": "links", role: "columnheader", "aria-label": "Linked entries" }),
+            /* @__PURE__ */ jsxs18("span", { className: "nm-col-timing nm-axis", "data-col": "timing", role: "columnheader", children: [
+              /* @__PURE__ */ jsx18("span", { children: ticks[0] }),
+              /* @__PURE__ */ jsx18("span", { children: ticks[1] }),
+              /* @__PURE__ */ jsx18("span", { children: ticks[2] })
             ] })
           ]
         }
       ),
-      /* @__PURE__ */ jsx17(
+      /* @__PURE__ */ jsx18(
         "div",
         {
           className: "nm-tbody nm-scroll",
           role: rows.length ? "rowgroup" : "presentation",
           ref: scrollerRef,
           onScroll: virtual.onScroll,
-          children: rows.length === 0 ? empty : /* @__PURE__ */ jsx17("div", { style: { height: virtual.totalHeight, position: "relative" }, role: "presentation", children: /* @__PURE__ */ jsx17("div", { style: { transform: `translateY(${virtual.offsetY}px)` }, role: "presentation", children: slice.map(
+          children: rows.length === 0 ? empty : /* @__PURE__ */ jsx18("div", { style: { height: virtual.totalHeight, position: "relative" }, role: "presentation", children: /* @__PURE__ */ jsx18("div", { style: { transform: `translateY(${virtual.offsetY}px)` }, role: "presentation", children: slice.map(
             (row, i) => {
               var _a2, _b2;
-              return row.kind === "divider" ? /* @__PURE__ */ jsx17("div", { className: "nm-load-divider", role: "presentation", children: /* @__PURE__ */ jsx17("span", { children: "page load" }) }, `d-${row.loadId}`) : /* @__PURE__ */ jsx17(
+              return row.kind === "divider" ? /* @__PURE__ */ jsx18("div", { className: "nm-load-divider", role: "presentation", children: /* @__PURE__ */ jsx18("span", { children: "page load" }) }, `d-${row.loadId}`) : /* @__PURE__ */ jsx18(
                 RequestRow,
                 {
                   entry: row.entry,
@@ -5194,7 +5334,7 @@ function RequestTable({
 }
 
 // src/ui/components/ShortcutsSheet.tsx
-import { Fragment as Fragment11, jsx as jsx18, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx19, jsxs as jsxs19 } from "react/jsx-runtime";
 var SHORTCUT_GROUPS = [
   {
     title: "PANEL",
@@ -5268,9 +5408,9 @@ function ShortcutsSheet({ onClose }) {
     SHORTCUT_GROUPS.filter((g) => g.col === 0),
     SHORTCUT_GROUPS.filter((g) => g.col === 1)
   ];
-  return /* @__PURE__ */ jsxs18(Fragment11, { children: [
-    /* @__PURE__ */ jsx18("div", { className: "nm-sheet-scrim", onClick: onClose }),
-    /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs19(Fragment12, { children: [
+    /* @__PURE__ */ jsx19("div", { className: "nm-sheet-scrim", onClick: onClose }),
+    /* @__PURE__ */ jsxs19(
       "div",
       {
         className: "nm-sheet",
@@ -5279,31 +5419,31 @@ function ShortcutsSheet({ onClose }) {
         "aria-label": "Keyboard shortcuts",
         onPointerDown: (e) => e.stopPropagation(),
         children: [
-          /* @__PURE__ */ jsxs18("div", { className: "nm-sheet-head", children: [
-            /* @__PURE__ */ jsx18("h3", { children: "Keyboard shortcuts" }),
-            /* @__PURE__ */ jsx18("button", { type: "button", className: "nm-sheet-close", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsx18(Icon, { name: "close", size: 13 }) })
+          /* @__PURE__ */ jsxs19("div", { className: "nm-sheet-head", children: [
+            /* @__PURE__ */ jsx19("h3", { children: "Keyboard shortcuts" }),
+            /* @__PURE__ */ jsx19("button", { type: "button", className: "nm-sheet-close", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsx19(Icon, { name: "close", size: 13 }) })
           ] }),
-          /* @__PURE__ */ jsxs18("div", { className: "nm-sheet-lead", children: [
+          /* @__PURE__ */ jsxs19("div", { className: "nm-sheet-lead", children: [
             "Sorting, density, the dock, the copy formats and the filter syntax all live in the command palette rather than each having a button \u2014 the header keeps only what you read constantly. Payloads render as ",
-            /* @__PURE__ */ jsx18("b", { children: "Tree" }),
+            /* @__PURE__ */ jsx19("b", { children: "Tree" }),
             ", ",
-            /* @__PURE__ */ jsx18("b", { children: "Table" }),
+            /* @__PURE__ */ jsx19("b", { children: "Table" }),
             ",",
             " ",
-            /* @__PURE__ */ jsx18("b", { children: "JSON" }),
+            /* @__PURE__ */ jsx19("b", { children: "JSON" }),
             ", ",
-            /* @__PURE__ */ jsx18("b", { children: "YAML" }),
+            /* @__PURE__ */ jsx19("b", { children: "YAML" }),
             " or ",
-            /* @__PURE__ */ jsx18("b", { children: "Text" }),
+            /* @__PURE__ */ jsx19("b", { children: "Text" }),
             ", and ",
-            /* @__PURE__ */ jsx18("b", { children: "Copy" }),
+            /* @__PURE__ */ jsx19("b", { children: "Copy" }),
             " gives you whichever one you are looking at."
           ] }),
-          /* @__PURE__ */ jsx18("div", { className: "nm-sheet-cols", children: columns.map((groups, i) => /* @__PURE__ */ jsx18("div", { className: "nm-sheet-col", children: groups.map((group) => /* @__PURE__ */ jsxs18("div", { children: [
-            /* @__PURE__ */ jsx18("div", { className: "nm-sheet-group", children: group.title }),
-            group.items.map((item) => /* @__PURE__ */ jsxs18("div", { className: "nm-sheet-row", children: [
-              /* @__PURE__ */ jsx18("span", { className: "nm-sheet-key", children: item.keys }),
-              /* @__PURE__ */ jsx18("span", { className: "nm-sheet-desc", children: item.desc })
+          /* @__PURE__ */ jsx19("div", { className: "nm-sheet-cols", children: columns.map((groups, i) => /* @__PURE__ */ jsx19("div", { className: "nm-sheet-col", children: groups.map((group) => /* @__PURE__ */ jsxs19("div", { children: [
+            /* @__PURE__ */ jsx19("div", { className: "nm-sheet-group", children: group.title }),
+            group.items.map((item) => /* @__PURE__ */ jsxs19("div", { className: "nm-sheet-row", children: [
+              /* @__PURE__ */ jsx19("span", { className: "nm-sheet-key", children: item.keys }),
+              /* @__PURE__ */ jsx19("span", { className: "nm-sheet-desc", children: item.desc })
             ] }, item.desc))
           ] }, group.title)) }, i)) })
         ]
@@ -5312,103 +5452,6 @@ function ShortcutsSheet({ onClose }) {
   ] });
 }
 
-// src/ui/components/SourcesRail.tsx
-import { Fragment as Fragment12, jsx as jsx19, jsxs as jsxs19 } from "react/jsx-runtime";
-var SECTION_DEFS = [
-  { id: "network", label: "Network", hotkey: "1", title: "HTTP requests (1)", icon: "network" },
-  { id: "realtime", label: "Realtime", hotkey: "2", title: "WebSocket / ActionCable connections (2)", icon: "bolt" },
-  { id: "redux", label: "Redux", hotkey: "3", title: "Redux actions (3)", icon: "stack" },
-  { id: "query", label: "Query", hotkey: "4", title: "TanStack Query cache activity (4)", icon: "database" }
-];
-function SourcesRail({
-  width,
-  mini,
-  section,
-  counts,
-  stats,
-  onSection,
-  onToggle,
-  onOpenPalette
-}) {
-  const rows = [
-    ["Captured", String(stats.captured), ""],
-    ["Transferred", formatBytes(stats.transferred), ""],
-    ["Slowest", stats.slowestMs > 0 ? formatDuration(stats.slowestMs) : "\u2014", stats.slowestMs > 0 ? "nm-hot" : "nm-zero"],
-    ["Failing", String(stats.failing), stats.failing > 0 ? "nm-bad" : "nm-zero"],
-    ...stats.persistedLabel ? [["On disk", stats.persistedLabel, stats.persistedLabel === "0 B" ? "nm-zero" : ""]] : []
-  ];
-  return /* @__PURE__ */ jsxs19(
-    "nav",
-    {
-      className: `nm-rail${mini ? " nm-rail-mini" : ""}`,
-      style: { width },
-      "aria-label": "Sources",
-      children: [
-        /* @__PURE__ */ jsxs19("div", { className: "nm-rail-head", children: [
-          /* @__PURE__ */ jsx19("span", { className: "nm-rail-label", children: "SOURCES" }),
-          /* @__PURE__ */ jsx19(
-            "button",
-            {
-              type: "button",
-              className: "nm-rail-collapse",
-              onClick: onToggle,
-              "aria-label": mini ? "Expand the sidebar" : "Collapse the sidebar",
-              "aria-expanded": !mini,
-              title: mini ? "Expand" : "Collapse",
-              children: /* @__PURE__ */ jsx19(Icon, { name: "chevron", size: 10 })
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx19("div", { className: "nm-rail-list", role: "tablist", "aria-orientation": "vertical", children: SECTION_DEFS.map((s) => {
-          const empty = counts[s.id] === 0;
-          const active = section === s.id;
-          return /* @__PURE__ */ jsxs19(
-            "button",
-            {
-              type: "button",
-              role: "tab",
-              "aria-selected": active,
-              "data-src": s.id,
-              className: `nm-rail-item${active ? " active" : ""}${empty ? " nm-rail-empty" : ""}`,
-              onClick: () => onSection(s.id),
-              title: `${s.title} \u2014 ${counts[s.id]}`,
-              children: [
-                /* @__PURE__ */ jsx19("span", { className: "nm-rail-ico", children: /* @__PURE__ */ jsx19(Icon, { name: s.icon, size: 12 }) }),
-                /* @__PURE__ */ jsx19("span", { className: "nm-rail-name", children: s.label }),
-                /* @__PURE__ */ jsx19("span", { className: "nm-rail-n", children: counts[s.id] }),
-                /* @__PURE__ */ jsx19("span", { className: "nm-rail-key", children: s.hotkey })
-              ]
-            },
-            s.id
-          );
-        }) }),
-        /* @__PURE__ */ jsxs19("div", { className: "nm-rail-stats", children: [
-          /* @__PURE__ */ jsx19("div", { className: "nm-rail-stats-head", children: "SESSION" }),
-          rows.map(([k, v, tone]) => /* @__PURE__ */ jsxs19("div", { className: "nm-rail-stat", children: [
-            /* @__PURE__ */ jsx19("span", { className: "nm-rail-stat-k", children: k }),
-            /* @__PURE__ */ jsx19("span", { className: `nm-rail-stat-v ${tone}`, children: v })
-          ] }, k))
-        ] }),
-        /* @__PURE__ */ jsx19("div", { className: "nm-rail-spacer" }),
-        /* @__PURE__ */ jsx19("div", { className: "nm-rail-cmdwrap", children: /* @__PURE__ */ jsx19(
-          "button",
-          {
-            type: "button",
-            className: "nm-rail-cmd",
-            onClick: onOpenPalette,
-            "aria-label": "All commands",
-            title: "All commands (\u2318K)",
-            children: mini ? /* @__PURE__ */ jsx19(Icon, { name: "search", size: 12 }) : /* @__PURE__ */ jsxs19(Fragment12, { children: [
-              /* @__PURE__ */ jsx19("span", { children: "All commands" }),
-              /* @__PURE__ */ jsx19("span", { className: "nm-rail-key", children: "\u2318K" })
-            ] })
-          }
-        ) })
-      ]
-    }
-  );
-}
-
 // src/ui/components/StatusBar.tsx
 import { Fragment as Fragment13, jsx as jsx20, jsxs as jsxs20 } from "react/jsx-runtime";
 function Seg({
@@ -5634,6 +5677,7 @@ function Menu({
 }
 function MenuItem({
   children,
+  icon,
   state,
   on,
   value,
@@ -5653,6 +5697,7 @@ function MenuItem({
       onPointerEnter: onPreview,
       onFocus: onPreview,
       children: [
+        icon && /* @__PURE__ */ jsx21("span", { className: "nm-menu-ico", "aria-hidden": true, children: /* @__PURE__ */ jsx21(Icon, { name: icon, size: 13 }) }),
         /* @__PURE__ */ jsx21("span", { className: "nm-menu-label", children }),
         state != null && /* @__PURE__ */ jsx21("span", { className: "nm-menu-state", "data-on": on || void 0, "data-value": value || void 0, children: state }),
         /* @__PURE__ */ jsx21("span", { className: "nm-menu-arrow", "aria-hidden": true, children: arrow ? "\u203A" : "" })
@@ -5983,11 +6028,13 @@ function ExportMenu({
   anchor,
   scope,
   onScope,
+  selected,
   shown,
   all,
   onDone
 }) {
-  const entries = scope === "all" ? all : shown;
+  const effective = scope === "selected" && !selected ? "shown" : scope;
+  const entries = effective === "all" ? all : effective === "selected" && selected ? [selected] : shown;
   const stamp = fileStamp();
   const empty = entries.length === 0;
   const run = (fn) => () => {
@@ -6003,7 +6050,21 @@ function ExportMenu({
           "button",
           {
             type: "button",
-            className: `nm-scope-btn${scope === "shown" ? " active" : ""}`,
+            className: `nm-scope-btn${effective === "selected" ? " active" : ""}`,
+            onClick: () => onScope("selected"),
+            disabled: !selected,
+            title: selected ? "Only the entry open in the detail pane" : "Select an entry in the list to export it on its own",
+            children: [
+              "Selected ",
+              /* @__PURE__ */ jsx22("b", { children: selected ? 1 : 0 })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs22(
+          "button",
+          {
+            type: "button",
+            className: `nm-scope-btn${effective === "shown" ? " active" : ""}`,
             onClick: () => onScope("shown"),
             title: "Only what the current section and filters show",
             children: [
@@ -6016,7 +6077,7 @@ function ExportMenu({
           "button",
           {
             type: "button",
-            className: `nm-scope-btn${scope === "all" ? " active" : ""}`,
+            className: `nm-scope-btn${effective === "all" ? " active" : ""}`,
             onClick: () => onScope("all"),
             title: "Everything in the buffer, across all four sources",
             children: [
@@ -8435,6 +8496,13 @@ var FAB = `
   font-family: var(--bx-font-mono); font-variant-numeric: tabular-nums;
 }
 .nm-fab-count { color: var(--bx-fg-2); }
+.nm-fab-src { display: inline-flex; align-items: center; gap: 3px; color: var(--bx-fg-2); }
+.nm-fab-src svg { flex: none; }
+.nm-fab-src .nm-fab-err { margin-left: 2px; }
+.nm-fab-src[data-src="network"]  svg { color: var(--bx-src-network); }
+.nm-fab-src[data-src="realtime"] svg { color: var(--bx-src-realtime); }
+.nm-fab-src[data-src="redux"]    svg { color: var(--bx-src-redux); }
+.nm-fab-src[data-src="query"]    svg { color: var(--bx-src-query); }
 .nm-fab-err { color: var(--bx-err); }
 .nm-fab-grip { display: flex; align-items: center; padding-right: var(--bx-3); color: var(--bx-mark); }
 
@@ -9430,6 +9498,9 @@ var MENU = `
 }
 .nm-menu-item:hover, .nm-menu-item.active { background: var(--bx-hover-float); }
 .nm-menu-item:disabled { cursor: not-allowed; }
+.nm-menu-ico { display: flex; flex: none; margin-right: var(--bx-3); color: var(--bx-fg-3); }
+.nm-menu-item:hover .nm-menu-ico, .nm-menu-item:focus-visible .nm-menu-ico { color: var(--bx-fg-2); }
+.nm-menu-item:disabled .nm-menu-ico { color: var(--bx-mark); }
 .nm-menu-label { flex: 1 1 auto; min-width: 0; font-size: var(--bx-fs-md); color: var(--bx-fg); }
 .nm-menu-item:disabled .nm-menu-label { color: var(--bx-fg-3); }
 /* A row that carries a state prints it where the icon used to be. A disabled
@@ -9460,6 +9531,7 @@ var MENU = `
 .nm-scope-btn:first-child { border-radius: var(--bx-r-ctl) 0 0 var(--bx-r-ctl); }
 .nm-scope-btn:last-child { border-radius: 0 var(--bx-r-ctl) var(--bx-r-ctl) 0; }
 .nm-scope-btn.active { background: var(--bx-hover-float); color: var(--bx-fg); }
+.nm-scope-btn:disabled { color: var(--bx-mark); cursor: not-allowed; }
 .nm-scope-btn b {
   font-family: var(--bx-font-mono); font-weight: 400; color: var(--bx-fg-3);
   font-variant-numeric: tabular-nums;
@@ -10631,15 +10703,28 @@ function DevTools() {
     const timer = window.setTimeout(() => setPurgeError(null), 8e3);
     return () => window.clearTimeout(timer);
   }, [purgeError]);
-  const { sectionEntries, sectionCounts } = useMemo9(() => {
+  const { sectionEntries, sectionCounts, sectionErrors, allErrors, allPending } = useMemo9(() => {
     const counts = { network: 0, realtime: 0, redux: 0, query: 0 };
+    const errorsBySection = { network: 0, realtime: 0, redux: 0, query: 0 };
     const filtered = [];
+    let errors = 0;
+    let pending = 0;
     for (const e of entries) {
       const s = sectionOf(e);
       counts[s] += 1;
       if (s === section) filtered.push(e);
+      if (e.state === "error") {
+        errors += 1;
+        errorsBySection[s] += 1;
+      } else if (e.state === "pending") pending += 1;
     }
-    return { sectionEntries: filtered, sectionCounts: counts };
+    return {
+      sectionEntries: filtered,
+      sectionCounts: counts,
+      sectionErrors: errorsBySection,
+      allErrors: errors,
+      allPending: pending
+    };
   }, [entries, section]);
   const parsedFilter = useMemo9(() => parseFilter(query), [query]);
   const list = useMonitorList(
@@ -11185,12 +11270,14 @@ function DevTools() {
           {
             paused,
             total: entries.length,
-            errors: list.counts.error,
-            pending: list.counts.pending,
+            counts: sectionCounts,
+            sourceErrors: sectionErrors,
+            errors: allErrors,
+            pending: allPending,
             onPointerDown: fab.start
           }
         ),
-        fab.dragPos && /* @__PURE__ */ jsx24(FabDragPreview, { pos: fab.dragPos, paused, total: entries.length }),
+        fab.dragPos && /* @__PURE__ */ jsx24(FabDragPreview, { pos: fab.dragPos, paused, counts: sectionCounts }),
         open && /* @__PURE__ */ jsxs24(
           "div",
           {
@@ -11437,6 +11524,7 @@ function DevTools() {
             anchor: exportAnchor,
             scope: exportScope,
             onScope: setExportScope,
+            selected: selectedEntry != null ? selectedEntry : null,
             shown: list.filtered,
             all: entries,
             onDone: closeMenus
@@ -11457,6 +11545,7 @@ function DevTools() {
           /* @__PURE__ */ jsx24(
             MenuItem,
             {
+              icon: "clear",
               state: "\u21E7C",
               onSelect: () => {
                 networkMonitor.clear();
@@ -11469,6 +11558,7 @@ function DevTools() {
           /* @__PURE__ */ jsx24(
             MenuItem,
             {
+              icon: "preserve",
               state: prefs2.preserveLog ? "ON" : "OFF",
               on: prefs2.preserveLog,
               onSelect: () => {
@@ -11481,6 +11571,7 @@ function DevTools() {
           /* @__PURE__ */ jsx24(
             MenuItem,
             {
+              icon: "purge",
               disabled: persisted.count === 0,
               state: persisted.count ? formatBytes(persisted.bytes) : "nothing saved",
               value: persisted.count > 0,
@@ -11494,6 +11585,7 @@ function DevTools() {
           /* @__PURE__ */ jsx24(
             MenuItem,
             {
+              icon: "database",
               arrow: true,
               state: isSharedDefaultDb() ? "shared" : void 0,
               on: isSharedDefaultDb(),
@@ -11508,6 +11600,7 @@ function DevTools() {
           /* @__PURE__ */ jsx24(
             MenuItem,
             {
+              icon: "lock",
               state: authUnmasked ? "ON" : "OFF",
               on: authUnmasked,
               onSelect: () => {
@@ -11520,6 +11613,7 @@ function DevTools() {
           /* @__PURE__ */ jsx24(
             MenuItem,
             {
+              icon: "follow",
               state: selection.isFollowing ? "ON" : "OFF",
               on: selection.isFollowing,
               onSelect: () => {
@@ -11532,6 +11626,7 @@ function DevTools() {
           /* @__PURE__ */ jsx24(
             MenuItem,
             {
+              icon: "columns",
               arrow: true,
               value: true,
               state: `${TOGGLEABLE_COLUMNS.length - hiddenColumns.size} of ${TOGGLEABLE_COLUMNS.length}`,
@@ -11542,6 +11637,7 @@ function DevTools() {
           /* @__PURE__ */ jsx24(
             MenuItem,
             {
+              icon: "corner",
               arrow: true,
               value: true,
               state: FAB_RADIUS[fabRadius].label.toUpperCase(),
@@ -11556,6 +11652,7 @@ function DevTools() {
           /* @__PURE__ */ jsx24(
             MenuItem,
             {
+              icon: "density",
               arrow: true,
               value: true,
               state: density.toUpperCase(),
@@ -11569,6 +11666,7 @@ function DevTools() {
           /* @__PURE__ */ jsx24(
             MenuItem,
             {
+              icon: "download",
               disabled: entries.length === 0,
               onSelect: () => moreAnchor && setExportAnchor(moreAnchor),
               children: "Export\u2026"
@@ -11577,6 +11675,7 @@ function DevTools() {
           panel.tinyToolbar && /* @__PURE__ */ jsx24(
             MenuItem,
             {
+              icon: "dock-float",
               value: true,
               state: dock.mode.toUpperCase(),
               onSelect: () => {
@@ -11592,6 +11691,7 @@ function DevTools() {
           /* @__PURE__ */ jsx24(
             MenuItem,
             {
+              icon: "command",
               state: "\u2318K",
               onSelect: () => {
                 closeMenus();
@@ -11603,6 +11703,7 @@ function DevTools() {
           /* @__PURE__ */ jsx24(
             MenuItem,
             {
+              icon: "keyboard",
               state: "?",
               onSelect: () => {
                 setShowShortcuts(true);

package/dist/index.js

@@ -37,7 +37,7 @@ function Blix({ store, apiClient, dbName }) {
   }, []);
   if (mounted && (process.env.NODE_ENV === "development" || process.env.NEXT_PUBLIC_BLIX === "true")) {
     if (!panelRef.current) {
-      panelRef.current = lazy(() => import("./DevToolsPanel-5XOY5WN5.js"));
+      panelRef.current = lazy(() => import("./DevToolsPanel-KK5DTPZA.js"));
     }
     const Panel = panelRef.current;
     if (dbName) configureDbName(dbName);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hakam-aldeen-kh/blix",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "Dev-tools panel for React apps — HTTP, Redux, Query and Realtime monitoring.",
   "keywords": [
     "devtools",