epiq 1.4.3 → 1.4.5

package/dist/gui/main.js

@@ -24858,7 +24858,8 @@ var GUI_THEME = {
   dim2: "rgb(100 107 133)",
   accent: "#76d4ff",
   green: "#8ce99a",
-  red: "#ff8787"
+  red: "#ff8787",
+  transparent: "rgba(0, 0, 0, 0)"
 };
 var EVENT_CATEGORY_COLORS = {
   tickets: GUI_THEME.accent,
@@ -25324,11 +25325,16 @@ var User = ({
 );
 
 // source/version.ts
-var EPIQ_VERSION = "1.4.3";
+var EPIQ_VERSION = "1.4.5";
 
 // source/gui/client/components/Header.tsx
 var import_jsx_runtime7 = __toESM(require_jsx_runtime(), 1);
-var Header = ({ state, connected, syncStatus }) => {
+var Header = ({
+  state,
+  connected,
+  scrubbing,
+  syncStatus
+}) => {
   const syncColor = syncStatus.status === "synced" ? GUI_THEME.green : syncStatus.status === "failed" ? GUI_THEME.red : GUI_THEME.accent;
   const syncLabel = syncStatus.status === "failed" ? "-" : syncStatus.msg.toLowerCase();
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
@@ -25387,6 +25393,10 @@ var Header = ({ state, connected, syncStatus }) => {
                         whiteSpace: "nowrap"
                       },
                       children: [
+                        scrubbing && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: { color: GUI_THEME.accent, fontWeight: 700 }, children: "Read-only" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: { color: GUI_THEME.dim }, children: "|" })
+                        ] }),
                         /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
                           "span",
                           {
@@ -25403,7 +25413,6 @@ var Header = ({ state, connected, syncStatus }) => {
                                   title: syncStatus.status === "failed" ? syncStatus.msg : void 0,
                                   style: {
                                     color: GUI_THEME.dim,
-                                    minWidth: 72,
                                     maxWidth: 220,
                                     overflow: "hidden",
                                     textOverflow: "ellipsis",
@@ -27721,11 +27730,11 @@ function addChildren(props, children) {
     }
   }
 }
-function productionCreate(_, jsx35, jsxs23) {
+function productionCreate(_, jsx37, jsxs25) {
   return create2;
   function create2(_2, type, props, key) {
     const isStaticChildren = Array.isArray(props.children);
-    const fn = isStaticChildren ? jsxs23 : jsx35;
+    const fn = isStaticChildren ? jsxs25 : jsx37;
     return key ? fn(type, props, key) : fn(type, props);
   }
 }
@@ -39653,23 +39662,23 @@ var import_react11 = __toESM(require_react(), 1);
 
 // source/gui/client/components/IconComment.tsx
 var import_jsx_runtime22 = __toESM(require_jsx_runtime(), 1);
-var IconComment = ({ size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+var IconComment = ({ size = 14 }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
   "svg",
   {
     width: size,
     height: size,
-    viewBox: "0 0 16 16",
+    viewBox: "0 0 24 24",
     fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
     "aria-hidden": "true",
     children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       "path",
       {
-        d: "M3.9 2.6h5.2a2.4 2.4 0 0 1 2.4 2.4v2.5a2.4 2.4 0 0 1-2.4 2.4H6.6l-1.8 2.1.2-2.1H3.9a2.4 2.4 0 0 1-2.4-2.4V5a2.4 2.4 0 0 1 2.4-2.4Z",
         fill: "currentColor",
-        stroke: "currentColor",
-        strokeWidth: "1.55",
-        strokeLinecap: "round",
-        strokeLinejoin: "round"
+        d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"
       }
     )
   }
@@ -39864,7 +39873,7 @@ var TicketCard = ({
                         color: isSelected ? GUI_THEME.accent : GUI_THEME.secondary,
                         background: isSelected ? "rgba(118,228,255,0.10)" : "rgba(255,255,255,0.035)",
                         border: `1px solid ${isSelected ? "rgba(118,228,255,0.28)" : GUI_THEME.line}`,
-                        borderRadius: 999,
+                        borderRadius: 6,
                         padding: "3px 7px",
                         fontSize: 11,
                         fontWeight: 600,
@@ -40681,9 +40690,32 @@ var Checkbox = ({
   );
 };
 
-// source/gui/client/components/IconChevronDown.tsx
+// source/gui/client/components/IconBars.tsx
 var import_jsx_runtime28 = __toESM(require_jsx_runtime(), 1);
-var IconChevronDown = ({ size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+var IconBars = ({ size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2.2",
+    strokeLinecap: "round",
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("line", { x1: "3", y1: "8.5", x2: "3", y2: "15.5" }),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("line", { x1: "7.5", y1: "4.5", x2: "7.5", y2: "19.5" }),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("line", { x1: "12", y1: "7", x2: "12", y2: "17" }),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("line", { x1: "16.5", y1: "3", x2: "16.5", y2: "21" }),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("line", { x1: "21", y1: "9.5", x2: "21", y2: "14.5" })
+    ]
+  }
+);
+
+// source/gui/client/components/IconChevronDown.tsx
+var import_jsx_runtime29 = __toESM(require_jsx_runtime(), 1);
+var IconChevronDown = ({ size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
   "svg",
   {
     width: size,
@@ -40695,13 +40727,13 @@ var IconChevronDown = ({ size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime2
     strokeLinecap: "round",
     strokeLinejoin: "round",
     "aria-hidden": "true",
-    children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("polyline", { points: "6 9 12 15 18 9" })
+    children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("polyline", { points: "6 9 12 15 18 9" })
   }
 );
 
 // source/gui/client/components/IconChevronRight.tsx
-var import_jsx_runtime29 = __toESM(require_jsx_runtime(), 1);
-var IconChevronRight = ({ size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+var import_jsx_runtime30 = __toESM(require_jsx_runtime(), 1);
+var IconChevronRight = ({ size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
   "svg",
   {
     width: size,
@@ -40713,12 +40745,33 @@ var IconChevronRight = ({ size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime
     strokeLinecap: "round",
     strokeLinejoin: "round",
     "aria-hidden": "true",
-    children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("polyline", { points: "9 18 15 12 9 6" })
+    children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("polyline", { points: "9 18 15 12 9 6" })
+  }
+);
+
+// source/gui/client/components/IconScatter.tsx
+var import_jsx_runtime31 = __toESM(require_jsx_runtime(), 1);
+var IconScatter = ({ size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    stroke: "none",
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("circle", { cx: "4.5", cy: "8", r: "2.2" }),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("circle", { cx: "9.5", cy: "17", r: "2.2" }),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("circle", { cx: "13", cy: "6.5", r: "2.2" }),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("circle", { cx: "17", cy: "14.5", r: "2.2" }),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("circle", { cx: "20.5", cy: "8.5", r: "2.2" })
+    ]
   }
 );
 
 // source/gui/client/components/ScrubberParts.tsx
-var import_jsx_runtime30 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime32 = __toESM(require_jsx_runtime(), 1);
 var toggleButtonStyle = (active) => ({
   background: "transparent",
   border: `1px solid ${active ? GUI_THEME.accent : GUI_THEME.dim}`,
@@ -40728,6 +40781,13 @@ var toggleButtonStyle = (active) => ({
   padding: "2px 8px",
   cursor: "pointer"
 });
+var iconToggleButtonStyle = (active) => ({
+  ...toggleButtonStyle(active),
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  padding: "3px 7px"
+});
 var CATEGORY_LABELS = {
   tickets: "Tickets",
   comments: "Comments",
@@ -40789,7 +40849,11 @@ var popoverStyle = {
   // Sized for the common case up front, so opening a kind with a list does
   // not visibly widen the panel under the pointer.
   minWidth: 200,
-  background: GUI_THEME.panel2,
+  // Slightly sheer over a blur, so the chart it filters stays legible beneath
+  // it rather than being covered outright.
+  background: "rgba(21, 26, 36, 0.88)",
+  backdropFilter: "blur(12px)",
+  WebkitBackdropFilter: "blur(12px)",
   border: `1px solid ${GUI_THEME.line}`,
   borderRadius: 8,
   boxShadow: "0 8px 24px rgba(0, 0, 0, 0.45)",
@@ -40833,7 +40897,7 @@ var Radio = ({
   color: color2,
   disabled,
   onSelect
-}) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
   "button",
   {
     type: "button",
@@ -40855,7 +40919,7 @@ var Radio = ({
       opacity: disabled ? 0.4 : 1
     },
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         "span",
         {
           style: {
@@ -40868,7 +40932,7 @@ var Radio = ({
             justifyContent: "center",
             flexShrink: 0
           },
-          children: selected && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          children: selected && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
             "span",
             {
               style: {
@@ -40905,14 +40969,14 @@ var BoardSeriesGroup = ({
   const label = sole ? `${VIEW_LABELS[view]}: ${sole.name}` : partial ? `${VIEW_LABELS[view]} (multi)` : VIEW_LABELS[view];
   const color2 = sole?.color ?? (partial ? GUI_THEME.dim2 : boardViewColor(view));
   const ref = useDismissOnOutsideClick(expanded, onToggleExpanded);
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
     "div",
     {
       ref,
       style: { position: "relative", display: "flex", flexDirection: "column" },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
             Checkbox,
             {
               label: null,
@@ -40922,7 +40986,7 @@ var BoardSeriesGroup = ({
               onChange: onChangeShowIssues
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
             "button",
             {
               type: "button",
@@ -40933,7 +40997,7 @@ var BoardSeriesGroup = ({
               "aria-expanded": expanded,
               style: selectTriggerStyle(color2, !showIssues),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                   "span",
                   {
                     style: {
@@ -40944,22 +41008,22 @@ var BoardSeriesGroup = ({
                     children: label
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { style: { display: "inline-flex", flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(IconChevronDown, { size: 12 }) })
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { style: { display: "inline-flex", flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(IconChevronDown, { size: 12 }) })
               ]
             }
           )
         ] }),
-        expanded && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { role: "radiogroup", style: popoverStyle, children: BOARD_VIEWS.map((option) => {
+        expanded && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { role: "radiogroup", style: popoverStyle, children: BOARD_VIEWS.map((option) => {
           const selected = view === option;
           const hasList = identityAxisFor(option) !== null;
           const open = selected && identitiesExpanded;
-          return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
             "div",
             {
               style: { display: "flex", flexDirection: "column", gap: 7 },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 3 }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 3 }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                     Radio,
                     {
                       label: VIEW_LABELS[option],
@@ -40969,7 +41033,7 @@ var BoardSeriesGroup = ({
                       onSelect: () => onChangeView(option)
                     }
                   ),
-                  hasList && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                  hasList && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                     "button",
                     {
                       type: "button",
@@ -40981,11 +41045,11 @@ var BoardSeriesGroup = ({
                       title: open ? "Hide the list" : "Pick which to show",
                       "aria-expanded": open,
                       style: disclosureStyle,
-                      children: open ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(IconChevronDown, { size: 12 }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(IconChevronRight, { size: 12 })
+                      children: open ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(IconChevronDown, { size: 12 }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(IconChevronRight, { size: 12 })
                     }
                   )
                 ] }),
-                open && identities.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                open && identities.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                   "div",
                   {
                     style: {
@@ -40995,7 +41059,7 @@ var BoardSeriesGroup = ({
                       maxHeight: 132,
                       overflowY: "auto"
                     },
-                    children: identities.map((identity) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+                    children: identities.map((identity) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
                       "div",
                       {
                         style: {
@@ -41005,7 +41069,7 @@ var BoardSeriesGroup = ({
                           gap: 10
                         },
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                             Checkbox,
                             {
                               label: identity.name,
@@ -41015,7 +41079,7 @@ var BoardSeriesGroup = ({
                               onChange: (next) => onToggleIdentity(identity.id, next)
                             }
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                             "button",
                             {
                               type: "button",
@@ -41066,7 +41130,7 @@ var ScrubberControls = ({
   identitiesExpanded,
   categoriesFiltered,
   isScrubbing,
-  nowLabel,
+  onReturnToLive,
   onChangeScope,
   onChangeOffset,
   onChangeLayoutMode,
@@ -41077,160 +41141,155 @@ var ScrubberControls = ({
   onToggleIdentity,
   onOnlyIdentity,
   onToggleCategoriesExpanded,
-  onSetIdentitiesExpanded,
-  onReturnToLive
-}) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
-    scope !== "all" && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 2 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-        "button",
-        {
-          title: "Earlier",
-          onClick: () => onChangeOffset(offset + 1),
-          style: navButtonStyle,
-          children: "\u25C0"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-        "span",
-        {
-          style: {
-            fontSize: 10,
-            color: GUI_THEME.dim,
-            whiteSpace: "nowrap",
-            overflow: "hidden",
-            // Fixed, not min, so the changing label never shifts the
-            // buttons around it.
-            width: 88,
-            flexShrink: 0,
-            textAlign: "center"
-          },
-          children: formatPeriodLabel(scope, offset, periodRange)
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-        "button",
-        {
-          title: "Later",
-          disabled: offset === 0,
-          onClick: () => onChangeOffset(Math.max(0, offset - 1)),
-          style: {
-            ...navButtonStyle,
-            opacity: offset === 0 ? 0.35 : 1,
-            cursor: offset === 0 ? "default" : "pointer"
+  onSetIdentitiesExpanded
+}) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+  "div",
+  {
+    style: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "flex-end",
+      gap: 12
+    },
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+        scope !== "all" && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 2 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            "button",
+            {
+              title: "Earlier",
+              onClick: () => onChangeOffset(offset + 1),
+              style: navButtonStyle,
+              children: "\u25C0"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            "span",
+            {
+              style: {
+                fontSize: 10,
+                color: GUI_THEME.dim,
+                whiteSpace: "nowrap",
+                overflow: "hidden",
+                // Fixed, not min, so the changing label never shifts the
+                // buttons around it.
+                width: 88,
+                flexShrink: 0,
+                textAlign: "center"
+              },
+              children: formatPeriodLabel(scope, offset, periodRange)
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            "button",
+            {
+              title: "Later",
+              disabled: offset === 0,
+              onClick: () => onChangeOffset(Math.max(0, offset - 1)),
+              style: {
+                ...navButtonStyle,
+                opacity: offset === 0 ? 0.35 : 1,
+                cursor: offset === 0 ? "default" : "pointer"
+              },
+              children: "\u25B6"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { style: { display: "flex", gap: 2 }, children: SCOPES.map((option) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          "button",
+          {
+            onClick: () => onChangeScope(option),
+            style: toggleButtonStyle(scope === option),
+            children: scopeButtonLabel(option)
           },
-          children: "\u25B6"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { style: { display: "flex", gap: 2 }, children: SCOPES.map((option) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-      "button",
-      {
-        onClick: () => onChangeScope(option),
-        style: toggleButtonStyle(scope === option),
-        children: scopeButtonLabel(option)
-      },
-      option
-    )) })
-  ] }),
-  /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { style: { display: "flex", gap: 2 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-      "button",
-      {
-        title: "How much happened, per equal-width period \u2014 no empty gaps for quiet stretches",
-        onClick: () => onChangeLayoutMode("even"),
-        style: toggleButtonStyle(layoutMode === "even"),
-        children: "Volume"
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-      "button",
-      {
-        title: "Individual events by exact moment \u2014 x is elapsed time, y is time of day",
-        onClick: () => onChangeLayoutMode("real"),
-        style: toggleButtonStyle(layoutMode === "real"),
-        children: "Events"
-      }
-    )
-  ] }),
-  /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { style: { display: "flex", gap: 12, alignItems: "center" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-      Checkbox,
-      {
-        label: "Code",
-        checked: showCommits,
-        activeColor: GUI_THEME.green,
-        onChange: onChangeShowCommits
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-      BoardSeriesGroup,
-      {
-        showIssues,
-        view: boardView,
-        identities,
-        hiddenIds: hiddenIdentityIds,
-        expanded: categoriesExpanded,
-        identitiesExpanded,
-        filtered: categoriesFiltered,
-        onChangeShowIssues,
-        onChangeView: onChangeBoardView,
-        onToggleIdentity,
-        onOnlyIdentity,
-        onToggleExpanded: onToggleCategoriesExpanded,
-        onSetIdentitiesExpanded
-      }
-    )
-  ] }),
-  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-    "div",
-    {
-      style: {
-        display: "flex",
-        justifyContent: "flex-end",
-        alignItems: "center",
-        // Fixed, not min, so swapping between "Now" and "Return to live"
-        // never resizes the controls row.
-        width: 100,
-        flexShrink: 0
-      },
-      children: isScrubbing ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          option
+        )) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { style: { display: "flex", gap: 2 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          "button",
+          {
+            title: "Volume \u2014 how much happened, per equal-width period, with no empty gaps for quiet stretches",
+            "aria-label": "Volume",
+            "aria-pressed": layoutMode === "even",
+            onClick: () => onChangeLayoutMode("even"),
+            style: iconToggleButtonStyle(layoutMode === "even"),
+            children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(IconBars, { size: 13 })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          "button",
+          {
+            title: "Events \u2014 individual events by exact moment, x is elapsed time and y is time of day",
+            "aria-label": "Events",
+            "aria-pressed": layoutMode === "real",
+            onClick: () => onChangeLayoutMode("real"),
+            style: iconToggleButtonStyle(layoutMode === "real"),
+            children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(IconScatter, { size: 13 })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { style: { display: "flex", gap: 12, alignItems: "center" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          Checkbox,
+          {
+            label: "Code",
+            checked: showCommits,
+            activeColor: GUI_THEME.green,
+            onChange: onChangeShowCommits
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          BoardSeriesGroup,
+          {
+            showIssues,
+            view: boardView,
+            identities,
+            hiddenIds: hiddenIdentityIds,
+            expanded: categoriesExpanded,
+            identitiesExpanded,
+            filtered: categoriesFiltered,
+            onChangeShowIssues,
+            onChangeView: onChangeBoardView,
+            onToggleIdentity,
+            onOnlyIdentity,
+            onToggleExpanded: onToggleCategoriesExpanded,
+            onSetIdentitiesExpanded
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         "button",
         {
           onClick: onReturnToLive,
+          disabled: !isScrubbing,
+          title: isScrubbing ? "Leave history and follow the board again" : void 0,
           style: {
             background: "transparent",
-            border: `1px solid ${GUI_THEME.accent}`,
-            color: GUI_THEME.accent,
+            border: `1px solid ${isScrubbing ? GUI_THEME.accent : GUI_THEME.transparent}`,
+            color: isScrubbing ? GUI_THEME.accent : GUI_THEME.dim,
             borderRadius: 6,
-            fontSize: 11,
+            fontFamily: "inherit",
+            width: 60,
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: isScrubbing ? "center" : "flex-end",
+            fontSize: 10,
             padding: "2px 8px",
-            cursor: "pointer",
-            whiteSpace: "nowrap"
-          },
-          children: "Return to live"
-        }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-        "span",
-        {
-          style: {
-            fontSize: 11,
-            color: GUI_THEME.dim,
-            overflow: "hidden",
-            textAlign: "right",
-            whiteSpace: "nowrap"
+            cursor: isScrubbing ? "pointer" : "default",
+            whiteSpace: "nowrap",
+            flexShrink: 0
           },
-          children: nowLabel
+          children: isScrubbing ? "Resume" : "Now"
         }
       )
-    }
-  )
-] });
+    ]
+  }
+);
 var ScrubberHeader = ({
   collapsed,
-  onToggleCollapsed,
-  scrubbingAsOf
-}) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+  onToggleCollapsed
+}) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
   "div",
   {
     style: {
@@ -41240,34 +41299,26 @@ var ScrubberHeader = ({
       fontSize: 11,
       whiteSpace: "nowrap"
     },
-    children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
-        "button",
-        {
-          onClick: onToggleCollapsed,
-          title: collapsed ? "Show time travel" : "Hide time travel",
-          style: {
-            background: "transparent",
-            border: "none",
-            color: GUI_THEME.dim,
-            fontSize: 11,
-            padding: 0,
-            cursor: "pointer",
-            display: "flex",
-            alignItems: "center",
-            gap: 4
-          },
-          children: [
-            "Time travel",
-            collapsed ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(IconChevronRight, { size: 12 }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(IconChevronDown, { size: 12 })
-          ]
-        }
-      ),
-      scrubbingAsOf !== null && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { style: { color: GUI_THEME.accent, fontWeight: 700 }, children: "Read-only" }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { style: { color: GUI_THEME.primary }, children: scrubbingAsOf })
-      ] })
-    ]
+    children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      "button",
+      {
+        onClick: onToggleCollapsed,
+        title: collapsed ? "Show time travel" : "Hide time travel",
+        "aria-label": collapsed ? "Show time travel" : "Hide time travel",
+        "aria-expanded": !collapsed,
+        style: {
+          background: GUI_THEME.panel2,
+          border: `1px solid ${GUI_THEME.line}`,
+          borderRadius: 6,
+          color: GUI_THEME.secondary,
+          padding: "3px 7px",
+          cursor: "pointer",
+          display: "inline-flex",
+          alignItems: "center"
+        },
+        children: collapsed ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(IconChevronRight, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(IconChevronDown, { size: 14 })
+      }
+    )
   }
 );
 var SegmentHighlight = ({
@@ -41275,7 +41326,7 @@ var SegmentHighlight = ({
   fractionForTime
 }) => {
   const left = fractionForTime(segment.start);
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     "div",
     {
       style: {
@@ -41307,7 +41358,7 @@ var SegmentHighlight = ({
 var TrackBaseline = ({
   color: color2,
   anchor
-}) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
   "div",
   {
     style: {
@@ -41323,11 +41374,11 @@ var TrackBaseline = ({
     }
   }
 );
-var HourAxisLabels = () => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_jsx_runtime30.Fragment, { children: [
+var HourAxisLabels = () => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_jsx_runtime32.Fragment, { children: [
   ["00:00", { top: EVENTS_MODE_VERTICAL_PADDING }],
   ["12:00", { top: "50%", transform: "translateY(-50%)" }],
   ["24:00", { bottom: EVENTS_MODE_VERTICAL_PADDING }]
-].map(([label, position3]) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+].map(([label, position3]) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
   "span",
   {
     style: {
@@ -41345,7 +41396,7 @@ var HourAxisLabels = () => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_
 var SeriesLayer = ({
   animate,
   children
-}) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
   "div",
   {
     style: {
@@ -41379,8 +41430,8 @@ var VolumeBars = ({
     const timeout = setTimeout(() => setFresh(false), BAR_ENTRANCE_TOTAL_MS);
     return () => clearTimeout(timeout);
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
-    highlightedIndex !== null && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+    highlightedIndex !== null && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       "div",
       {
         style: {
@@ -41396,7 +41447,7 @@ var VolumeBars = ({
         }
       }
     ),
-    bars.map(({ index: index2, intensity }) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    bars.map(({ index: index2, intensity }) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       "div",
       {
         style: {
@@ -41423,8 +41474,8 @@ var ScrubberNeedle = ({ fraction }) => {
     onMouseEnter: () => setHovered(true),
     onMouseLeave: () => setHovered(false)
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       "div",
       {
         ...hover,
@@ -41444,7 +41495,7 @@ var ScrubberNeedle = ({ fraction }) => {
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       "div",
       {
         ...hover,
@@ -41474,7 +41525,7 @@ var ScrubberHoverHint = ({
   fraction,
   trackWidthPx,
   empty: empty3 = false
-}) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
   "div",
   {
     style: {
@@ -41506,8 +41557,8 @@ var ScrubberHoverHint = ({
       zIndex: 5
     },
     children: [
-      segmentLabel && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { style: { fontSize: 10, color: GUI_THEME.dim }, children: segmentLabel }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      segmentLabel && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { style: { fontSize: 10, color: GUI_THEME.dim }, children: segmentLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         "div",
         {
           style: {
@@ -41520,7 +41571,7 @@ var ScrubberHoverHint = ({
           children: label
         }
       ),
-      rows.map((row, index2) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      rows.map((row, index2) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         "div",
         {
           style: {
@@ -41675,7 +41726,7 @@ var ScatterCanvas = ({
       rect.width
     );
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     "canvas",
     {
       ref: canvasRef,
@@ -41704,16 +41755,15 @@ var ScatterCanvas = ({
 };
 
 // source/gui/client/components/ScrubberLayout.tsx
-var import_jsx_runtime31 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime33 = __toESM(require_jsx_runtime(), 1);
 var ScrubberLayout = ({
   collapsed,
   onToggleCollapsed,
-  scrubbingAsOf,
   controls,
   chart
 }) => {
   const { axis, layoutMode, animate, windowKey, on } = chart;
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
     Panel,
     {
       as: "div",
@@ -41730,8 +41780,8 @@ var ScrubberLayout = ({
         overflow: "visible"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("style", { children: SCRUBBER_KEYFRAMES }),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("style", { children: SCRUBBER_KEYFRAMES }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
           "div",
           {
             style: {
@@ -41740,27 +41790,26 @@ var ScrubberLayout = ({
               gap: collapsed ? 0 : 8
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
                 "div",
                 {
                   style: {
                     display: "flex",
                     alignItems: "center",
                     justifyContent: "space-between",
-                    // Fixed whether or not the banner renders, so the track below
-                    // never shifts vertically.
+                    // Holds the row's height when collapsing takes the controls out
+                    // of it.
                     minHeight: 22
                   },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                       ScrubberHeader,
                       {
                         collapsed,
-                        onToggleCollapsed,
-                        scrubbingAsOf
+                        onToggleCollapsed
                       }
                     ),
-                    !collapsed && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ScrubberControls, { ...controls })
+                    !collapsed && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ScrubberControls, { ...controls })
                   ]
                 }
               ),
@@ -41768,7 +41817,7 @@ var ScrubberLayout = ({
               // spanning them and the gap between. Pointer handlers belong here
               // rather than on either chart, so a drag or hover anywhere across
               // the pair — the gap included — counts as one timeline.
-              /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
                 "div",
                 {
                   onPointerDown: on.onPointerDown,
@@ -41785,14 +41834,14 @@ var ScrubberLayout = ({
                     cursor: "pointer"
                   },
                   children: [
-                    chart.hoveredSegment && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                    chart.hoveredSegment && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                       SegmentHighlight,
                       {
                         segment: chart.hoveredSegment,
                         fractionForTime: axis.fractionForTime
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
                       "div",
                       {
                         ref: chart.trackRef,
@@ -41807,15 +41856,15 @@ var ScrubberLayout = ({
                           alignItems: "center"
                         },
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                             TrackBaseline,
                             {
                               color: chart.issueSeriesColor,
                               anchor: layoutMode === "even" ? "bottom" : "centre"
                             }
                           ),
-                          layoutMode === "real" && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(HourAxisLabels, {}),
-                          chart.showIssues && layoutMode === "even" && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SeriesLayer, { animate, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                          layoutMode === "real" && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(HourAxisLabels, {}),
+                          chart.showIssues && layoutMode === "even" && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SeriesLayer, { animate, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                             VolumeBars,
                             {
                               bars: chart.issueBars,
@@ -41828,7 +41877,7 @@ var ScrubberLayout = ({
                               animate
                             }
                           ) }, `issues-${windowKey}`),
-                          layoutMode === "real" && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                          layoutMode === "real" && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                             ScatterCanvas,
                             {
                               layers: chart.scatterLayers,
@@ -41841,7 +41890,7 @@ var ScrubberLayout = ({
                         ]
                       }
                     ),
-                    chart.showCommits && layoutMode === "even" && chart.commits.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+                    chart.showCommits && layoutMode === "even" && chart.commits.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
                       "div",
                       {
                         onMouseEnter: on.onCommitTrackMouseEnter,
@@ -41854,8 +41903,8 @@ var ScrubberLayout = ({
                           animation: animate ? FADE_IN_ANIMATION : void 0
                         },
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TrackBaseline, { color: GUI_THEME.green, anchor: "top" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TrackBaseline, { color: GUI_THEME.green, anchor: "top" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                             VolumeBars,
                             {
                               bars: chart.commitBars,
@@ -41872,8 +41921,8 @@ var ScrubberLayout = ({
                       },
                       `commits-${windowKey}`
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ScrubberNeedle, { fraction: chart.thumbFraction }),
-                    chart.boardHint && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ScrubberNeedle, { fraction: chart.thumbFraction }),
+                    chart.boardHint && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                       ScrubberHoverHint,
                       {
                         ...chart.boardHint,
@@ -41882,7 +41931,7 @@ var ScrubberLayout = ({
                         trackWidthPx: chart.trackWidthPx
                       }
                     ),
-                    chart.commitHint && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                    chart.commitHint && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                       ScrubberHoverHint,
                       {
                         ...chart.commitHint,
@@ -41903,7 +41952,7 @@ var ScrubberLayout = ({
 };
 
 // source/gui/client/components/TimeScrubber.tsx
-var import_jsx_runtime32 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime34 = __toESM(require_jsx_runtime(), 1);
 var SCRUB_THROTTLE_MS = 120;
 var boardEventRow = (count) => `${count} board event${count === 1 ? "" : "s"}`;
 var COLLAPSED_STORAGE_KEY = "epiq.timeScrubber.collapsed";
@@ -42048,6 +42097,12 @@ var TimeScrubber = ({
     () => JSON.stringify([boardView, [...hiddenIdentityIds].sort()]),
     [boardView, hiddenIdentityIds]
   );
+  const entrance = (0, import_react15.useRef)(0);
+  const armed = (0, import_react15.useRef)(true);
+  const seenHistoryId = (0, import_react15.useRef)(historyId);
+  const armEntrance = () => {
+    armed.current = true;
+  };
   const shownRef = (0, import_react15.useRef)({ timeline, commits });
   const heldKey = (0, import_react15.useRef)(null);
   const heldHistoryId = (0, import_react15.useRef)(null);
@@ -42061,6 +42116,13 @@ var TimeScrubber = ({
     shownRef.current = { timeline, commits };
     awaiting.current = false;
   }
+  if (seenHistoryId.current !== historyId) {
+    seenHistoryId.current = historyId;
+    if (armed.current) {
+      armed.current = false;
+      entrance.current += 1;
+    }
+  }
   const shown = shownRef.current;
   const axis = (0, import_react15.useMemo)(() => buildAxis(shown.timeline, shown.commits), [shown]);
   const categoriesFiltered = (timeline?.events.length ?? 0) > 0;
@@ -42132,26 +42194,13 @@ var TimeScrubber = ({
     index: index2,
     intensity: stats.count / maxCommitCount
   }));
-  const [entrance, setEntrance] = (0, import_react15.useState)(0);
-  const armed = (0, import_react15.useRef)(true);
-  const seenHistoryId = (0, import_react15.useRef)(historyId);
-  const armEntrance = () => {
-    armed.current = true;
-  };
   const armedBoardId = (0, import_react15.useRef)(boardId);
   (0, import_react15.useEffect)(() => {
     if (boardId === null || boardId === armedBoardId.current) return;
     armedBoardId.current = boardId;
     armEntrance();
   }, [boardId]);
-  (0, import_react15.useEffect)(() => {
-    if (seenHistoryId.current === historyId) return;
-    seenHistoryId.current = historyId;
-    if (!armed.current) return;
-    armed.current = false;
-    setEntrance((generation) => generation + 1);
-  }, [historyId]);
-  const windowKey = `${layoutMode}-${entrance}-${filterKey}`;
+  const windowKey = `${layoutMode}-${entrance.current}-${filterKey}`;
   const scatterLayers = (0, import_react15.useMemo)(
     () => [
       ...commitScatter.mounted ? [
@@ -42267,12 +42316,11 @@ var TimeScrubber = ({
     hoveredEvent?.t ?? hoveredCommit?.commit.time ?? (pointerFraction !== null ? axis.fractionToTime(pointerFraction) : void 0)
   )) ?? null;
   const segmentUnit = chooseSegmentUnit(axis.span);
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     ScrubberLayout,
     {
       collapsed,
       onToggleCollapsed: () => setCollapsed(!collapsed),
-      scrubbingAsOf: timeTravel.mode === "scrub" ? timeTravel.asOfTime ? formatDateTime(new Date(timeTravel.asOfTime)) : "" : null,
       controls: {
         scope,
         offset,
@@ -42281,8 +42329,6 @@ var TimeScrubber = ({
         showIssues,
         showCommits,
         allBoards,
-        isScrubbing: timeTravel.mode === "scrub",
-        nowLabel: scope === "all" || offset === 0 ? "Now" : formatDateTime(new Date(axis.latest)),
         onChangeScope: changeScope,
         onChangeOffset: changeOffset,
         onChangeLayoutMode: setLayoutMode,
@@ -42295,12 +42341,13 @@ var TimeScrubber = ({
         categoriesExpanded,
         identitiesExpanded,
         categoriesFiltered,
+        isScrubbing: timeTravel.mode === "scrub",
+        onReturnToLive,
         onChangeBoardView: changeBoardView,
         onToggleIdentity: toggleIdentity,
         onOnlyIdentity: isolateIdentity,
         onToggleCategoriesExpanded: () => setCategoriesExpanded(!categoriesExpanded),
-        onSetIdentitiesExpanded: setIdentitiesExpanded,
-        onReturnToLive
+        onSetIdentitiesExpanded: setIdentitiesExpanded
       },
       chart: {
         trackRef,
@@ -42646,9 +42693,9 @@ var blobToBase64 = (blob) => new Promise((resolve, reject) => {
 });
 
 // source/gui/client/App.tsx
-var import_jsx_runtime33 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime35 = __toESM(require_jsx_runtime(), 1);
 var EMPTY_COMMENTS = {};
-var DropIndicator = () => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+var DropIndicator = () => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
   "div",
   {
     style: {
@@ -43192,7 +43239,7 @@ var App = () => {
     });
     send("issue:comment:delete", { commentId });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
     "div",
     {
       style: {
@@ -43204,30 +43251,38 @@ var App = () => {
         flexDirection: "column"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(GlobalScrollbarStyles, {}),
-        commitInspectError && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(GlobalScrollbarStyles, {}),
+        commitInspectError && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
           ErrorToast,
           {
             message: `Couldn't open commit diff: ${commitInspectError}`,
             onDismiss: () => setCommitInspectError(null)
           }
         ),
-        removeError && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        removeError && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
           ErrorToast,
           {
             message: removeError,
             onDismiss: () => setRemoveError(null)
           }
         ),
-        actionError && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        actionError && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
           ErrorToast,
           {
             message: actionError,
             onDismiss: () => setActionError(null)
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Header, { state, connected, syncStatus }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+          Header,
+          {
+            state,
+            connected,
+            scrubbing: state?.timeTravel?.mode === "scrub",
+            syncStatus
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
           TimeScrubber,
           {
             timeline: history.timeline,
@@ -43243,7 +43298,7 @@ var App = () => {
             onBoardFilterChange: setBoardFilter
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
           "div",
           {
             style: {
@@ -43252,7 +43307,7 @@ var App = () => {
               overflow: "hidden"
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
                 "main",
                 {
                   onClick: clearPicked,
@@ -43267,7 +43322,7 @@ var App = () => {
                     overflow: "hidden"
                   },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                       "div",
                       {
                         style: {
@@ -43276,7 +43331,7 @@ var App = () => {
                           alignItems: "center",
                           gap: 10
                         },
-                        children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                        children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                           Dropdown,
                           {
                             testId: "board-switcher",
@@ -43295,7 +43350,7 @@ var App = () => {
                         )
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
                       "div",
                       {
                         style: {
@@ -43307,7 +43362,7 @@ var App = () => {
                           overflowY: "hidden"
                         },
                         children: [
-                          visibleSwimlanes.map((swimlane) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                          visibleSwimlanes.map((swimlane) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                             SwimlaneColumn,
                             {
                               swimlane,
@@ -43335,14 +43390,14 @@ var App = () => {
                             },
                             swimlane.id
                           )),
-                          !(selectedIssue && state?.user) && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { style: { width: ASIDE_WIDTH, flexShrink: 0 } })
+                          !(selectedIssue && state?.user) && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { style: { width: ASIDE_WIDTH, flexShrink: 0 } })
                         ]
                       }
                     )
                   ]
                 }
               ),
-              pickedIssues.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+              pickedIssues.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                 BulkDetails,
                 {
                   issues: pickedIssues,
@@ -43370,7 +43425,7 @@ var App = () => {
                   onClear: clearPicked
                 }
               ),
-              pickedIssues.length <= 1 && selectedIssue && state?.user && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+              pickedIssues.length <= 1 && selectedIssue && state?.user && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                 IssueDetails,
                 {
                   whoAmI: state.user,
@@ -43403,7 +43458,7 @@ var App = () => {
             ]
           }
         ),
-        createIssueModal && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        createIssueModal && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
           CreateIssueModal,
           {
             title: createIssueModal.title,
@@ -43418,12 +43473,12 @@ var App = () => {
 };
 
 // source/gui/client/main.tsx
-var import_jsx_runtime34 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime36 = __toESM(require_jsx_runtime(), 1);
 (0, import_client.createRoot)(document.getElementById("root")).render(
-  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(BrowserRouter, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Routes, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Route, { path: "/", element: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(App, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Route, { path: "/board/:boardId/*", element: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(App, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Route, { path: "*", element: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Navigate, { to: "/", replace: true }) })
+  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(BrowserRouter, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Routes, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Route, { path: "/", element: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(App, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Route, { path: "/board/:boardId/*", element: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(App, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Route, { path: "*", element: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Navigate, { to: "/", replace: true }) })
   ] }) })
 );
 /*! Bundled license information: