epiq 1.4.2 → 1.4.4

package/dist/gui/main.js

@@ -24858,7 +24858,14 @@ 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,
+  comments: "#ffd479",
+  tagging: "#c9a5ff",
+  assigning: "#ff9ecd"
 };
 
 // source/gui/client/components/Aside.tsx
@@ -25318,11 +25325,16 @@ var User = ({
 );
 
 // source/version.ts
-var EPIQ_VERSION = "1.4.2";
+var EPIQ_VERSION = "1.4.4";
 
 // 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)(
@@ -25381,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",
                           {
@@ -25397,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",
@@ -27715,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);
   }
 }
@@ -39647,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"
       }
     )
   }
@@ -39858,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,
@@ -39897,7 +39912,15 @@ var TicketCard = ({
                     paddingTop: 2,
                     marginTop: "-4px"
                   },
-                  children: ticket.assignees.map((assignee, idx) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(User, { user: assignee, index: idx, isFocus: isSelected }))
+                  children: ticket.assignees.map((assignee, idx) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                    User,
+                    {
+                      user: assignee,
+                      index: idx,
+                      isFocus: isSelected
+                    },
+                    assignee.id
+                  ))
                 }
               )
             ]
@@ -40203,7 +40226,7 @@ var EVENTS_MODE_TOTAL_HEIGHT = 8 + TRACK_HEIGHT * 2;
 var EVENTS_SCATTER_HEIGHT = TRACK_HEIGHT + 16;
 var EVENTS_MODE_VERTICAL_PADDING = (EVENTS_MODE_TOTAL_HEIGHT - EVENTS_SCATTER_HEIGHT) / 2;
 var HOVER_HINT_WIDTH = 220;
-var SEGMENT_HIGHLIGHT_COLOR = "rgba(122, 158, 214, 0.07)";
+var SEGMENT_HIGHLIGHT_COLOR = "rgba(122, 157, 214, 0.14)";
 var BUCKET_HIGHLIGHT_COLOR = "rgba(255, 255, 255, 0.06)";
 var NEEDLE_COLOR = "rgba(255, 255, 255, 0.62)";
 var MIN_BUCKET_COUNT_FOR_GAP = 300;
@@ -40239,8 +40262,15 @@ var buildAxis = (timeline, commits, now = Date.now()) => {
     fractionToTime: (fraction) => Math.round(earliest + clamp(fraction, 0, 1) * span)
   };
 };
-var bucketIssueCounts = (axis, timeline) => {
+var bucketIssueCounts = (axis, timeline, view = "all", hiddenIds = /* @__PURE__ */ new Set()) => {
   const counts = new Array(axis.bucketCount).fill(0);
+  if (timeline && timeline.events.length > 0) {
+    for (const entry of timeline.events) {
+      if (!isShown(entry, view, hiddenIds)) continue;
+      counts[axis.bucketIndexForTime(entry.t)] += 1;
+    }
+    return counts;
+  }
   for (const sparseBucket of timeline?.buckets ?? []) {
     counts[axis.bucketIndexForTime(sparseBucket.t)] += sparseBucket.count;
   }
@@ -40258,6 +40288,102 @@ var bucketCommitStats = (axis, commits) => {
   }
   return byIndex;
 };
+var EVENT_CATEGORIES = [
+  "tickets",
+  "comments",
+  "tagging",
+  "assigning"
+];
+var BOARD_VIEWS = ["all", ...EVENT_CATEGORIES];
+var isBoardView = (value) => BOARD_VIEWS.includes(value);
+var boardViewColor = (view) => view === "all" ? GUI_THEME.accent : EVENT_CATEGORY_COLORS[view];
+var identityAxisFor = (view) => view === "comments" ? "actor" : view === "tagging" ? "tag" : view === "assigning" ? "assignee" : null;
+var CATEGORY_BY_ACTION = {
+  "add.issue.comment": "comments",
+  "edit.issue.comment": "comments",
+  "delete.issue.comment": "comments",
+  "add.issue.tag": "tagging",
+  "remove.issue.tag": "tagging",
+  "create.tag": "tagging",
+  "add.issue.assignee": "assigning",
+  "remove.issue.assignee": "assigning",
+  "create.contributor": "assigning",
+  "tombstone.contributor": "assigning",
+  "restore.contributor": "assigning",
+  "link.contributor.user": "assigning"
+};
+var categoryOf = (action) => CATEGORY_BY_ACTION[action] ?? "tickets";
+var identityOf = (entry, view) => {
+  const axis = identityAxisFor(view);
+  return axis === null ? null : entry[axis];
+};
+var listIdentities = (timeline, view) => {
+  if (!timeline || identityAxisFor(view) === null) return [];
+  const byId = /* @__PURE__ */ new Map();
+  for (const entry of timeline.events) {
+    if (categoryOf(entry.action) !== view) continue;
+    const identity = identityOf(entry, view);
+    if (identity && !byId.has(identity.id)) byId.set(identity.id, identity);
+  }
+  return [...byId.values()];
+};
+var soleVisibleIdentity = (identities, hiddenIds) => {
+  const visible = identities.filter((identity) => !hiddenIds.has(identity.id));
+  return visible.length === 1 ? visible[0] : null;
+};
+var dotDetail = (dot) => {
+  const base = dot.label ?? `${dot.count ?? 0} board event${dot.count === 1 ? "" : "s"}`;
+  return dot.identity && !base.includes(dot.identity.name) ? `${base} \u2014 ${dot.identity.name}` : base;
+};
+var EVENT_DOT_SIZE = 4;
+var EVENT_DOT_OPACITY = 0.55;
+var isShown = (entry, view, hiddenIds) => {
+  if (view !== "all" && categoryOf(entry.action) !== view) return false;
+  const identity = identityOf(entry, view);
+  return identity === null || !hiddenIds.has(identity.id);
+};
+var buildEventDots = (timeline, view = "all", hiddenIds = /* @__PURE__ */ new Set()) => {
+  if (!timeline) return [];
+  if (timeline.events.length > 0) {
+    return timeline.events.flatMap((entry, index2) => {
+      if (!isShown(entry, view, hiddenIds)) return [];
+      const category = categoryOf(entry.action);
+      const identity = identityOf(entry, view);
+      return [
+        {
+          // Two events can share a millisecond, so time alone is not a key.
+          key: `${entry.t}-${index2}`,
+          t: entry.t,
+          count: null,
+          label: entry.label,
+          category,
+          color: view === "all" ? EVENT_CATEGORY_COLORS[category] : identity?.color ?? GUI_THEME.accent,
+          identity,
+          size: EVENT_DOT_SIZE,
+          opacity: EVENT_DOT_OPACITY
+        }
+      ];
+    });
+  }
+  const maxCount = maxOf(
+    timeline.buckets.map((bucket) => bucket.count),
+    1
+  );
+  return timeline.buckets.map((bucket) => {
+    const intensity = bucket.count / maxCount;
+    return {
+      key: String(bucket.t),
+      t: bucket.t,
+      count: bucket.count,
+      label: null,
+      category: null,
+      color: GUI_THEME.accent,
+      identity: null,
+      size: 3 + intensity * 6,
+      opacity: 0.3 + intensity * 0.5
+    };
+  });
+};
 var populatedRange = (bars) => bars.length > 0 ? [
   bars.reduce((min, bar) => Math.min(min, bar.index), Infinity),
   bars.reduce((max, bar) => Math.max(max, bar.index), -Infinity)
@@ -40266,8 +40392,9 @@ var hourFractionForTime = (time) => {
   const date = new Date(time);
   return (date.getHours() * 60 + date.getMinutes()) / (24 * 60);
 };
-var SEGMENT_UNIT_ORDER = ["day", "week", "month", "year"];
+var SEGMENT_UNIT_ORDER = ["hour", "day", "week", "month", "year"];
 var APPROX_UNIT_MS = {
+  hour: 60 * 60 * 1e3,
   day: 24 * 60 * 60 * 1e3,
   week: 7 * 24 * 60 * 60 * 1e3,
   month: 30.44 * 24 * 60 * 60 * 1e3,
@@ -40293,14 +40420,16 @@ var MONTH_LABELS = [
   "Dec"
 ];
 var advanceByUnit = (date, unit) => {
-  if (unit === "day") date.setDate(date.getDate() + 1);
+  if (unit === "hour") date.setHours(date.getHours() + 1);
+  else if (unit === "day") date.setDate(date.getDate() + 1);
   else if (unit === "week") date.setDate(date.getDate() + 7);
   else if (unit === "month") date.setMonth(date.getMonth() + 1);
   else date.setFullYear(date.getFullYear() + 1);
 };
 var segmentAt = (time, unit) => {
   const start2 = new Date(time);
-  start2.setHours(0, 0, 0, 0);
+  if (unit === "hour") start2.setMinutes(0, 0, 0);
+  else start2.setHours(0, 0, 0, 0);
   if (unit === "week") {
     start2.setDate(start2.getDate() - (start2.getDay() + 6) % 7);
   } else if (unit === "month") {
@@ -40311,7 +40440,10 @@ var segmentAt = (time, unit) => {
   const end = new Date(start2);
   advanceByUnit(end, unit);
   const lastDay = new Date(end.getTime() - 1);
-  const label = unit === "day" ? `${WEEKDAY_LABELS[start2.getDay()]} ${start2.getDate()} ${MONTH_LABELS[start2.getMonth()]}` : unit === "week" ? start2.getMonth() === lastDay.getMonth() ? `${start2.getDate()}\u2013${lastDay.getDate()} ${MONTH_LABELS[start2.getMonth()]}` : `${start2.getDate()} ${MONTH_LABELS[start2.getMonth()]} \u2013 ${lastDay.getDate()} ${MONTH_LABELS[lastDay.getMonth()]}` : unit === "month" ? `${MONTH_LABELS[start2.getMonth()]} ${start2.getFullYear()}` : `${start2.getFullYear()}`;
+  const label = unit === "hour" ? `${WEEKDAY_LABELS[start2.getDay()]} ${String(start2.getHours()).padStart(
+    2,
+    "0"
+  )}:00` : unit === "day" ? `${WEEKDAY_LABELS[start2.getDay()]} ${start2.getDate()} ${MONTH_LABELS[start2.getMonth()]}` : unit === "week" ? start2.getMonth() === lastDay.getMonth() ? `${start2.getDate()}\u2013${lastDay.getDate()} ${MONTH_LABELS[start2.getMonth()]}` : `${start2.getDate()} ${MONTH_LABELS[start2.getMonth()]} \u2013 ${lastDay.getDate()} ${MONTH_LABELS[lastDay.getMonth()]}` : unit === "month" ? `${MONTH_LABELS[start2.getMonth()]} ${start2.getFullYear()}` : `${start2.getFullYear()}`;
   return { start: start2.getTime(), end: end.getTime(), label };
 };
 var formatInterval = (start2, end) => {
@@ -40320,12 +40452,19 @@ var formatInterval = (start2, end) => {
   const endLabel = isSameDay(startDate, endDate) ? formatTimeOfDay(endDate) : formatDateTime(endDate);
   return `${formatDateTime(startDate)} \u2013 ${endLabel}`;
 };
-var SCOPES = ["week", "month", "year", "all"];
+var SCOPES = ["day", "week", "month", "year", "all"];
 var SCOPE_DURATION_MS = {
+  day: 24 * 60 * 60 * 1e3,
   week: 7 * 24 * 60 * 60 * 1e3,
   month: 30 * 24 * 60 * 60 * 1e3,
   year: 365 * 24 * 60 * 60 * 1e3
 };
+var SCOPE_RECENT_LABELS = {
+  day: "Last 24 hours",
+  week: "Last 7 days",
+  month: "Last 30 days",
+  year: "Last 365 days"
+};
 var isScope = (value) => SCOPES.includes(value ?? "");
 var getPeriodRange = (scope, offset) => {
   if (scope === "all") return null;
@@ -40335,9 +40474,7 @@ var getPeriodRange = (scope, offset) => {
 };
 var formatPeriodLabel = (scope, offset, range) => {
   if (scope === "all" || !range) return "All time";
-  if (offset === 0) {
-    return scope === "week" ? "Last 7 days" : scope === "month" ? "Last 30 days" : "Last 365 days";
-  }
+  if (offset === 0) return SCOPE_RECENT_LABELS[scope];
   const start2 = new Date(range.start);
   const end = new Date(range.end);
   return `${start2.getMonth() + 1}/${start2.getDate()} \u2013 ${end.getMonth() + 1}/${end.getDate()}`;
@@ -40354,10 +40491,16 @@ var hashUnitInterval = (key) => {
 var DOT_APPEAR_MS = 260;
 var DOT_APPEAR_SCATTER_MS = 620;
 var dotDelayMs = (key) => Math.round(hashUnitInterval(key) * DOT_APPEAR_SCATTER_MS);
-var dotAppearAnimation = (key) => `epiqScrubberTwinkle ${DOT_APPEAR_MS}ms ease-out ${dotDelayMs(
-  key
-)}ms backwards`;
-var dotExitAnimation = (key) => `epiqScrubberRetract ${DOT_APPEAR_MS}ms ease-in ${DOT_APPEAR_SCATTER_MS - dotDelayMs(key)}ms both`;
+var easeOutCubic = (t) => 1 - Math.pow(1 - t, 3);
+var easeInCubic = (t) => t * t * t;
+var dotEntranceScale = (key, elapsedMs) => easeOutCubic(clamp((elapsedMs - dotDelayMs(key)) / DOT_APPEAR_MS, 0, 1));
+var dotExitScale = (key, elapsedMs) => 1 - easeInCubic(
+  clamp(
+    (elapsedMs - (DOT_APPEAR_SCATTER_MS - dotDelayMs(key))) / DOT_APPEAR_MS,
+    0,
+    1
+  )
+);
 var DOT_EXIT_TOTAL_MS = DOT_APPEAR_SCATTER_MS + DOT_APPEAR_MS;
 var BAR_GROW_MS = 200;
 var BAR_GROW_SWEEP_MS = 560;
@@ -40450,6 +40593,19 @@ var usePersistedFlag = (key, fallback) => {
     }
   ];
 };
+var buildBoardFilter = (view, identities, hiddenIds) => {
+  const axis = identityAxisFor(view);
+  if (axis === null || hiddenIds.size === 0) return null;
+  const visibleIds = new Set(
+    identities.map((identity) => identity.id).filter((id) => !hiddenIds.has(id))
+  );
+  return { axis, visibleIds };
+};
+var issuePassesBoardFilter = (issue, commentAuthorIds, filter) => {
+  if (!filter) return true;
+  const ids = filter.axis === "tag" ? issue.tags.map((tag) => tag.id) : filter.axis === "assignee" ? issue.assignees.map((assignee) => assignee.id) : commentAuthorIds;
+  return ids.some((id) => filter.visibleIds.has(id));
+};
 
 // source/gui/client/components/ScrubberParts.tsx
 var import_react14 = __toESM(require_react(), 1);
@@ -40534,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,
@@ -40548,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,
@@ -40566,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}`,
@@ -40581,6 +40781,330 @@ 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",
+  tagging: "Tags",
+  assigning: "Assignees"
+};
+var disclosureStyle = {
+  background: "transparent",
+  border: "none",
+  padding: 0,
+  display: "inline-flex",
+  alignItems: "center",
+  color: GUI_THEME.secondary,
+  cursor: "pointer"
+};
+var VIEW_LABELS = {
+  all: "All board events",
+  ...CATEGORY_LABELS
+};
+var SELECT_TRIGGER_WIDTH = 180;
+var selectTriggerStyle = (color2, disabled) => ({
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  gap: 6,
+  width: SELECT_TRIGGER_WIDTH,
+  boxSizing: "border-box",
+  background: "rgba(208, 223, 255, 0.08)",
+  // None, but padded as though there were, so it sits at the same height as
+  // the bordered toggles on either side.
+  border: "none",
+  color: disabled ? GUI_THEME.dim : color2,
+  borderRadius: 6,
+  fontFamily: "inherit",
+  fontSize: 10,
+  padding: "3px 7px 3px 9px",
+  cursor: disabled ? "not-allowed" : "pointer",
+  opacity: disabled ? 0.4 : 1
+});
+var nestedListStyle = {
+  display: "flex",
+  flexDirection: "column",
+  gap: 7,
+  marginLeft: 5,
+  paddingLeft: 8,
+  borderLeft: `1px solid ${GUI_THEME.line}`
+};
+var popoverStyle = {
+  position: "absolute",
+  top: "100%",
+  left: 0,
+  marginTop: 6,
+  // Carries the column and its gap itself. Without them the options stack as
+  // plain blocks and their radios sit edge to edge.
+  display: "flex",
+  flexDirection: "column",
+  gap: 7,
+  padding: "10px 14px 10px 10px",
+  // 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,
+  // 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)",
+  // Above the dots and the needle, which sit at 1 and 2.
+  zIndex: 30,
+  whiteSpace: "nowrap"
+};
+var onlyButtonStyle = {
+  background: "transparent",
+  border: `1px solid ${GUI_THEME.line}`,
+  borderRadius: 4,
+  color: GUI_THEME.dim,
+  fontFamily: "inherit",
+  fontSize: 9,
+  lineHeight: 1,
+  padding: "2px 4px",
+  cursor: "pointer"
+};
+var useDismissOnOutsideClick = (open, onDismiss) => {
+  const ref = (0, import_react14.useRef)(null);
+  (0, import_react14.useEffect)(() => {
+    if (!open) return;
+    const onPointerDown = (event) => {
+      if (!ref.current?.contains(event.target)) onDismiss();
+    };
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") onDismiss();
+    };
+    document.addEventListener("mousedown", onPointerDown);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", onPointerDown);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [open, onDismiss]);
+  return ref;
+};
+var Radio = ({
+  label,
+  selected,
+  color: color2,
+  disabled,
+  onSelect
+}) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+  "button",
+  {
+    type: "button",
+    role: "radio",
+    "aria-checked": selected,
+    disabled,
+    onClick: onSelect,
+    style: {
+      display: "flex",
+      alignItems: "center",
+      gap: 5,
+      background: "transparent",
+      border: "none",
+      padding: 0,
+      fontSize: 10,
+      fontFamily: "inherit",
+      color: selected ? color2 : GUI_THEME.dim,
+      cursor: disabled ? "not-allowed" : "pointer",
+      opacity: disabled ? 0.4 : 1
+    },
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        "span",
+        {
+          style: {
+            width: 12,
+            height: 12,
+            borderRadius: "50%",
+            border: `1px solid ${selected ? color2 : GUI_THEME.dim}`,
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            flexShrink: 0
+          },
+          children: selected && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            "span",
+            {
+              style: {
+                width: 6,
+                height: 6,
+                borderRadius: "50%",
+                background: color2
+              }
+            }
+          )
+        }
+      ),
+      label
+    ]
+  }
+);
+var BoardSeriesGroup = ({
+  showIssues,
+  view,
+  identities,
+  hiddenIds,
+  expanded,
+  identitiesExpanded,
+  filtered,
+  onChangeShowIssues,
+  onChangeView,
+  onToggleIdentity,
+  onOnlyIdentity,
+  onToggleExpanded,
+  onSetIdentitiesExpanded
+}) => {
+  const sole = soleVisibleIdentity(identities, hiddenIds);
+  const partial = filtered && hiddenIds.size > 0 && identityAxisFor(view) !== null;
+  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_runtime32.jsxs)(
+    "div",
+    {
+      ref,
+      style: { position: "relative", display: "flex", flexDirection: "column" },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            Checkbox,
+            {
+              label: null,
+              title: "Show board events",
+              checked: showIssues,
+              activeColor: color2,
+              onChange: onChangeShowIssues
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+            "button",
+            {
+              type: "button",
+              onClick: onToggleExpanded,
+              disabled: !showIssues,
+              title: filtered ? "Choose what the board series plots" : "This window holds too many events to split by kind",
+              "aria-haspopup": "listbox",
+              "aria-expanded": expanded,
+              style: selectTriggerStyle(color2, !showIssues),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                  "span",
+                  {
+                    style: {
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      whiteSpace: "nowrap"
+                    },
+                    children: label
+                  }
+                ),
+                /* @__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_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_runtime32.jsxs)(
+            "div",
+            {
+              style: { display: "flex", flexDirection: "column", gap: 7 },
+              children: [
+                /* @__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],
+                      selected,
+                      color: boardViewColor(option),
+                      disabled: !showIssues || !filtered,
+                      onSelect: () => onChangeView(option)
+                    }
+                  ),
+                  hasList && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      disabled: !showIssues || !filtered,
+                      onClick: () => {
+                        if (!selected) onChangeView(option);
+                        onSetIdentitiesExpanded(!open);
+                      },
+                      title: open ? "Hide the list" : "Pick which to show",
+                      "aria-expanded": open,
+                      style: disclosureStyle,
+                      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_runtime32.jsx)(
+                  "div",
+                  {
+                    style: {
+                      ...nestedListStyle,
+                      // A repo with dozens of tags would otherwise push the
+                      // board itself off the screen.
+                      maxHeight: 132,
+                      overflowY: "auto"
+                    },
+                    children: identities.map((identity) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+                      "div",
+                      {
+                        style: {
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "space-between",
+                          gap: 10
+                        },
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                            Checkbox,
+                            {
+                              label: identity.name,
+                              checked: !hiddenIds.has(identity.id),
+                              activeColor: identity.color,
+                              disabled: !showIssues,
+                              onChange: (next) => onToggleIdentity(identity.id, next)
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                            "button",
+                            {
+                              type: "button",
+                              title: `Show only ${identity.name}`,
+                              disabled: !showIssues,
+                              onClick: () => onOnlyIdentity(identity.id),
+                              style: onlyButtonStyle,
+                              children: "only"
+                            }
+                          )
+                        ]
+                      },
+                      identity.id
+                    ))
+                  }
+                )
+              ]
+            },
+            option
+          );
+        }) })
+      ]
+    }
+  );
+};
 var navButtonStyle = {
   background: "transparent",
   border: `1px solid ${GUI_THEME.dim}`,
@@ -40599,167 +41123,173 @@ var ScrubberControls = ({
   showIssues,
   showCommits,
   allBoards,
+  boardView,
+  identities,
+  hiddenIdentityIds,
+  categoriesExpanded,
+  identitiesExpanded,
+  categoriesFiltered,
   isScrubbing,
-  nowLabel,
+  onReturnToLive,
   onChangeScope,
   onChangeOffset,
   onChangeLayoutMode,
   onChangeShowIssues,
   onChangeShowCommits,
   onChangeAllBoards,
-  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"
+  onChangeBoardView,
+  onToggleIdentity,
+  onOnlyIdentity,
+  onToggleCategoriesExpanded,
+  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: 10 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-      Checkbox,
-      {
-        label: "Board",
-        checked: showIssues,
-        activeColor: GUI_THEME.accent,
-        onChange: onChangeShowIssues
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-      Checkbox,
-      {
-        label: "Code",
-        checked: showCommits,
-        activeColor: GUI_THEME.green,
-        onChange: onChangeShowCommits
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-      Checkbox,
-      {
-        label: "All boards",
-        checked: allBoards,
-        activeColor: GUI_THEME.accent,
-        onChange: onChangeAllBoards
-      }
-    )
-  ] }),
-  /* @__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: {
@@ -40769,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 = ({
@@ -40804,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: {
@@ -40836,7 +41358,7 @@ var SegmentHighlight = ({
 var TrackBaseline = ({
   color: color2,
   anchor
-}) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
   "div",
   {
     style: {
@@ -40852,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: {
@@ -40874,14 +41396,18 @@ 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: {
       position: "absolute",
       inset: 0,
       pointerEvents: "none",
-      animation: animate ? FADE_IN_ANIMATION : void 0
+      animation: animate ? FADE_IN_ANIMATION : void 0,
+      // Walls this subtree off from the needle and highlight moving above
+      // it: without containment every frame of a drag re-lays-out the
+      // thousands of dots inside, and the drag stutters.
+      contain: "layout paint"
     },
     children
   }
@@ -40904,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: {
@@ -40921,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: {
@@ -40942,55 +41468,14 @@ var VolumeBars = ({
     ))
   ] });
 };
-var ScatterDot = ({
-  fraction,
-  hourFraction,
-  size,
-  color: color2,
-  opacity,
-  zIndex,
-  title,
-  animation,
-  interactive = true,
-  onMouseEnter,
-  onMouseLeave,
-  onClick
-}) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-  "div",
-  {
-    title,
-    onPointerDown: onClick && ((event) => event.stopPropagation()),
-    onClick: onClick && ((event) => {
-      event.stopPropagation();
-      onClick();
-    }),
-    onMouseEnter,
-    onMouseLeave,
-    style: {
-      position: "absolute",
-      left: `${fraction * 100}%`,
-      top: EVENTS_MODE_VERTICAL_PADDING + hourFraction * EVENTS_SCATTER_HEIGHT,
-      width: size,
-      height: size,
-      borderRadius: "50%",
-      background: color2,
-      opacity,
-      zIndex,
-      transform: `translate(${-size / 2}px, -50%)`,
-      animation,
-      pointerEvents: interactive ? "auto" : "none",
-      cursor: onClick ? "pointer" : void 0
-    }
-  }
-);
 var ScrubberNeedle = ({ fraction }) => {
   const [hovered, setHovered] = (0, import_react14.useState)(false);
   const hover = {
     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,
@@ -41010,7 +41495,7 @@ var ScrubberNeedle = ({ fraction }) => {
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       "div",
       {
         ...hover,
@@ -41040,7 +41525,7 @@ var ScrubberHoverHint = ({
   fraction,
   trackWidthPx,
   empty: empty3 = false
-}) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
   "div",
   {
     style: {
@@ -41072,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: {
@@ -41086,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: {
@@ -41102,19 +41587,183 @@ var ScrubberHoverHint = ({
     ]
   }
 );
+var HIT_RADIUS = 7;
+var pointAt = (layers, x, y, width) => {
+  let best = null;
+  let bestDistance = HIT_RADIUS * HIT_RADIUS;
+  for (const layer of layers) {
+    if (layer.leaving) continue;
+    for (const point4 of layer.points) {
+      const dx = point4.fraction * width - x;
+      const dy = EVENTS_MODE_VERTICAL_PADDING + point4.hourFraction * EVENTS_SCATTER_HEIGHT - y;
+      const distance = dx * dx + dy * dy;
+      if (distance <= bestDistance) {
+        bestDistance = distance;
+        best = point4;
+      }
+    }
+  }
+  return best;
+};
+var ScatterCanvas = ({
+  layers,
+  animate,
+  onPointEnter,
+  onPointLeave,
+  onInspectCommit
+}) => {
+  const canvasRef = (0, import_react14.useRef)(null);
+  const sizeRef = (0, import_react14.useRef)({ width: 0, height: 0 });
+  const layersRef = (0, import_react14.useRef)(layers);
+  layersRef.current = layers;
+  const phasesRef = (0, import_react14.useRef)(/* @__PURE__ */ new Map());
+  const frameRef = (0, import_react14.useRef)(null);
+  const hoveredRef = (0, import_react14.useRef)(null);
+  const [entrancePlaying, setEntrancePlaying] = (0, import_react14.useState)(false);
+  const paint = (0, import_react14.useCallback)((now) => {
+    const canvas = canvasRef.current;
+    const context = canvas?.getContext("2d");
+    if (!canvas || !context) return false;
+    const { width, height } = sizeRef.current;
+    context.clearRect(0, 0, width, height);
+    let running = false;
+    for (const layer of layersRef.current) {
+      const phase = phasesRef.current.get(layer.id);
+      const elapsed = phase ? now - phase.startedAt : null;
+      const done = elapsed === null || elapsed >= DOT_EXIT_TOTAL_MS;
+      if (phase && !done) running = true;
+      if (phase?.mode === "out" && done) continue;
+      for (const point4 of layer.points) {
+        const scale = phase === null || phase === void 0 || done ? 1 : phase.mode === "in" ? dotEntranceScale(point4.key, elapsed) : dotExitScale(point4.key, elapsed);
+        if (scale <= 0) continue;
+        context.globalAlpha = point4.opacity;
+        context.fillStyle = point4.color;
+        context.beginPath();
+        context.arc(
+          point4.fraction * width,
+          EVENTS_MODE_VERTICAL_PADDING + point4.hourFraction * EVENTS_SCATTER_HEIGHT,
+          point4.radius * scale,
+          0,
+          Math.PI * 2
+        );
+        context.fill();
+      }
+    }
+    context.globalAlpha = 1;
+    return running;
+  }, []);
+  const run = (0, import_react14.useCallback)(() => {
+    if (frameRef.current !== null) return;
+    const step = () => {
+      frameRef.current = null;
+      const running = paint(performance.now());
+      if (running) frameRef.current = requestAnimationFrame(step);
+      else setEntrancePlaying(false);
+    };
+    frameRef.current = requestAnimationFrame(step);
+  }, [paint]);
+  (0, import_react14.useEffect)(() => {
+    const canvas = canvasRef.current;
+    const parent = canvas?.parentElement;
+    if (!canvas || !parent) return;
+    const resize = () => {
+      const ratio = window.devicePixelRatio || 1;
+      const { width, height } = parent.getBoundingClientRect();
+      sizeRef.current = { width, height };
+      canvas.width = Math.round(width * ratio);
+      canvas.height = Math.round(height * ratio);
+      canvas.style.width = `${width}px`;
+      canvas.style.height = `${height}px`;
+      canvas.getContext("2d")?.setTransform(ratio, 0, 0, ratio, 0, 0);
+      paint(performance.now());
+    };
+    resize();
+    const observer = new ResizeObserver(resize);
+    observer.observe(parent);
+    return () => observer.disconnect();
+  }, [paint]);
+  const signature = layers.map((layer) => `${layer.id}:${layer.generation}:${layer.leaving}`).join("|");
+  (0, import_react14.useEffect)(() => {
+    const seen = /* @__PURE__ */ new Set();
+    for (const layer of layers) {
+      seen.add(layer.id);
+      const key = `${layer.generation}:${layer.leaving}`;
+      const marker = `${layer.id}@${key}`;
+      const current = phasesRef.current.get(layer.id);
+      if (current?.marker === marker)
+        continue;
+      if (!animate) {
+        phasesRef.current.delete(layer.id);
+        continue;
+      }
+      phasesRef.current.set(layer.id, {
+        mode: layer.leaving ? "out" : "in",
+        startedAt: performance.now(),
+        marker
+      });
+      if (!layer.leaving) setEntrancePlaying(true);
+    }
+    for (const id of [...phasesRef.current.keys()])
+      if (!seen.has(id)) phasesRef.current.delete(id);
+    if (animate) run();
+    else paint(performance.now());
+  }, [signature, animate, run, paint]);
+  (0, import_react14.useEffect)(() => {
+    if (frameRef.current === null) paint(performance.now());
+  }, [layers, paint]);
+  (0, import_react14.useEffect)(
+    () => () => {
+      if (frameRef.current !== null) cancelAnimationFrame(frameRef.current);
+    },
+    []
+  );
+  const hitTest = (event) => {
+    const rect = event.currentTarget.getBoundingClientRect();
+    return pointAt(
+      layersRef.current,
+      event.clientX - rect.left,
+      event.clientY - rect.top,
+      rect.width
+    );
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    "canvas",
+    {
+      ref: canvasRef,
+      "data-entrance": entrancePlaying ? "playing" : "done",
+      style: { position: "absolute", inset: 0 },
+      onMouseMove: (event) => {
+        const point4 = hitTest(event);
+        if (point4?.key === hoveredRef.current) return;
+        hoveredRef.current = point4?.key ?? null;
+        if (point4) onPointEnter(point4);
+        else onPointLeave();
+      },
+      onMouseLeave: () => {
+        hoveredRef.current = null;
+        onPointLeave();
+      },
+      onPointerDown: (event) => {
+        if (hitTest(event)?.commitSha) event.stopPropagation();
+      },
+      onClick: (event) => {
+        const sha = hitTest(event)?.commitSha;
+        if (sha) onInspectCommit(sha);
+      }
+    }
+  );
+};
 
 // source/gui/client/components/ScrubberLayout.tsx
-var import_jsx_runtime31 = __toESM(require_jsx_runtime(), 1);
-var dotAnimation = (key, animate, leaving) => !animate ? void 0 : leaving ? dotExitAnimation(key) : dotAppearAnimation(key);
+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",
@@ -41131,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: {
@@ -41141,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 })
                   ]
                 }
               ),
@@ -41169,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,
@@ -41186,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,
@@ -41208,15 +41856,15 @@ var ScrubberLayout = ({
                           alignItems: "center"
                         },
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                             TrackBaseline,
                             {
-                              color: GUI_THEME.accent,
+                              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,
@@ -41224,75 +41872,25 @@ var ScrubberLayout = ({
                               firstBar: chart.issueBarRange[0],
                               lastBar: chart.issueBarRange[1],
                               highlightedIndex: chart.hoveredBucketIndex,
-                              color: GUI_THEME.accent,
+                              color: chart.issueSeriesColor,
                               direction: "up",
                               animate
                             }
                           ) }, `issues-${windowKey}`),
-                          chart.issueScatter.mounted && layoutMode === "real" && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-                            SeriesLayer,
-                            {
-                              animate: animate && !chart.issueScatter.leaving,
-                              children: chart.eventBuckets.map((bucket) => {
-                                const intensity = bucket.count / chart.maxEventCount;
-                                return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-                                  ScatterDot,
-                                  {
-                                    fraction: axis.fractionForTime(bucket.t),
-                                    hourFraction: hourFractionForTime(bucket.t),
-                                    size: 3 + intensity * 6,
-                                    color: GUI_THEME.accent,
-                                    opacity: 0.3 + intensity * 0.5,
-                                    zIndex: 2,
-                                    title: `${bucket.count} change${bucket.count === 1 ? "" : "s"}, ${formatDateTime(new Date(bucket.t))}`,
-                                    animation: dotAnimation(
-                                      String(bucket.t),
-                                      animate,
-                                      chart.issueScatter.leaving
-                                    ),
-                                    interactive: !chart.issueScatter.leaving,
-                                    onMouseEnter: () => on.onIssueDotEnter(bucket),
-                                    onMouseLeave: on.onIssueDotLeave
-                                  },
-                                  bucket.t
-                                );
-                              })
-                            },
-                            `issues-${windowKey}`
-                          ),
-                          chart.commitScatter.mounted && layoutMode === "real" && chart.commits.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-                            SeriesLayer,
+                          layoutMode === "real" && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                            ScatterCanvas,
                             {
-                              animate: animate && !chart.commitScatter.leaving,
-                              children: chart.commits.map((commit) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-                                ScatterDot,
-                                {
-                                  fraction: axis.fractionForTime(commit.time),
-                                  hourFraction: hourFractionForTime(commit.time),
-                                  size: 4,
-                                  color: GUI_THEME.green,
-                                  opacity: chart.hoveredCommitSha === commit.sha ? 1 : 0.55,
-                                  zIndex: 1,
-                                  title: `${formatDateTime(new Date(commit.time))} \u2014 ${commit.subject} \u2014 ${commit.author} (${commit.linesChanged.toLocaleString()} lines)`,
-                                  animation: dotAnimation(
-                                    commit.sha,
-                                    animate,
-                                    chart.commitScatter.leaving
-                                  ),
-                                  interactive: !chart.commitScatter.leaving,
-                                  onClick: () => on.onInspectCommit(commit.sha),
-                                  onMouseEnter: () => on.onCommitDotEnter(commit),
-                                  onMouseLeave: on.onCommitDotLeave
-                                },
-                                commit.sha
-                              ))
-                            },
-                            `commits-${windowKey}`
+                              layers: chart.scatterLayers,
+                              animate,
+                              onPointEnter: on.onScatterPointEnter,
+                              onPointLeave: on.onScatterPointLeave,
+                              onInspectCommit: on.onInspectCommit
+                            }
                           )
                         ]
                       }
                     ),
-                    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,
@@ -41305,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,
@@ -41323,17 +41921,17 @@ 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,
                         segmentLabel: chart.hoveredSegment?.label,
-                        stripeColor: GUI_THEME.accent,
+                        stripeColor: chart.issueSeriesColor,
                         trackWidthPx: chart.trackWidthPx
                       }
                     ),
-                    chart.commitHint && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                    chart.commitHint && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                       ScrubberHoverHint,
                       {
                         ...chart.commitHint,
@@ -41354,13 +41952,31 @@ 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";
 var SCOPE_STORAGE_KEY = "epiq.timeScrubber.scope";
 var SHOW_ISSUES_STORAGE_KEY = "epiq.timeScrubber.showIssues";
 var SHOW_COMMITS_STORAGE_KEY = "epiq.timeScrubber.showCommits";
 var ALL_BOARDS_STORAGE_KEY = "epiq.timeScrubber.allBoards";
+var BOARD_VIEW_STORAGE_KEY = "epiq.timeScrubber.boardView";
+var HIDDEN_IDENTITIES_STORAGE_KEY = "epiq.timeScrubber.hiddenIdentities";
+var CATEGORIES_EXPANDED_STORAGE_KEY = "epiq.timeScrubber.categoriesExpanded";
+var IDENTITIES_EXPANDED_STORAGE_KEY = "epiq.timeScrubber.identitiesExpanded";
+var readStoredBoardView = () => {
+  const stored = localStorage.getItem(BOARD_VIEW_STORAGE_KEY);
+  return isBoardView(stored) ? stored : "all";
+};
+var readStoredHiddenIds = () => {
+  try {
+    const stored = localStorage.getItem(HIDDEN_IDENTITIES_STORAGE_KEY);
+    const parsed = stored ? JSON.parse(stored) : [];
+    return new Set(Array.isArray(parsed) ? parsed.map(String) : []);
+  } catch {
+    return /* @__PURE__ */ new Set();
+  }
+};
 var readStoredScope = () => {
   const stored = localStorage.getItem(SCOPE_STORAGE_KEY);
   return isScope(stored) ? stored : "all";
@@ -41375,7 +41991,8 @@ var TimeScrubber = ({
   onRequestHistory,
   boardId,
   connected,
-  onInspectCommit
+  onInspectCommit,
+  onBoardFilterChange
 }) => {
   const animate = !usePrefersReducedMotion();
   const trackRef = (0, import_react15.useRef)(null);
@@ -41396,6 +42013,16 @@ var TimeScrubber = ({
     SHOW_COMMITS_STORAGE_KEY,
     true
   );
+  const [boardView, setBoardView] = (0, import_react15.useState)(readStoredBoardView);
+  const [hiddenIdentityIds, setHiddenIdentityIds] = (0, import_react15.useState)(readStoredHiddenIds);
+  const [categoriesExpanded, setCategoriesExpanded] = usePersistedFlag(
+    CATEGORIES_EXPANDED_STORAGE_KEY,
+    false
+  );
+  const [identitiesExpanded, setIdentitiesExpanded] = usePersistedFlag(
+    IDENTITIES_EXPANDED_STORAGE_KEY,
+    false
+  );
   const [allBoards, setAllBoards] = usePersistedFlag(
     ALL_BOARDS_STORAGE_KEY,
     false
@@ -41425,19 +42052,137 @@ var TimeScrubber = ({
     armEntrance();
     setOffset(nextOffset);
   };
+  const changeBoardView = (next) => {
+    setBoardView(next);
+    localStorage.setItem(BOARD_VIEW_STORAGE_KEY, next);
+  };
+  const isolateIdentity = (id) => {
+    const others = identities.filter((identity) => identity.id !== id).map((identity) => identity.id);
+    setHiddenIdentityIds((previous3) => {
+      const isolated = !previous3.has(id) && others.length === previous3.size && others.every((other) => previous3.has(other));
+      const hidden = isolated ? /* @__PURE__ */ new Set() : new Set(others);
+      localStorage.setItem(
+        HIDDEN_IDENTITIES_STORAGE_KEY,
+        JSON.stringify([...hidden])
+      );
+      return hidden;
+    });
+  };
+  const toggleIdentity = (id, next) => {
+    setHiddenIdentityIds((previous3) => {
+      const hidden = new Set(previous3);
+      if (next) {
+        hidden.delete(id);
+      } else {
+        hidden.add(id);
+      }
+      localStorage.setItem(
+        HIDDEN_IDENTITIES_STORAGE_KEY,
+        JSON.stringify([...hidden])
+      );
+      return hidden;
+    });
+  };
   const changeAllBoards = (next) => {
     armEntrance();
     setAllBoards(next);
   };
-  const axis = buildAxis(timeline, commits);
-  const issueCounts = bucketIssueCounts(axis, timeline);
-  const commitStats = bucketCommitStats(axis, commits);
-  const eventBuckets = timeline?.buckets ?? [];
-  const maxIssueBucketCount = maxOf(issueCounts, 1);
-  const maxEventCount = maxOf(
-    eventBuckets.map((bucket) => bucket.count),
-    1
+  const steadyBoardId = (0, import_react15.useRef)(boardId);
+  if (boardId !== null) steadyBoardId.current = boardId;
+  const requestKey = (0, import_react15.useMemo)(
+    () => JSON.stringify([scope, offset, steadyBoardId.current, allBoards]),
+    [scope, offset, steadyBoardId.current, allBoards]
+  );
+  const filterKey = (0, import_react15.useMemo)(
+    () => 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);
+  const awaiting = (0, import_react15.useRef)(true);
+  if (heldKey.current !== requestKey) {
+    heldKey.current = requestKey;
+    awaiting.current = true;
+  }
+  if (awaiting.current && heldHistoryId.current !== historyId) {
+    heldHistoryId.current = historyId;
+    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;
+  const identities = (0, import_react15.useMemo)(
+    () => listIdentities(shown.timeline, boardView),
+    [shown, boardView]
+  );
+  const soleIdentity = (0, import_react15.useMemo)(
+    () => soleVisibleIdentity(identities, hiddenIdentityIds),
+    [identities, hiddenIdentityIds]
   );
+  const issueCounts = bucketIssueCounts(
+    axis,
+    shown.timeline,
+    boardView,
+    hiddenIdentityIds
+  );
+  const commitStats = bucketCommitStats(axis, shown.commits);
+  const liveEventDots = (0, import_react15.useMemo)(
+    () => buildEventDots(shown.timeline, boardView, hiddenIdentityIds),
+    [shown, boardView, hiddenIdentityIds]
+  );
+  const dragging = dragFraction !== null;
+  const commitPoints = (0, import_react15.useMemo)(
+    () => shown.commits.map((commit) => ({
+      key: commit.sha,
+      t: commit.time,
+      fraction: axis.fractionForTime(commit.time),
+      hourFraction: hourFractionForTime(commit.time),
+      radius: 2,
+      color: GUI_THEME.green,
+      opacity: 0.55,
+      // The hint labels the moment itself, so this is the rest of it.
+      title: `${commit.subject} \u2014 ${commit.author} (${commit.linesChanged.toLocaleString()} lines)`,
+      commitSha: commit.sha
+    })),
+    [shown.commits, axis]
+  );
+  const issuePoints = (0, import_react15.useMemo)(
+    () => liveEventDots.map((dot) => ({
+      key: dot.key,
+      t: dot.t,
+      fraction: axis.fractionForTime(dot.t),
+      hourFraction: hourFractionForTime(dot.t),
+      radius: dot.size / 2,
+      color: dot.color,
+      opacity: dot.opacity,
+      title: dotDetail(dot),
+      commitSha: null
+    })),
+    [liveEventDots, axis]
+  );
+  const boardFilter = (0, import_react15.useMemo)(
+    () => buildBoardFilter(boardView, identities, hiddenIdentityIds),
+    [boardView, identities, hiddenIdentityIds]
+  );
+  (0, import_react15.useEffect)(() => {
+    onBoardFilterChange(boardFilter);
+  }, [boardFilter]);
+  const maxIssueBucketCount = maxOf(issueCounts, 1);
   const maxCommitCount = maxOf(
     Array.from(commitStats.values(), (stats) => stats.count),
     1
@@ -41449,21 +42194,34 @@ 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;
-  };
-  (0, import_react15.useEffect)(armEntrance, [boardId]);
+  const armedBoardId = (0, import_react15.useRef)(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}`;
+    if (boardId === null || boardId === armedBoardId.current) return;
+    armedBoardId.current = boardId;
+    armEntrance();
+  }, [boardId]);
+  const windowKey = `${layoutMode}-${entrance.current}-${filterKey}`;
+  const scatterLayers = (0, import_react15.useMemo)(
+    () => [
+      ...commitScatter.mounted ? [
+        {
+          id: "commits",
+          points: commitPoints,
+          generation: windowKey,
+          leaving: commitScatter.leaving
+        }
+      ] : [],
+      ...issueScatter.mounted ? [
+        {
+          id: "issues",
+          points: issuePoints,
+          generation: windowKey,
+          leaving: issueScatter.leaving
+        }
+      ] : []
+    ],
+    [commitPoints, issuePoints, commitScatter, issueScatter, windowKey]
+  );
   const confirmedFraction = timeTravel.mode === "scrub" && timeTravel.asOfTime !== null ? axis.fractionForTime(timeTravel.asOfTime) : 1;
   const fractionFromClientX = (clientX) => {
     const track = trackRef.current;
@@ -41493,7 +42251,30 @@ var TimeScrubber = ({
   );
   const bucketTimeAt = (index2) => index2 !== null && index2 < axis.bucketCount ? axis.bucketTimeAt(index2) : void 0;
   const centreFraction = (index2) => (index2 + 0.5) / axis.bucketCount;
-  const boardEventRow = (count) => `${count} board event${count === 1 ? "" : "s"}`;
+  const onScatterPointEnter = (0, import_react15.useCallback)(
+    (point4) => {
+      if (point4.commitSha) {
+        const commit = shown.commits.find((c) => c.sha === point4.commitSha);
+        if (commit) {
+          setHoveredCommit({ commit, fraction: point4.fraction });
+          setHoveredEvent(null);
+        }
+        return;
+      }
+      setHoveredCommit(null);
+      setHoveredEvent({
+        label: formatDateTime(new Date(point4.t)),
+        detail: point4.title,
+        t: point4.t,
+        fraction: point4.fraction
+      });
+    },
+    [shown.commits]
+  );
+  const onScatterPointLeave = (0, import_react15.useCallback)(() => {
+    setHoveredEvent(null);
+    setHoveredCommit(null);
+  }, []);
   const hoveredBucketTime = bucketTimeAt(hoveredBucketIndex);
   const hoveredBucketCount = hoveredBucketIndex !== null ? issueCounts[hoveredBucketIndex] : void 0;
   const boardHint = layoutMode === "even" ? hoveredBucketTime !== void 0 && hoveredBucketCount !== void 0 ? {
@@ -41506,7 +42287,7 @@ var TimeScrubber = ({
     empty: hoveredBucketCount === 0
   } : null : hoveredEvent ? {
     label: hoveredEvent.label,
-    rows: [boardEventRow(hoveredEvent.count)],
+    rows: [hoveredEvent.detail],
     fraction: hoveredEvent.fraction
   } : null;
   const hoveredCommitStats = hoveredCommitBucketIndex !== null ? commitStats.get(hoveredCommitBucketIndex) : void 0;
@@ -41535,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,
@@ -41549,15 +42329,25 @@ 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,
         onChangeShowIssues: setShowIssues,
         onChangeShowCommits: setShowCommits,
         onChangeAllBoards: changeAllBoards,
-        onReturnToLive
+        boardView,
+        identities,
+        hiddenIdentityIds,
+        categoriesExpanded,
+        identitiesExpanded,
+        categoriesFiltered,
+        isScrubbing: timeTravel.mode === "scrub",
+        onReturnToLive,
+        onChangeBoardView: changeBoardView,
+        onToggleIdentity: toggleIdentity,
+        onOnlyIdentity: isolateIdentity,
+        onToggleCategoriesExpanded: () => setCategoriesExpanded(!categoriesExpanded),
+        onSetIdentitiesExpanded: setIdentitiesExpanded
       },
       chart: {
         trackRef,
@@ -41573,9 +42363,12 @@ var TimeScrubber = ({
         issueBarRange: populatedRange(issueBars),
         commitBars,
         commitBarRange: populatedRange(commitBars),
-        eventBuckets,
-        maxEventCount,
-        commits,
+        scatterLayers,
+        issueSeriesColor: soleIdentity?.color ?? boardViewColor(boardView),
+        dragging,
+        // Exits still need their animation, so this only silences a series
+        // that has finished arriving.
+        commits: shown.commits,
         hoveredCommitSha: hoveredCommit?.commit.sha ?? null,
         hoveredBucketIndex,
         hoveredCommitBucketIndex,
@@ -41615,18 +42408,8 @@ var TimeScrubber = ({
             setHoveredCommitBucketIndex(bucketIndexFromEvent(event));
           },
           onCommitTrackMouseLeave: () => setHoveredCommitBucketIndex(null),
-          onIssueDotEnter: (bucket) => setHoveredEvent({
-            label: formatDateTime(new Date(bucket.t)),
-            count: bucket.count,
-            t: bucket.t,
-            fraction: axis.fractionForTime(bucket.t)
-          }),
-          onIssueDotLeave: () => setHoveredEvent(null),
-          onCommitDotEnter: (commit) => setHoveredCommit({
-            commit,
-            fraction: axis.fractionForTime(commit.time)
-          }),
-          onCommitDotLeave: () => setHoveredCommit(null),
+          onScatterPointEnter,
+          onScatterPointLeave,
           onInspectCommit
         }
       }
@@ -41717,8 +42500,8 @@ var nodeRef = (id) => id.slice(-NODE_REF_LENGTH).toUpperCase();
 // source/gui/client/lib/gui-state-helper.tsx
 var getResultValue = (payload) => {
   if (!payload) return void 0;
-  if (typeof payload === "object" && payload !== null && "value" in payload && payload.value) {
-    return payload.value;
+  if (typeof payload === "object" && payload !== null && "value" in payload) {
+    return payload.value ?? void 0;
   }
   if (typeof payload === "object" && payload !== null && "content" in payload && payload.content?.[0]?.text) {
     return JSON.parse(payload.content[0].text).value;
@@ -41910,8 +42693,9 @@ var blobToBase64 = (blob) => new Promise((resolve, reject) => {
 });
 
 // source/gui/client/App.tsx
-var import_jsx_runtime33 = __toESM(require_jsx_runtime(), 1);
-var DropIndicator = () => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+var import_jsx_runtime35 = __toESM(require_jsx_runtime(), 1);
+var EMPTY_COMMENTS = {};
+var DropIndicator = () => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
   "div",
   {
     style: {
@@ -41955,7 +42739,7 @@ var App = () => {
   const [mutationGate] = (0, import_react16.useState)(createMutationGate);
   const selectedTab = searchParams.get("tab") === "comments" ? "comments" : "overview";
   const navigate = useNavigate();
-  const selectedBoard = (state && boardId ? findBoard(state, boardId) : null) ?? state?.boards[0] ?? null;
+  const selectedBoard = (state && boardId ? findBoard(state, boardId) : null) ?? state?.boards?.[0] ?? null;
   const selectedBoardId = selectedBoard?.id ?? null;
   const selectedBoardIdRef = (0, import_react16.useRef)(selectedBoardId);
   selectedBoardIdRef.current = selectedBoardId;
@@ -41980,9 +42764,38 @@ var App = () => {
     if (!boardSlug) return;
     void navigate(`/board/${boardSlug}`);
   };
-  const commentsByIssueId = state?.commentsByIssueId ?? {};
+  const commentsByIssueId = state?.commentsByIssueId ?? EMPTY_COMMENTS;
+  const [issueDetail, setIssueDetail] = (0, import_react16.useState)(null);
+  const [boardFilter, setBoardFilter] = (0, import_react16.useState)(null);
+  const { visibleSwimlanes, hiddenIssueCount } = (0, import_react16.useMemo)(() => {
+    const swimlanes = selectedBoard?.swimlanes ?? [];
+    if (!boardFilter) return { visibleSwimlanes: swimlanes, hiddenIssueCount: 0 };
+    let hidden = 0;
+    const visible = swimlanes.map((swimlane) => {
+      const issues = swimlane.issues.filter(
+        (issue) => issuePassesBoardFilter(
+          issue,
+          (commentsByIssueId[issue.id] ?? []).map((comment) => comment.author.id),
+          boardFilter
+        )
+      );
+      hidden += swimlane.issues.length - issues.length;
+      return { ...swimlane, issues };
+    });
+    return { visibleSwimlanes: visible, hiddenIssueCount: hidden };
+  }, [selectedBoard, boardFilter, commentsByIssueId]);
   const attachmentsByIssueId = state?.attachmentsByIssueId ?? {};
   const [attachmentUploadStatus, setAttachmentUploadStatus] = (0, import_react16.useState)({ state: "idle" });
+  (0, import_react16.useEffect)(() => {
+    if (!selectedIssue) {
+      setIssueDetail(null);
+      return;
+    }
+    sendSocketJson(socketRef.current, {
+      type: "issue:get",
+      payload: { issueId: selectedIssue.id }
+    });
+  }, [selectedIssue?.id, state]);
   const requestState = () => {
     sendSocketJson(socketRef.current, { type: "state:get" });
   };
@@ -42010,6 +42823,10 @@ var App = () => {
         const nextState = getResultValue(message.payload);
         if (nextState) setState(nextState);
       }
+      if (message.type === "issue") {
+        const detail = getResultValue(message.payload);
+        if (detail) setIssueDetail(detail);
+      }
       if (message.type === "issue:created") {
         const created = getResultValue(message.payload);
         if (created && boardId) {
@@ -42070,8 +42887,9 @@ var App = () => {
     };
   }, [boardId, navigate]);
   (0, import_react16.useEffect)(() => {
-    if (!boardId && state?.boards[0]) {
-      void navigate(`/board/${state.boards[0].ref}`, { replace: true });
+    const first = state?.boards?.[0];
+    if (!boardId && first) {
+      void navigate(`/board/${first.ref}`, { replace: true });
     }
   }, [boardId, state, navigate]);
   (0, import_react16.useEffect)(() => {
@@ -42421,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: {
@@ -42433,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,
@@ -42468,10 +43294,11 @@ var App = () => {
             onInspectCommit: inspectCommit,
             timeTravel: state?.timeTravel ?? { mode: "live", asOfTime: null },
             onScrub: scrubToTime,
-            onReturnToLive: returnToLive
+            onReturnToLive: returnToLive,
+            onBoardFilterChange: setBoardFilter
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
           "div",
           {
             style: {
@@ -42480,7 +43307,7 @@ var App = () => {
               overflow: "hidden"
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
                 "main",
                 {
                   onClick: clearPicked,
@@ -42495,24 +43322,35 @@ var App = () => {
                     overflow: "hidden"
                   },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { style: { padding: "20px 10px" }, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-                      Dropdown,
+                    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                      "div",
                       {
-                        testId: "board-switcher",
-                        label: "Board:",
-                        value: selectedBoard ? {
-                          id: selectedBoard.id,
-                          label: selectedBoard.title
-                        } : null,
-                        items: state?.boards.map((board) => ({
-                          id: board.id,
-                          label: board.title
-                        })) ?? [],
-                        placeholder: "Loading...",
-                        onSelect: selectBoard
+                        style: {
+                          padding: "20px 10px",
+                          display: "flex",
+                          alignItems: "center",
+                          gap: 10
+                        },
+                        children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                          Dropdown,
+                          {
+                            testId: "board-switcher",
+                            label: "Board:",
+                            value: selectedBoard ? {
+                              id: selectedBoard.id,
+                              label: selectedBoard.title
+                            } : null,
+                            items: state?.boards.map((board) => ({
+                              id: board.id,
+                              label: board.title
+                            })) ?? [],
+                            placeholder: "Loading...",
+                            onSelect: selectBoard
+                          }
+                        )
                       }
-                    ) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
                       "div",
                       {
                         style: {
@@ -42524,7 +43362,7 @@ var App = () => {
                           overflowY: "hidden"
                         },
                         children: [
-                          selectedBoard?.swimlanes.map((swimlane) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                          visibleSwimlanes.map((swimlane) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                             SwimlaneColumn,
                             {
                               swimlane,
@@ -42552,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,
@@ -42587,13 +43425,13 @@ 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,
-                  issue: selectedIssue,
+                  issue: issueDetail?.issueId === selectedIssue.id ? { ...selectedIssue, description: issueDetail.description } : selectedIssue,
                   activeTab: selectedTab,
-                  comments: commentsByIssueId[selectedIssue.id] ?? [],
+                  comments: issueDetail?.issueId === selectedIssue.id ? issueDetail.comments : [],
                   onChangeTab: changeIssueDetailsTab,
                   onClose: closeIssueDetails,
                   onEditTitle: editIssueTitle,
@@ -42620,7 +43458,7 @@ var App = () => {
             ]
           }
         ),
-        createIssueModal && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        createIssueModal && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
           CreateIssueModal,
           {
             title: createIssueModal.title,
@@ -42635,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: