epiq 1.4.5 → 1.5.0

package/dist/gui/main.js

@@ -22497,18 +22497,18 @@ function matchPath(pattern, pathname) {
   let pathnameBase = matchedPathname.replace(/(.)\/+$/, "$1");
   let captureGroups = match.slice(1);
   let params = compiledParams.reduce(
-    (memo2, { paramName, isOptional }, index2) => {
+    (memo22, { paramName, isOptional }, index2) => {
       if (paramName === "*") {
         let splatValue = captureGroups[index2] || "";
         pathnameBase = matchedPathname.slice(0, matchedPathname.length - splatValue.length).replace(/(.)\/+$/, "$1");
       }
       const value = captureGroups[index2];
       if (isOptional && !value) {
-        memo2[paramName] = void 0;
+        memo22[paramName] = void 0;
       } else {
-        memo2[paramName] = (value || "").replace(/%2F/g, "/");
+        memo22[paramName] = (value || "").replace(/%2F/g, "/");
       }
-      return memo2;
+      return memo22;
     },
     {}
   );
@@ -23610,9 +23610,9 @@ function shouldProcessLinkClick(event, target) {
 }
 function createSearchParams(init = "") {
   return new URLSearchParams(
-    typeof init === "string" || Array.isArray(init) || init instanceof URLSearchParams ? init : Object.keys(init).reduce((memo2, key) => {
+    typeof init === "string" || Array.isArray(init) || init instanceof URLSearchParams ? init : Object.keys(init).reduce((memo22, key) => {
       let value = init[key];
-      return memo2.concat(
+      return memo22.concat(
         Array.isArray(value) ? value.map((v) => [key, v]) : [[key, value]]
       );
     }, [])
@@ -24838,7 +24838,7 @@ function useViewTransitionState(to, { relative } = {}) {
 }
 
 // source/gui/client/App.tsx
-var import_react16 = __toESM(require_react(), 1);
+var import_react18 = __toESM(require_react(), 1);
 
 // source/gui/client/components/Aside.tsx
 var import_react = __toESM(require_react(), 1);
@@ -24940,9 +24940,13 @@ var Button = ({
   );
 };
 
-// source/gui/client/components/CreateIssueModal.tsx
+// source/gui/client/components/CreateNodeModal.tsx
 var import_jsx_runtime3 = __toESM(require_jsx_runtime(), 1);
-var CreateIssueModal = ({
+var CreateNodeModal = ({
+  eyebrow,
+  fieldLabel,
+  placeholder,
+  confirmLabel = "create",
   title,
   onChangeTitle,
   onCreate,
@@ -24988,7 +24992,7 @@ var CreateIssueModal = ({
                 letterSpacing: 1,
                 textTransform: "uppercase"
               },
-              children: "New issue"
+              children: eyebrow
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -24999,7 +25003,7 @@ var CreateIssueModal = ({
                 fontSize: 10,
                 color: GUI_THEME.primary
               },
-              children: "title"
+              children: fieldLabel
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -25007,7 +25011,7 @@ var CreateIssueModal = ({
             {
               autoFocus: true,
               value: title,
-              placeholder: "issue name",
+              placeholder,
               onChange: (event) => onChangeTitle(event.target.value),
               onKeyDown: (event) => {
                 if (event.key === "Escape") {
@@ -25039,8 +25043,8 @@ var CreateIssueModal = ({
                 marginTop: 20
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { variant: "ghost", onClick: onClose, children: "cancel" }),
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { variant: "primary", children: "create" })
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { type: "button", variant: "ghost", onClick: onClose, children: "cancel" }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { type: "submit", variant: "primary", children: confirmLabel })
               ]
             }
           )
@@ -25050,130 +25054,144 @@ var CreateIssueModal = ({
   }
 );
 
-// source/gui/client/components/Dropdown.tsx
+// source/gui/client/components/AddSwimlaneColumn.tsx
 var import_react3 = __toESM(require_react(), 1);
 var import_jsx_runtime4 = __toESM(require_jsx_runtime(), 1);
-var Dropdown = ({
-  label,
-  value,
-  items,
-  placeholder = "Select...",
-  onSelect,
-  testId
-}) => {
-  const [open, setOpen] = (0, import_react3.useState)(false);
-  const ref = (0, import_react3.useRef)(null);
-  (0, import_react3.useEffect)(() => {
-    const close = (event) => {
-      if (ref.current && !ref.current.contains(event.target)) {
-        setOpen(false);
-      }
-    };
-    document.addEventListener("mousedown", close);
-    return () => document.removeEventListener("mousedown", close);
-  }, []);
+var COLUMN_WIDTH = 360;
+var AddSwimlaneColumn = ({ onClick }) => {
+  const [hovered, setHovered] = (0, import_react3.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-    "div",
+    "button",
     {
-      ref,
+      type: "button",
+      "data-testid": "add-swimlane",
+      title: "Add swimlane",
+      onClick,
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
       style: {
-        position: "relative",
-        width: "fit-content",
+        appearance: "none",
+        WebkitAppearance: "none",
+        width: COLUMN_WIDTH,
+        minWidth: COLUMN_WIDTH,
+        height: "100%",
+        boxSizing: "border-box",
+        border: `1px dashed ${hovered ? GUI_THEME.secondary : GUI_THEME.line}`,
+        borderRadius: 12,
+        background: hovered ? GUI_THEME.bgHighlight : "transparent",
+        color: hovered ? GUI_THEME.secondary : GUI_THEME.dim,
         display: "flex",
+        flexDirection: "column",
         alignItems: "center",
-        gap: 12
+        justifyContent: "center",
+        gap: 6,
+        cursor: "pointer",
+        fontFamily: "inherit",
+        outline: "none",
+        transition: "color 120ms ease, border-color 120ms ease, background 120ms ease"
       },
       children: [
-        label ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { color: GUI_THEME.secondary, fontSize: "12px" }, children: label }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-          Button,
-          {
-            variant: "ghost",
-            "data-testid": testId,
-            onClick: () => setOpen((value2) => !value2),
-            style: {
-              display: "flex",
-              alignItems: "center",
-              width: 100
-            },
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: value?.label ?? placeholder }),
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                "span",
-                {
-                  style: {
-                    marginLeft: "auto",
-                    color: GUI_THEME.dim,
-                    fontSize: "12px",
-                    display: "inline-block",
-                    transform: open ? "rotate(90deg)" : "rotate(0deg)",
-                    transition: "transform 120ms ease"
-                  },
-                  children: "\u276F"
-                }
-              )
-            ]
-          }
-        ),
-        open && items.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              top: 28,
-              left: label ? 62 : 0,
-              minWidth: 220,
-              background: GUI_THEME.bg,
-              border: `1px solid ${GUI_THEME.line}`,
-              borderRadius: 8,
-              boxShadow: "0 12px 32px rgba(0, 0, 0, 0.35)",
-              padding: 6,
-              zIndex: 10
-            },
-            children: items.map((item) => {
-              const selected = item.id === value?.id;
-              return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-                "button",
-                {
-                  type: "button",
-                  "data-testid": testId ? `${testId}-option` : void 0,
-                  onClick: () => {
-                    setOpen(false);
-                    onSelect(item.id);
-                  },
-                  style: {
-                    width: "100%",
-                    display: "flex",
-                    justifyContent: "space-between",
-                    alignItems: "center",
-                    border: "none",
-                    background: selected ? GUI_THEME.line : "transparent",
-                    color: selected ? GUI_THEME.accent : GUI_THEME.primary,
-                    fontFamily: "inherit",
-                    fontSize: 11,
-                    textAlign: "left",
-                    padding: "8px 10px",
-                    borderRadius: 6,
-                    cursor: "pointer"
-                  },
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: item.label }),
-                    selected ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "\u2713" }) : null
-                  ]
-                },
-                item.id
-              );
-            })
-          }
-        ) : null
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { fontSize: 20, lineHeight: 1 }, children: "+" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { fontSize: 12 }, children: "new swimlane" })
       ]
     }
   );
 };
 
+// source/gui/client/components/ConfirmModal.tsx
+var import_jsx_runtime5 = __toESM(require_jsx_runtime(), 1);
+var ConfirmModal = ({
+  eyebrow,
+  heading: heading3,
+  body,
+  confirmLabel,
+  onConfirm,
+  onClose
+}) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  "div",
+  {
+    style: {
+      position: "fixed",
+      inset: 0,
+      background: "rgba(0, 0, 0, 0.25)",
+      backdropFilter: "blur(.5px)",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      zIndex: 1e3
+    },
+    onMouseDown: onClose,
+    children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      "form",
+      {
+        "data-testid": "confirm-modal",
+        onSubmit: (event) => {
+          event.preventDefault();
+          onConfirm();
+        },
+        onMouseDown: (event) => event.stopPropagation(),
+        onKeyDown: (event) => {
+          if (event.key === "Escape") onClose();
+        },
+        style: {
+          marginTop: "-200px",
+          width: 360,
+          background: GUI_THEME.panel,
+          border: `1px solid ${GUI_THEME.line}`,
+          borderRadius: 12,
+          padding: 20
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "div",
+            {
+              style: {
+                color: GUI_THEME.red,
+                fontSize: 10,
+                marginBottom: 8,
+                letterSpacing: 1,
+                textTransform: "uppercase"
+              },
+              children: eyebrow
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h2", { style: { margin: "0 0 10px", fontSize: 13, color: GUI_THEME.primary }, children: heading3 }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "p",
+            {
+              style: {
+                margin: 0,
+                fontSize: 12,
+                lineHeight: 1.7,
+                color: GUI_THEME.secondary
+              },
+              children: body
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+            "div",
+            {
+              style: {
+                display: "flex",
+                justifyContent: "flex-end",
+                gap: 10,
+                marginTop: 20
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Button, { autoFocus: true, type: "button", variant: "ghost", onClick: onClose, children: "cancel" }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Button, { type: "submit", variant: "primary", style: { color: GUI_THEME.red }, children: confirmLabel })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  }
+);
+
 // source/gui/client/components/Panel.tsx
 var import_react4 = __toESM(require_react(), 1);
-var import_jsx_runtime5 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime6 = __toESM(require_jsx_runtime(), 1);
 var POINTER_SAMPLE_MS = 16;
 var Panel = ({
   as,
@@ -25223,7 +25241,7 @@ var Panel = ({
     return () => window.removeEventListener("mousemove", onMove);
   }, [proximityReach]);
   const glowStrength = active ? 1 : proximityReach !== void 0 ? proximity : hovered ? 1 : 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     Component4,
     {
       ...props,
@@ -25251,56 +25269,292 @@ var Panel = ({
         ...style
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "div",
+          {
+            ref: glowRef,
+            style: {
+              position: "absolute",
+              inset: 0,
+              borderRadius,
+              padding: 1,
+              pointerEvents: "none",
+              opacity: glowStrength * glowOpacity,
+              background: `radial-gradient(
+						${glowRadius}px circle at ${mouse.x}px ${mouse.y}px,
+						${glowColor},
+						transparent 100%
+					)`,
+              mask: "linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)",
+              WebkitMask: "linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)",
+              maskComposite: "exclude",
+              WebkitMaskComposite: "xor",
+              transition: "opacity 140ms ease"
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "div",
           {
-            ref: glowRef,
             style: {
-              position: "absolute",
-              inset: 0,
-              borderRadius,
-              padding: 1,
-              pointerEvents: "none",
-              opacity: glowStrength * glowOpacity,
-              background: `radial-gradient(
-						${glowRadius}px circle at ${mouse.x}px ${mouse.y}px,
-						${glowColor},
-						transparent 100%
-					)`,
-              mask: "linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)",
-              WebkitMask: "linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)",
-              maskComposite: "exclude",
-              WebkitMaskComposite: "xor",
-              transition: "opacity 140ms ease"
-            }
+              position: "relative",
+              zIndex: 1,
+              height: "100%",
+              display: "flex",
+              flexDirection: "column",
+              minHeight: 0
+            },
+            children
+          }
+        )
+      ]
+    }
+  );
+};
+
+// source/gui/client/components/InitProjectScreen.tsx
+var import_jsx_runtime7 = __toESM(require_jsx_runtime(), 1);
+var codeStyle = {
+  background: GUI_THEME.panel2,
+  border: `1px solid ${GUI_THEME.line}`,
+  borderRadius: 6,
+  padding: "2px 6px",
+  color: GUI_THEME.primary
+};
+var InitProjectScreen = ({ repoRoot, message, onRetry }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  "div",
+  {
+    "data-testid": "init-project-screen",
+    style: {
+      height: "100vh",
+      background: GUI_THEME.bg,
+      color: GUI_THEME.primary,
+      fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      padding: 30
+    },
+    children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      Panel,
+      {
+        proximityReach: 300,
+        style: { width: 520, background: GUI_THEME.panel },
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+          "div",
+          {
+            style: {
+              padding: 28,
+              display: "flex",
+              flexDirection: "column",
+              gap: 16
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                "div",
+                {
+                  style: {
+                    color: GUI_THEME.accent,
+                    fontSize: 10,
+                    letterSpacing: 1,
+                    textTransform: "uppercase"
+                  },
+                  children: "Initialize project"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h1", { style: { margin: 0, fontSize: 16, fontWeight: 700 }, children: "This folder is not an epiq project yet" }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+                "div",
+                {
+                  style: { fontSize: 12, color: GUI_THEME.secondary, lineHeight: 1.7 },
+                  children: [
+                    "No ",
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: codeStyle, children: ".epiq/project.json" }),
+                    " was found in this directory or any of its parents:"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                "div",
+                {
+                  style: {
+                    ...codeStyle,
+                    fontSize: 12,
+                    padding: "10px 12px",
+                    wordBreak: "break-all"
+                  },
+                  children: repoRoot
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+                "div",
+                {
+                  style: { fontSize: 12, color: GUI_THEME.secondary, lineHeight: 1.7 },
+                  children: [
+                    "To start tracking issues here, run ",
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: codeStyle, children: "epiq" }),
+                    " ",
+                    "in that folder and type ",
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: codeStyle, children: ":init" }),
+                    ". That creates, commits and pushes",
+                    " ",
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: codeStyle, children: ".epiq/project.json" }),
+                    ". Then come back and reload."
+                  ]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    gap: 12,
+                    marginTop: 4
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: { fontSize: 10, color: GUI_THEME.dim }, children: message }),
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Button, { variant: "primary", onClick: onRetry, children: "check again" })
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      }
+    )
+  }
+);
+
+// source/gui/client/components/Dropdown.tsx
+var import_react5 = __toESM(require_react(), 1);
+var import_jsx_runtime8 = __toESM(require_jsx_runtime(), 1);
+var Dropdown = ({
+  label,
+  value,
+  items,
+  placeholder = "Select...",
+  onSelect,
+  testId
+}) => {
+  const [open, setOpen] = (0, import_react5.useState)(false);
+  const ref = (0, import_react5.useRef)(null);
+  (0, import_react5.useEffect)(() => {
+    const close = (event) => {
+      if (ref.current && !ref.current.contains(event.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", close);
+    return () => document.removeEventListener("mousedown", close);
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    "div",
+    {
+      ref,
+      style: {
+        position: "relative",
+        width: "fit-content",
+        display: "flex",
+        alignItems: "center",
+        gap: 12
+      },
+      children: [
+        label ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: { color: GUI_THEME.secondary, fontSize: "12px" }, children: label }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+          Button,
+          {
+            variant: "ghost",
+            "data-testid": testId,
+            onClick: () => setOpen((value2) => !value2),
+            style: {
+              display: "flex",
+              alignItems: "center",
+              width: 100
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: value?.label ?? placeholder }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                "span",
+                {
+                  style: {
+                    marginLeft: "auto",
+                    color: GUI_THEME.dim,
+                    fontSize: "12px",
+                    display: "inline-block",
+                    transform: open ? "rotate(90deg)" : "rotate(0deg)",
+                    transition: "transform 120ms ease"
+                  },
+                  children: "\u276F"
+                }
+              )
+            ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        open && items.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "div",
           {
             style: {
-              position: "relative",
-              zIndex: 1,
-              height: "100%",
-              display: "flex",
-              flexDirection: "column",
-              minHeight: 0
+              position: "absolute",
+              top: 28,
+              left: label ? 62 : 0,
+              minWidth: 220,
+              background: GUI_THEME.bg,
+              border: `1px solid ${GUI_THEME.line}`,
+              borderRadius: 8,
+              boxShadow: "0 12px 32px rgba(0, 0, 0, 0.35)",
+              padding: 6,
+              zIndex: 10
             },
-            children
+            children: items.map((item) => {
+              const selected = item.id === value?.id;
+              return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                "button",
+                {
+                  type: "button",
+                  "data-testid": testId ? `${testId}-option` : void 0,
+                  onClick: () => {
+                    setOpen(false);
+                    onSelect(item.id);
+                  },
+                  style: {
+                    width: "100%",
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                    border: "none",
+                    background: selected ? GUI_THEME.line : "transparent",
+                    color: selected ? GUI_THEME.accent : GUI_THEME.primary,
+                    fontFamily: "inherit",
+                    fontSize: 11,
+                    textAlign: "left",
+                    padding: "8px 10px",
+                    borderRadius: 6,
+                    cursor: "pointer"
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: item.label }),
+                    selected ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: "\u2713" }) : null
+                  ]
+                },
+                item.id
+              );
+            })
           }
-        )
+        ) : null
       ]
     }
   );
 };
 
 // source/gui/client/components/User.tsx
-var import_jsx_runtime6 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime9 = __toESM(require_jsx_runtime(), 1);
 var User = ({
   user,
   index: index2,
   isFocus
-}) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
   "span",
   {
     title: user.name,
@@ -25325,19 +25579,20 @@ var User = ({
 );
 
 // source/version.ts
-var EPIQ_VERSION = "1.4.5";
+var EPIQ_VERSION = "1.5.0";
 
 // source/gui/client/components/Header.tsx
-var import_jsx_runtime7 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime10 = __toESM(require_jsx_runtime(), 1);
 var Header = ({
   state,
-  connected,
+  connection,
+  onReconnect,
   scrubbing,
   syncStatus
 }) => {
-  const syncColor = syncStatus.status === "synced" ? GUI_THEME.green : syncStatus.status === "failed" ? GUI_THEME.red : GUI_THEME.accent;
+  const syncColor = syncStatus.status === "synced" ? GUI_THEME.green : syncStatus.status === "failed" ? GUI_THEME.red : syncStatus.status === "offline" ? GUI_THEME.dim : GUI_THEME.accent;
   const syncLabel = syncStatus.status === "failed" ? "-" : syncStatus.msg.toLowerCase();
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     Panel,
     {
       as: "header",
@@ -25351,7 +25606,7 @@ var Header = ({
         borderRight: "none",
         borderTop: "none"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
         "div",
         {
           style: {
@@ -25362,7 +25617,7 @@ var Header = ({
             justifyContent: "space-between"
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
               "div",
               {
                 style: {
@@ -25373,7 +25628,7 @@ var Header = ({
                 children: ":epiq"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
               "div",
               {
                 style: {
@@ -25382,7 +25637,7 @@ var Header = ({
                   gap: 24
                 },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                     "div",
                     {
                       style: {
@@ -25393,11 +25648,11 @@ var Header = ({
                         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: "|" })
+                        scrubbing && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: { color: GUI_THEME.accent, fontWeight: 700 }, children: "Read-only" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: { color: GUI_THEME.dim }, children: "|" })
                         ] }),
-                        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+                        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                           "span",
                           {
                             style: {
@@ -25407,7 +25662,7 @@ var Header = ({
                               justifyContent: "flex-end"
                             },
                             children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                                 "span",
                                 {
                                   title: syncStatus.status === "failed" ? syncStatus.msg : void 0,
@@ -25419,14 +25674,14 @@ var Header = ({
                                     whiteSpace: "nowrap",
                                     textAlign: "right"
                                   },
-                                  children: connected ? syncLabel : "-"
+                                  children: connection === "connected" ? syncLabel : "-"
                                 }
                               ),
-                              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                                 "span",
                                 {
                                   style: {
-                                    color: connected ? syncColor : GUI_THEME.dim,
+                                    color: connection === "connected" ? syncColor : GUI_THEME.dim,
                                     fontSize: 4
                                   },
                                   children: "\u25CF"
@@ -25435,18 +25690,31 @@ var Header = ({
                             ]
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: { color: GUI_THEME.dim }, children: "|" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: { color: GUI_THEME.dim }, children: "|" }),
+                        connection === "connected" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: { color: GUI_THEME.dim }, children: "connected" }) : connection === "connecting" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: { color: GUI_THEME.dim }, children: "connecting\u2026" }) : connection === "reconnecting" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                           "span",
                           {
-                            style: {
-                              color: GUI_THEME.dim
-                            },
-                            children: connected ? "connected" : "disconnected"
+                            "data-testid": "reconnecting",
+                            style: { color: GUI_THEME.accent },
+                            children: "reconnecting\u2026"
                           }
+                        ) : (
+                          // The button alone says it: an offer to reconnect only makes
+                          // sense if the connection is gone.
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                            Button,
+                            {
+                              "data-testid": "connection-lost",
+                              variant: "ghost",
+                              onClick: onReconnect,
+                              title: "Not connected \u2014 reconnect now",
+                              style: { color: GUI_THEME.red, fontSize: 10 },
+                              children: "reconnect"
+                            }
+                          )
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: { color: GUI_THEME.dim }, children: "|" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: { color: GUI_THEME.dim }, children: "|" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                           "span",
                           {
                             style: {
@@ -25458,7 +25726,7 @@ var Header = ({
                       ]
                     }
                   ),
-                  state?.user && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(User, { user: state.user })
+                  state?.user && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(User, { user: state.user })
                 ]
               }
             )
@@ -25470,14 +25738,14 @@ var Header = ({
 };
 
 // source/gui/client/components/IssueDetails.tsx
-var import_react10 = __toESM(require_react(), 1);
+var import_react11 = __toESM(require_react(), 1);
 
 // source/gui/client/components/ManageContributorsModal.tsx
-var import_react5 = __toESM(require_react(), 1);
+var import_react6 = __toESM(require_react(), 1);
 
 // source/gui/client/components/IconLock.tsx
-var import_jsx_runtime8 = __toESM(require_jsx_runtime(), 1);
-var IconLock = ({ size = 13 }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+var import_jsx_runtime11 = __toESM(require_jsx_runtime(), 1);
+var IconLock = ({ size = 13 }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
   "svg",
   {
     width: size,
@@ -25490,16 +25758,16 @@ var IconLock = ({ size = 13 }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     strokeLinejoin: "round",
     "aria-hidden": "true",
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2", ry: "2" }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("circle", { cx: "12", cy: "16.5", r: "2.1", fill: "currentColor", stroke: "none" })
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2", ry: "2" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("circle", { cx: "12", cy: "16.5", r: "2.1", fill: "currentColor", stroke: "none" })
     ]
   }
 );
 
 // source/gui/client/components/IconTrash.tsx
-var import_jsx_runtime9 = __toESM(require_jsx_runtime(), 1);
-var IconTrash = ({ size = 14 }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+var import_jsx_runtime12 = __toESM(require_jsx_runtime(), 1);
+var IconTrash = ({ size = 14 }) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
   "svg",
   {
     width: size,
@@ -25512,24 +25780,24 @@ var IconTrash = ({ size = 14 }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)
     strokeLinejoin: "round",
     "aria-hidden": "true",
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("polyline", { points: "3 6 5 6 21 6" }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: "10", y1: "11", x2: "10", y2: "17" }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: "14", y1: "11", x2: "14", y2: "17" })
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("polyline", { points: "3 6 5 6 21 6" }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("line", { x1: "10", y1: "11", x2: "10", y2: "17" }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("line", { x1: "14", y1: "11", x2: "14", y2: "17" })
     ]
   }
 );
 
 // source/gui/client/components/ManageContributorsModal.tsx
-var import_jsx_runtime10 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime13 = __toESM(require_jsx_runtime(), 1);
 var ManageContributorsModal = ({
   contributors,
   onRemove,
   onClose
 }) => {
-  const [armedId, setArmedId] = (0, import_react5.useState)(null);
+  const [armedId, setArmedId] = (0, import_react6.useState)(null);
   const sorted = [...contributors].sort((a, b) => a.name.localeCompare(b.name));
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     "div",
     {
       style: {
@@ -25543,7 +25811,7 @@ var ManageContributorsModal = ({
         zIndex: 1e3
       },
       onMouseDown: onClose,
-      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
         "div",
         {
           onMouseDown: (event) => event.stopPropagation(),
@@ -25559,7 +25827,7 @@ var ManageContributorsModal = ({
             gap: 14
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
               "div",
               {
                 style: {
@@ -25571,8 +25839,8 @@ var ManageContributorsModal = ({
                 children: "Manage external contributors"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { fontSize: 12, color: GUI_THEME.secondary }, children: "Remove contributors from the suggestion lists. Locked ones have contributed, so their name is in the immutable log either way." }),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { fontSize: 12, color: GUI_THEME.secondary }, children: "Remove contributors from the suggestion lists. Locked ones have contributed, so their name is in the immutable log either way." }),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
               "div",
               {
                 style: {
@@ -25585,7 +25853,7 @@ var ManageContributorsModal = ({
                 children: sorted.map((contributor) => {
                   const locked = contributor.hasAuthoredAnywhere;
                   const armed = armedId === contributor.id;
-                  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
                     "div",
                     {
                       style: {
@@ -25597,7 +25865,7 @@ var ManageContributorsModal = ({
                         borderRadius: 6
                       },
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
                           "span",
                           {
                             style: {
@@ -25611,7 +25879,7 @@ var ManageContributorsModal = ({
                             ]
                           }
                         ),
-                        locked ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                        locked ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                           "span",
                           {
                             title: "Has contributed \u2014 their name is in the immutable log either way",
@@ -25623,9 +25891,9 @@ var ManageContributorsModal = ({
                               // removable rows keep the same height.
                               padding: "3px 6px"
                             },
-                            children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(IconLock, {})
+                            children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(IconLock, {})
                           }
-                        ) : contributor.isRemoved ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: { color: GUI_THEME.dim, fontSize: 10 }, children: "removed" }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                        ) : contributor.isRemoved ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { style: { color: GUI_THEME.dim, fontSize: 10 }, children: "removed" }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
                           Button,
                           {
                             variant: "ghost",
@@ -25643,8 +25911,8 @@ var ManageContributorsModal = ({
                               borderColor: armed ? GUI_THEME.red : void 0
                             },
                             children: [
-                              armed && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: { fontSize: 10 }, children: "confirm" }),
-                              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(IconTrash, {})
+                              armed && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { style: { fontSize: 10 }, children: "confirm" }),
+                              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(IconTrash, {})
                             ]
                           }
                         )
@@ -25655,7 +25923,7 @@ var ManageContributorsModal = ({
                 })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Button, { variant: "ghost", onClick: onClose, children: "close" }) })
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Button, { variant: "ghost", onClick: onClose, children: "close" }) })
           ]
         }
       )
@@ -25664,8 +25932,8 @@ var ManageContributorsModal = ({
 };
 
 // source/gui/client/components/CopyRef.tsx
-var import_react6 = __toESM(require_react(), 1);
-var import_jsx_runtime11 = __toESM(require_jsx_runtime(), 1);
+var import_react7 = __toESM(require_react(), 1);
+var import_jsx_runtime14 = __toESM(require_jsx_runtime(), 1);
 var copyToClipboard = async (value) => {
   try {
     await navigator.clipboard.writeText(value);
@@ -25675,12 +25943,12 @@ var copyToClipboard = async (value) => {
   }
 };
 var CopyRef = ({ refValue }) => {
-  const [copied, setCopied] = (0, import_react6.useState)(false);
-  const resetTimer = (0, import_react6.useRef)(
+  const [copied, setCopied] = (0, import_react7.useState)(false);
+  const resetTimer = (0, import_react7.useRef)(
     void 0
   );
-  (0, import_react6.useEffect)(() => () => clearTimeout(resetTimer.current), []);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  (0, import_react7.useEffect)(() => () => clearTimeout(resetTimer.current), []);
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     "button",
     {
       type: "button",
@@ -25715,8 +25983,8 @@ var CopyRef = ({ refValue }) => {
 };
 
 // source/gui/client/components/FormHeader.tsx
-var import_jsx_runtime12 = __toESM(require_jsx_runtime(), 1);
-var FormHeader = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+var import_jsx_runtime15 = __toESM(require_jsx_runtime(), 1);
+var FormHeader = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
   "div",
   {
     style: {
@@ -25731,8 +25999,8 @@ var FormHeader = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)
 );
 
 // source/gui/client/components/FormPrimitives.tsx
-var import_jsx_runtime13 = __toESM(require_jsx_runtime(), 1);
-var Input = (props) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+var import_jsx_runtime16 = __toESM(require_jsx_runtime(), 1);
+var Input = (props) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
   "input",
   {
     ...props,
@@ -25750,7 +26018,7 @@ var Input = (props) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     }
   }
 );
-var Textarea = (props) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+var Textarea = (props) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
   "textarea",
   {
     maxLength: props.maxLength ?? 1500,
@@ -25772,28 +26040,28 @@ var Textarea = (props) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     }
   }
 );
-var ActionRow = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+var ActionRow = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
   "div",
   {
     style: { display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 8 },
     children
   }
 );
-var AddRow = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { display: "flex", gap: 8, marginTop: 10 }, children });
-var ChipRow = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { display: "flex", gap: 8, flexWrap: "wrap", marginTop: 10 }, children });
-var Empty = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { style: { display: "inline-block", marginTop: 8, color: GUI_THEME.dim }, children });
+var AddRow = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { display: "flex", gap: 8, marginTop: 10 }, children });
+var ChipRow = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { display: "flex", gap: 8, flexWrap: "wrap", marginTop: 10 }, children });
+var Empty = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { style: { display: "inline-block", marginTop: 8, color: GUI_THEME.dim }, children });
 
 // source/gui/client/components/IssueAttachments.tsx
-var import_react7 = __toESM(require_react(), 1);
+var import_react8 = __toESM(require_react(), 1);
 
 // source/gui/client/components/Section.tsx
-var import_jsx_runtime14 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime17 = __toESM(require_jsx_runtime(), 1);
 var Section = ({
   title,
   action,
   children,
   first = false
-}) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
   "section",
   {
     style: {
@@ -25801,7 +26069,7 @@ var Section = ({
       borderTop: first ? "none" : `1px solid ${GUI_THEME.line}`
     },
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
         "div",
         {
           style: {
@@ -25811,7 +26079,7 @@ var Section = ({
             gap: 12
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
               "span",
               {
                 style: {
@@ -25833,7 +26101,7 @@ var Section = ({
 );
 
 // source/gui/client/components/IssueAttachments.tsx
-var import_jsx_runtime15 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime18 = __toESM(require_jsx_runtime(), 1);
 var IssueAttachments = ({
   issueId,
   readonly,
@@ -25842,15 +26110,15 @@ var IssueAttachments = ({
   onUploadFiles,
   onDeleteAttachment
 }) => {
-  const [dragging, setDragging] = (0, import_react7.useState)(false);
-  const [lightbox, setLightbox] = (0, import_react7.useState)(null);
-  const [broken, setBroken] = (0, import_react7.useState)({});
-  (0, import_react7.useEffect)(() => {
+  const [dragging, setDragging] = (0, import_react8.useState)(false);
+  const [lightbox, setLightbox] = (0, import_react8.useState)(null);
+  const [broken, setBroken] = (0, import_react8.useState)({});
+  (0, import_react8.useEffect)(() => {
     setLightbox(null);
     setDragging(false);
     setBroken({});
   }, [issueId]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (!lightbox) return;
     const onKeyDown = (event) => {
       if (event.key === "Escape") setLightbox(null);
@@ -25868,12 +26136,12 @@ var IssueAttachments = ({
     );
     if (files.length > 0) onUploadFiles?.(issueId, files);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
     Section,
     {
       title: `Attachments${attachments.length ? ` (${attachments.length})` : ""}`,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
           "div",
           {
             onDragOver: (event) => {
@@ -25891,7 +26159,7 @@ var IssueAttachments = ({
               transition: "padding 0.12s ease, border-color 0.12s ease"
             },
             children: [
-              attachments.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Empty, { children: canUpload ? "No attachments \u2014 drop an image here" : "No attachments" }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              attachments.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Empty, { children: canUpload ? "No attachments \u2014 drop an image here" : "No attachments" }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                 "div",
                 {
                   style: {
@@ -25899,12 +26167,12 @@ var IssueAttachments = ({
                     flexWrap: "wrap",
                     gap: 8
                   },
-                  children: attachments.map((attachment) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+                  children: attachments.map((attachment) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
                     "div",
                     {
                       style: { position: "relative", width: 72, height: 72 },
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                           "button",
                           {
                             type: "button",
@@ -25924,7 +26192,7 @@ var IssueAttachments = ({
                               width: "100%",
                               height: "100%"
                             },
-                            children: broken[attachment.id] ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                            children: broken[attachment.id] ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                               "span",
                               {
                                 title: "Attachment unavailable (missing, corrupt, or over the size cap)",
@@ -25941,7 +26209,7 @@ var IssueAttachments = ({
                                 },
                                 children: "unavailable"
                               }
-                            ) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                            ) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                               "img",
                               {
                                 src: `/media/${attachment.fileName}`,
@@ -25958,7 +26226,7 @@ var IssueAttachments = ({
                             )
                           }
                         ),
-                        attachment.canDelete && !readonly && onDeleteAttachment && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                        attachment.canDelete && !readonly && onDeleteAttachment && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                           "button",
                           {
                             type: "button",
@@ -25988,7 +26256,7 @@ var IssueAttachments = ({
                   ))
                 }
               ),
-              canUpload && attachments.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              canUpload && attachments.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                 "div",
                 {
                   style: {
@@ -25999,7 +26267,7 @@ var IssueAttachments = ({
                   children: "drop an image to attach"
                 }
               ),
-              uploadStatus.state === "uploading" && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+              uploadStatus.state === "uploading" && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
                 "div",
                 {
                   style: {
@@ -26014,7 +26282,7 @@ var IssueAttachments = ({
                   ]
                 }
               ),
-              uploadStatus.state === "error" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              uploadStatus.state === "error" && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                 "div",
                 {
                   style: {
@@ -26028,7 +26296,7 @@ var IssueAttachments = ({
             ]
           }
         ),
-        lightbox && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+        lightbox && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
           "div",
           {
             onClick: () => setLightbox(null),
@@ -26045,7 +26313,7 @@ var IssueAttachments = ({
               cursor: "zoom-out"
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                 "img",
                 {
                   src: `/media/${lightbox.fileName}`,
@@ -26058,7 +26326,7 @@ var IssueAttachments = ({
                   }
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { style: { color: GUI_THEME.secondary, fontSize: 11 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { color: GUI_THEME.secondary, fontSize: 11 }, children: [
                 lightbox.name,
                 " \xB7 ",
                 Math.max(1, Math.round(lightbox.bytes / 1024)),
@@ -26074,7 +26342,7 @@ var IssueAttachments = ({
 };
 
 // source/gui/client/components/IssueComments.tsx
-var import_react9 = __toESM(require_react(), 1);
+var import_react10 = __toESM(require_react(), 1);
 
 // source/gui/client/lib/gui-format.helper.ts
 var timeAgo = (timestampMs) => {
@@ -26094,6 +26362,10 @@ var timeAgo = (timestampMs) => {
   }
   return "just now";
 };
+var formatAbsolute = (timestampMs) => new Date(timestampMs).toLocaleString(void 0, {
+  dateStyle: "medium",
+  timeStyle: "short"
+});
 
 // node_modules/devlop/lib/default.js
 function ok() {
@@ -27730,11 +28002,11 @@ function addChildren(props, children) {
     }
   }
 }
-function productionCreate(_, jsx37, jsxs25) {
+function productionCreate(_, jsx42, jsxs30) {
   return create2;
   function create2(_2, type, props, key) {
     const isStaticChildren = Array.isArray(props.children);
-    const fn = isStaticChildren ? jsxs25 : jsx37;
+    const fn = isStaticChildren ? jsxs30 : jsx42;
     return key ? fn(type, props, key) : fn(type, props);
   }
 }
@@ -27979,8 +28251,8 @@ var urlAttributes = {
 };
 
 // node_modules/react-markdown/lib/index.js
-var import_jsx_runtime16 = __toESM(require_jsx_runtime(), 1);
-var import_react8 = __toESM(require_react(), 1);
+var import_jsx_runtime19 = __toESM(require_jsx_runtime(), 1);
+var import_react9 = __toESM(require_react(), 1);
 
 // node_modules/mdast-util-to-string/lib/index.js
 var emptyOptions2 = {};
@@ -35654,11 +35926,11 @@ function post(tree, options) {
   }
   visit(tree, transform);
   return toJsxRuntime(tree, {
-    Fragment: import_jsx_runtime16.Fragment,
+    Fragment: import_jsx_runtime19.Fragment,
     components: components2,
     ignoreInvalidStyle: true,
-    jsx: import_jsx_runtime16.jsx,
-    jsxs: import_jsx_runtime16.jsxs,
+    jsx: import_jsx_runtime19.jsx,
+    jsxs: import_jsx_runtime19.jsxs,
     passKeys: true,
     passNode: true
   });
@@ -38781,16 +39053,16 @@ function remarkGfm(options) {
 }
 
 // source/gui/client/components/MarkdownContent.tsx
-var import_jsx_runtime17 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime20 = __toESM(require_jsx_runtime(), 1);
 var components = {
-  p: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { style: { margin: "0 0 14px" }, children }),
-  ul: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("ul", { style: { margin: "0 0 14px", paddingLeft: 20 }, children }),
-  ol: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("ol", { style: { margin: "0 0 14px", paddingLeft: 20 }, children }),
-  li: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("li", { style: { margin: "2px 0" }, children }),
-  h1: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h1", { style: { fontSize: 16, margin: "0 0 14px" }, children }),
-  h2: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h2", { style: { fontSize: 14, margin: "0 0 14px" }, children }),
-  h3: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h3", { style: { fontSize: 13, margin: "0 0 14px" }, children }),
-  a: ({ children, href }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  p: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { style: { margin: "0 0 14px" }, children }),
+  ul: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("ul", { style: { margin: "0 0 14px", paddingLeft: 20 }, children }),
+  ol: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("ol", { style: { margin: "0 0 14px", paddingLeft: 20 }, children }),
+  li: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("li", { style: { margin: "2px 0" }, children }),
+  h1: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("h1", { style: { fontSize: 16, margin: "0 0 14px" }, children }),
+  h2: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("h2", { style: { fontSize: 14, margin: "0 0 14px" }, children }),
+  h3: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("h3", { style: { fontSize: 13, margin: "0 0 14px" }, children }),
+  a: ({ children, href }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "a",
     {
       href,
@@ -38800,7 +39072,7 @@ var components = {
       children
     }
   ),
-  blockquote: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  blockquote: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "blockquote",
     {
       style: {
@@ -38814,7 +39086,7 @@ var components = {
   ),
   code: ({ children, className }) => {
     const isBlock = Boolean(className);
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       "code",
       {
         style: {
@@ -38831,8 +39103,8 @@ var components = {
       }
     );
   },
-  pre: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("pre", { style: { margin: "0 0 14px" }, children }),
-  hr: () => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  pre: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("pre", { style: { margin: "0 0 14px" }, children }),
+  hr: () => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "hr",
     {
       style: {
@@ -38846,7 +39118,7 @@ var components = {
 var MarkdownContent = ({
   content: content3,
   softBreaks = false
-}) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
   "div",
   {
     style: {
@@ -38859,7 +39131,7 @@ var MarkdownContent = ({
       // collapsing, so the container doesn't end in dead whitespace.
       marginBottom: -14
     },
-    children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       Markdown,
       {
         remarkPlugins: softBreaks ? [remarkGfm, remarkBreaks] : [remarkGfm],
@@ -38874,7 +39146,7 @@ var MarkdownContent = ({
 var MAX_COMMENT_LENGTH = 4e3;
 
 // source/gui/client/components/IssueComments.tsx
-var import_jsx_runtime18 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime21 = __toESM(require_jsx_runtime(), 1);
 var IssueComments = ({
   whoAmI,
   issueId,
@@ -38883,7 +39155,7 @@ var IssueComments = ({
   onAddComment,
   onDeleteComment
 }) => {
-  const [body, setBody] = (0, import_react9.useState)("");
+  const [body, setBody] = (0, import_react10.useState)("");
   const length = body.trim().length;
   const tooLong = length > MAX_COMMENT_LENGTH;
   const addComment = () => {
@@ -38892,8 +39164,8 @@ var IssueComments = ({
     onAddComment?.(issueId, nextBody);
     setBody("");
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { children: [
-    comments.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Empty, { children: "No comments" }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: comments.map((comment) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { children: [
+    comments.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Empty, { children: "No comments" }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: comments.map((comment) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
       "div",
       {
         style: {
@@ -38903,7 +39175,7 @@ var IssueComments = ({
           background: GUI_THEME.tertiary
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
             "div",
             {
               style: {
@@ -38913,15 +39185,15 @@ var IssueComments = ({
                 marginBottom: 8
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { color: GUI_THEME.secondary, fontSize: 11 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { color: GUI_THEME.secondary, fontSize: 11 }, children: [
                   comment.author.name ?? "unknown",
-                  comment.createdAt && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { style: { color: GUI_THEME.dim2 }, children: [
+                  comment.createdAt && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { style: { color: GUI_THEME.dim2 }, children: [
                     " ",
                     "\xB7 ",
                     timeAgo(comment.createdAt)
                   ] })
                 ] }),
-                !readonly && comment.author.id === whoAmI.id && onDeleteComment && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                !readonly && comment.author.id === whoAmI.id && onDeleteComment && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   Button,
                   {
                     variant: "ghost",
@@ -38936,13 +39208,13 @@ var IssueComments = ({
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(MarkdownContent, { content: comment.body, softBreaks: true })
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(MarkdownContent, { content: comment.body, softBreaks: true })
         ]
       },
       comment.id
     )) }),
-    !readonly && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { marginTop: 20 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    !readonly && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { marginTop: 20 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
         Textarea,
         {
           maxLength: Number.MAX_SAFE_INTEGER,
@@ -38962,8 +39234,8 @@ var IssueComments = ({
           }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(ActionRow, { children: [
-        length > MAX_COMMENT_LENGTH / 2 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(ActionRow, { children: [
+        length > MAX_COMMENT_LENGTH / 2 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           "span",
           {
             style: {
@@ -38974,19 +39246,19 @@ var IssueComments = ({
             children: tooLong ? `${length - MAX_COMMENT_LENGTH} over the limit` : `${MAX_COMMENT_LENGTH - length} left`
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Button, { disabled: tooLong, onClick: addComment, children: "comment" })
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { disabled: tooLong, onClick: addComment, children: "comment" })
       ] })
     ] })
   ] });
 };
 
 // source/gui/client/components/Tabs.tsx
-var import_jsx_runtime19 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime22 = __toESM(require_jsx_runtime(), 1);
 var Tabs = ({
   activeTab,
   tabs,
   onChange
-}) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
   "div",
   {
     style: {
@@ -38997,7 +39269,7 @@ var Tabs = ({
     },
     children: tabs.map((tab2) => {
       const active = tab2.id === activeTab;
-      return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
         "button",
         {
           type: "button",
@@ -39015,7 +39287,7 @@ var Tabs = ({
           },
           children: [
             tab2.label,
-            typeof tab2.count === "number" && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+            typeof tab2.count === "number" && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
               "span",
               {
                 style: { color: tab2.count ? GUI_THEME.secondary : GUI_THEME.dim },
@@ -39035,11 +39307,71 @@ var Tabs = ({
   }
 );
 
+// source/gui/client/components/IssueHistory.tsx
+var import_jsx_runtime23 = __toESM(require_jsx_runtime(), 1);
+var IssueHistory = ({
+  entries,
+  onHoverEvent
+}) => {
+  if (entries.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { style: { color: GUI_THEME.dim, fontSize: 12 }, children: "No history yet" });
+  }
+  const ordered = [...entries].reverse();
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    "div",
+    {
+      "data-testid": "issue-history",
+      onMouseLeave: () => onHoverEvent(null),
+      style: { display: "flex", flexDirection: "column" },
+      children: ordered.map((entry, index2) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+        "div",
+        {
+          "data-testid": "issue-history-row",
+          onMouseEnter: () => onHoverEvent(entry.id),
+          style: {
+            display: "flex",
+            alignItems: "baseline",
+            gap: 14,
+            padding: "8px 0",
+            borderTop: index2 === 0 ? "none" : `1px solid ${GUI_THEME.line}`,
+            fontSize: 12
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(User, { user: entry.actor }),
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              "span",
+              {
+                style: {
+                  flex: 1,
+                  color: GUI_THEME.primary,
+                  fontFamily: CONTENT_FONT
+                },
+                children: entry.label
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              "span",
+              {
+                title: formatAbsolute(entry.t),
+                style: { color: GUI_THEME.dim, whiteSpace: "nowrap" },
+                children: timeAgo(entry.t)
+              }
+            )
+          ]
+        },
+        entry.id
+      ))
+    }
+  );
+};
+
 // source/gui/client/components/IssueDetails.tsx
-var import_jsx_runtime20 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime24 = __toESM(require_jsx_runtime(), 1);
 var IssueDetails = ({
   whoAmI,
   comments,
+  history,
+  onHoverHistoryEvent,
   activeTab,
   onChangeTab,
   issue,
@@ -39064,37 +39396,27 @@ var IssueDetails = ({
   knownAssignees: assignees,
   onOpenAssigneePicker
 }) => {
-  const [title, setTitle] = (0, import_react10.useState)("");
-  const [description, setDescription] = (0, import_react10.useState)("");
-  const [tagName, setTagName] = (0, import_react10.useState)("");
-  const [assigneeName, setAssigneeName] = (0, import_react10.useState)("");
-  const [managingContributors, setManagingContributors] = (0, import_react10.useState)(false);
-  const [editingTitle, setEditingTitle] = (0, import_react10.useState)(false);
-  const [editingDescription, setEditingDescription] = (0, import_react10.useState)(false);
-  const [addingTag, setAddingTag] = (0, import_react10.useState)(false);
-  const [addingAssignee, setAddingAssignee] = (0, import_react10.useState)(false);
-  const panelRef = (0, import_react10.useRef)(null);
-  const titleTextareaRef = (0, import_react10.useRef)(null);
+  const [title, setTitle] = (0, import_react11.useState)("");
+  const [description, setDescription] = (0, import_react11.useState)("");
+  const [tagName, setTagName] = (0, import_react11.useState)("");
+  const [assigneeName, setAssigneeName] = (0, import_react11.useState)("");
+  const [managingContributors, setManagingContributors] = (0, import_react11.useState)(false);
+  const [editingTitle, setEditingTitle] = (0, import_react11.useState)(false);
+  const [editingDescription, setEditingDescription] = (0, import_react11.useState)(false);
+  const [addingTag, setAddingTag] = (0, import_react11.useState)(false);
+  const [addingAssignee, setAddingAssignee] = (0, import_react11.useState)(false);
+  const panelRef = (0, import_react11.useRef)(null);
+  const titleTextareaRef = (0, import_react11.useRef)(null);
   const resizeTitleTextarea = () => {
     const el = titleTextareaRef.current;
     if (!el) return;
     el.style.height = "auto";
     el.style.height = `${el.scrollHeight}px`;
   };
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (editingTitle) resizeTitleTextarea();
   }, [editingTitle]);
-  (0, import_react10.useEffect)(() => {
-    if (!issue) return;
-    const handleClickOutside = (event) => {
-      if (panelRef.current && !panelRef.current.contains(event.target)) {
-        onClose();
-      }
-    };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, [issue, onClose]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     setTitle(issue?.title ?? "");
     setDescription(issue?.description ?? "");
     setTagName("");
@@ -39107,7 +39429,8 @@ var IssueDetails = ({
   const disabled = !issue || issue.readonly;
   const tabs = [
     { id: "overview", label: "Overview" },
-    { id: "comments", label: "Comments", count: comments.length }
+    { id: "comments", label: "Comments", count: comments.length },
+    { id: "history", label: "Log", count: history.length }
   ];
   const saveTitle = () => {
     if (disabled || !issue) return setEditingTitle(false);
@@ -39159,10 +39482,10 @@ var IssueDetails = ({
   ).filter((assignee) => !assignee.isRemoved).sort(
     (a, b) => assigneeRank(a) - assigneeRank(b) || a.name.localeCompare(b.name)
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Aside, { ref: panelRef, children: [
-    issue ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(FormHeader, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Aside, { ref: panelRef, children: [
+    issue ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(FormHeader, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           "span",
           {
             style: {
@@ -39171,12 +39494,12 @@ var IssueDetails = ({
               textTransform: "uppercase",
               letterSpacing: "0.08em"
             },
-            children: issue.ref && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CopyRef, { refValue: issue.ref })
+            children: issue.ref && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CopyRef, { refValue: issue.ref })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Button, { variant: "ghost", onClick: onClose, children: "\xD7" })
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button, { variant: "ghost", onClick: onClose, children: "\xD7" })
       ] }),
-      editingTitle ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      editingTitle ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         "textarea",
         {
           ref: titleTextareaRef,
@@ -39214,7 +39537,7 @@ var IssueDetails = ({
             marginBottom: 20
           }
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         "div",
         {
           onClick: () => !issue.readonly && setEditingTitle(true),
@@ -39230,14 +39553,30 @@ var IssueDetails = ({
           children: issue.title
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Tabs, { tabs, activeTab, onChange: onChangeTab }),
-      activeTab === "overview" && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Tabs, { tabs, activeTab, onChange: onChangeTab }),
+      activeTab === "overview" && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
+        issue.createdAt > 0 && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+          "div",
+          {
+            "data-testid": "issue-created-at",
+            title: formatAbsolute(issue.createdAt),
+            style: {
+              fontSize: 11,
+              color: GUI_THEME.dim,
+              marginBottom: 14
+            },
+            children: [
+              "Created ",
+              timeAgo(issue.createdAt)
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           Section,
           {
             first: true,
             title: "Description",
-            action: !issue.readonly && !editingDescription && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            action: !issue.readonly && !editingDescription && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
               Button,
               {
                 variant: "ghost",
@@ -39245,8 +39584,8 @@ var IssueDetails = ({
                 children: "edit"
               }
             ),
-            children: editingDescription ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            children: editingDescription ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                 Textarea,
                 {
                   value: description,
@@ -39268,11 +39607,11 @@ var IssueDetails = ({
                   }
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(ActionRow, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Button, { onClick: saveDescription, children: "save" }),
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Button, { variant: "ghost", onClick: cancelDescription, children: "cancel" })
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(ActionRow, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button, { onClick: saveDescription, children: "save" }),
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button, { variant: "ghost", onClick: cancelDescription, children: "cancel" })
               ] })
-            ] }) : issue.description ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            ] }) : issue.description ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
               "div",
               {
                 style: {
@@ -39283,18 +39622,18 @@ var IssueDetails = ({
                   background: GUI_THEME.tertiary,
                   borderRadius: 8
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(MarkdownContent, { content: issue.description })
+                children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(MarkdownContent, { content: issue.description })
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Empty, { children: "No description" })
+            ) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Empty, { children: "No description" })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
           Section,
           {
             title: "Tags",
-            action: !issue.readonly && !addingTag && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Button, { variant: "ghost", onClick: () => setAddingTag(true), children: "+" }) || addingTag && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Button, { variant: "ghost", onClick: () => setAddingTag(false), children: "-" }),
+            action: !issue.readonly && !addingTag && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button, { variant: "ghost", onClick: () => setAddingTag(true), children: "+" }) || addingTag && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button, { variant: "ghost", onClick: () => setAddingTag(false), children: "-" }),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ChipRow, { children: issue.tags.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Empty, { children: "No tags" }) : issue.tags.map((tag) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ChipRow, { children: issue.tags.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Empty, { children: "No tags" }) : issue.tags.map((tag) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
                 Button,
                 {
                   variant: "chip",
@@ -39310,7 +39649,7 @@ var IssueDetails = ({
                 },
                 tag.id
               )) }),
-              addingTag && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ChipRow, { children: availableTags.map((tag) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+              addingTag && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ChipRow, { children: availableTags.map((tag) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
                 Button,
                 {
                   variant: "chip",
@@ -39325,8 +39664,8 @@ var IssueDetails = ({
                 },
                 tag.id
               )) }),
-              addingTag && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(AddRow, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              addingTag && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(AddRow, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                   Input,
                   {
                     value: tagName,
@@ -39342,16 +39681,16 @@ var IssueDetails = ({
                     }
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Button, { onClick: addTag, children: "add" })
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button, { onClick: addTag, children: "add" })
               ] })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
           Section,
           {
             title: "Assignees",
-            action: !issue.readonly && !addingAssignee && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            action: !issue.readonly && !addingAssignee && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
               Button,
               {
                 variant: "ghost",
@@ -39361,7 +39700,7 @@ var IssueDetails = ({
                 },
                 children: "+"
               }
-            ) || addingAssignee && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            ) || addingAssignee && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
               Button,
               {
                 variant: "ghost",
@@ -39370,7 +39709,7 @@ var IssueDetails = ({
               }
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ChipRow, { children: issue.assignees.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Empty, { children: "No assignees" }) : issue.assignees.map((assignee) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ChipRow, { children: issue.assignees.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Empty, { children: "No assignees" }) : issue.assignees.map((assignee) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
                 Button,
                 {
                   variant: "chip",
@@ -39387,7 +39726,7 @@ var IssueDetails = ({
                 },
                 assignee.id
               )) }),
-              addingAssignee && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ChipRow, { children: availableAssignees.map((assignee) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+              addingAssignee && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ChipRow, { children: availableAssignees.map((assignee) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
                 Button,
                 {
                   variant: "chip",
@@ -39410,7 +39749,7 @@ var IssueDetails = ({
               )) }),
               addingAssignee && assignees.some(
                 (a) => !a.hasAuthoredAnywhere && !a.isRemoved
-              ) && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ChipRow, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              ) && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ChipRow, { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                 Button,
                 {
                   variant: "ghost",
@@ -39420,8 +39759,8 @@ var IssueDetails = ({
                   children: "manage contributors\u2026"
                 }
               ) }),
-              addingAssignee && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(AddRow, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              addingAssignee && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(AddRow, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                   Input,
                   {
                     value: assigneeName,
@@ -39437,7 +39776,7 @@ var IssueDetails = ({
                     }
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                   Button,
                   {
                     onClick: addAssignee,
@@ -39449,7 +39788,7 @@ var IssueDetails = ({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           IssueAttachments,
           {
             issueId: issue.id,
@@ -39460,16 +39799,16 @@ var IssueDetails = ({
             onDeleteAttachment
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           Section,
           {
             title: "Actions",
-            action: !issue.readonly && (issue.isClosed ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Button, { onClick: () => onReopenIssue(issue.id), children: "reopen issue" }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Button, { onClick: () => onCloseIssue(issue.id), children: "close issue" })),
+            action: !issue.readonly && (issue.isClosed ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button, { onClick: () => onReopenIssue(issue.id), children: "reopen issue" }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button, { onClick: () => onCloseIssue(issue.id), children: "close issue" })),
             children: ""
           }
         )
       ] }),
-      activeTab === "comments" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      activeTab === "comments" && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         IssueComments,
         {
           whoAmI,
@@ -39479,9 +39818,16 @@ var IssueDetails = ({
           onAddComment,
           onDeleteComment
         }
+      ),
+      activeTab === "history" && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        IssueHistory,
+        {
+          entries: history,
+          onHoverEvent: onHoverHistoryEvent
+        }
       )
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Empty, { children: "Select an issue" }),
-    managingContributors && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Empty, { children: "Select an issue" }),
+    managingContributors && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       ManageContributorsModal,
       {
         contributors: assignees,
@@ -39493,7 +39839,7 @@ var IssueDetails = ({
 };
 
 // source/gui/client/components/BulkDetails.tsx
-var import_jsx_runtime21 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime25 = __toESM(require_jsx_runtime(), 1);
 var countBy = (issues, pick) => {
   const byId = /* @__PURE__ */ new Map();
   for (const issue of issues) {
@@ -39504,6 +39850,7 @@ var countBy = (issues, pick) => {
   }
   return [...byId.values()];
 };
+var ticketWord = (count) => count === 1 ? "ticket" : "tickets";
 var BulkDetails = ({
   issues,
   knownTags,
@@ -39521,6 +39868,8 @@ var BulkDetails = ({
   onClear
 }) => {
   const total = issues.length;
+  const openCount = issues.filter((issue) => !issue.isClosed).length;
+  const closedCount = total - openCount;
   const tags = countBy(issues, (issue) => issue.tags);
   const assignees = countBy(issues, (issue) => issue.assignees);
   const availableTags = knownTags.filter(
@@ -39532,8 +39881,8 @@ var BulkDetails = ({
     )
   );
   const partial = (count) => count === total ? "" : ` ${count}/${total}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Aside, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Aside, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
       "div",
       {
         style: {
@@ -39544,16 +39893,16 @@ var BulkDetails = ({
           marginBottom: 12
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { fontSize: 13, fontWeight: 600, color: GUI_THEME.primary }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { style: { fontSize: 13, fontWeight: 600, color: GUI_THEME.primary }, children: [
             total,
             " tickets selected"
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { variant: "ghost", onClick: onClear, children: "clear" })
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Button, { variant: "ghost", onClick: onClear, children: "clear" })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Section, { title: "Tags", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ChipRow, { children: tags.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Empty, { children: "No tags" }) : tags.map(({ item, count }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Section, { title: "Tags", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ChipRow, { children: tags.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Empty, { children: "No tags" }) : tags.map(({ item, count }) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
         Button,
         {
           variant: "chip",
@@ -39568,7 +39917,7 @@ var BulkDetails = ({
         },
         item.id
       )) }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ChipRow, { children: availableTags.map((tag) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ChipRow, { children: availableTags.map((tag) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
         Button,
         {
           variant: "chip",
@@ -39582,8 +39931,8 @@ var BulkDetails = ({
         },
         tag.id
       )) }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(AddRow, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(AddRow, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           Input,
           {
             value: tagName,
@@ -39596,11 +39945,11 @@ var BulkDetails = ({
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { onClick: () => tagName.trim() && onAddTag(tagName.trim()), children: "add" })
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Button, { onClick: () => tagName.trim() && onAddTag(tagName.trim()), children: "add" })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Section, { title: "Assignees", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ChipRow, { children: assignees.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Empty, { children: "No assignees" }) : assignees.map(({ item, count }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Section, { title: "Assignees", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ChipRow, { children: assignees.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Empty, { children: "No assignees" }) : assignees.map(({ item, count }) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
         Button,
         {
           variant: "chip",
@@ -39616,7 +39965,7 @@ var BulkDetails = ({
         },
         item.id
       )) }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ChipRow, { children: availableAssignees.map((person) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ChipRow, { children: availableAssignees.map((person) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
         Button,
         {
           variant: "chip",
@@ -39630,7 +39979,7 @@ var BulkDetails = ({
         },
         person.id
       )) }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(AddRow, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(AddRow, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
         Input,
         {
           value: assigneeName,
@@ -39639,30 +39988,80 @@ var BulkDetails = ({
         }
       ) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Section, { title: "Actions", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(ChipRow, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Button, { onClick: onCloseIssues, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Section, { title: "Actions", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(ChipRow, { children: [
+      openCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Button, { onClick: onCloseIssues, children: [
         "close ",
-        total,
-        " tickets"
+        openCount,
+        " ",
+        ticketWord(openCount)
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Button, { onClick: onReopenIssues, children: [
+      closedCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Button, { onClick: onReopenIssues, children: [
         "reopen ",
-        total,
-        " tickets"
+        closedCount,
+        " ",
+        ticketWord(closedCount)
       ] })
     ] }) })
   ] });
 };
 
 // source/gui/client/components/SwimlaneColumn.tsx
-var import_react12 = __toESM(require_react(), 1);
+var import_react14 = __toESM(require_react(), 1);
 
 // source/gui/client/components/TicketCard.tsx
-var import_react11 = __toESM(require_react(), 1);
+var import_react12 = __toESM(require_react(), 1);
+
+// source/gui/client/lib/gui-move-swimlane.ts
+var SWIMLANE_DRAG_TYPE = "application/x-epiq-swimlane";
+var isSwimlaneDrag = (dataTransfer) => Boolean(dataTransfer?.types.includes(SWIMLANE_DRAG_TYPE));
+var toMovePosition = (siblings, targetIndex) => {
+  if (siblings.length === 0) return { at: "start" };
+  if (targetIndex >= siblings.length) return { at: "end" };
+  return { at: "before", sibling: siblings[Math.max(0, targetIndex)].id };
+};
+var reorder = (swimlanes, swimlaneId, targetIndex) => {
+  const moved = swimlanes.find((swimlane) => swimlane.id === swimlaneId);
+  if (!moved) return swimlanes;
+  const without = swimlanes.filter((swimlane) => swimlane.id !== swimlaneId);
+  const index2 = Math.max(0, Math.min(targetIndex, without.length));
+  return [...without.slice(0, index2), moved, ...without.slice(index2)];
+};
+var moveSwimlane = (state, setState, send) => (swimlaneId, boardId, targetIndex) => {
+  if (!state) return;
+  const board = state.boards.find((candidate) => candidate.id === boardId);
+  if (!board) return;
+  const currentIndex = board.swimlanes.findIndex(
+    (swimlane) => swimlane.id === swimlaneId
+  );
+  if (currentIndex === -1) return;
+  if (targetIndex === currentIndex || targetIndex === currentIndex + 1)
+    return;
+  const withoutMoved = board.swimlanes.filter(
+    (swimlane) => swimlane.id !== swimlaneId
+  );
+  const indexWithoutMoved = targetIndex > currentIndex ? targetIndex - 1 : targetIndex;
+  const position3 = toMovePosition(withoutMoved, indexWithoutMoved);
+  setState(
+    (current) => current ? {
+      ...current,
+      boards: current.boards.map(
+        (candidate) => candidate.id === boardId ? {
+          ...candidate,
+          swimlanes: reorder(
+            candidate.swimlanes,
+            swimlaneId,
+            indexWithoutMoved
+          )
+        } : candidate
+      )
+    } : current
+  );
+  send("swimlane:move", { swimlaneId, boardId, position: position3 });
+};
 
 // source/gui/client/components/IconComment.tsx
-var import_jsx_runtime22 = __toESM(require_jsx_runtime(), 1);
-var IconComment = ({ size = 14 }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+var import_jsx_runtime26 = __toESM(require_jsx_runtime(), 1);
+var IconComment = ({ size = 14 }) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
   "svg",
   {
     width: size,
@@ -39674,7 +40073,7 @@ var IconComment = ({ size = 14 }) => /* @__PURE__ */ (0, import_jsx_runtime22.js
     strokeLinecap: "round",
     strokeLinejoin: "round",
     "aria-hidden": "true",
-    children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       "path",
       {
         fill: "currentColor",
@@ -39685,7 +40084,7 @@ var IconComment = ({ size = 14 }) => /* @__PURE__ */ (0, import_jsx_runtime22.js
 );
 
 // source/gui/client/components/TicketCard.tsx
-var import_jsx_runtime23 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime27 = __toESM(require_jsx_runtime(), 1);
 var TicketCard = ({
   ticket,
   index: index2,
@@ -39697,8 +40096,8 @@ var TicketCard = ({
   onDragOverIssue,
   onDropIssueAt
 }) => {
-  const cardRef = (0, import_react11.useRef)(null);
-  (0, import_react11.useEffect)(() => {
+  const cardRef = (0, import_react12.useRef)(null);
+  (0, import_react12.useEffect)(() => {
     if (!isSelected) return;
     cardRef.current?.scrollIntoView({
       behavior: "smooth",
@@ -39707,7 +40106,7 @@ var TicketCard = ({
     });
   }, [isSelected]);
   const getVisualTargetIndex = (isAfterMiddle) => index2 + (isAfterMiddle ? 1 : 0);
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
     "div",
     {
       ref: cardRef,
@@ -39721,6 +40120,7 @@ var TicketCard = ({
         event.dataTransfer.setData("text/plain", ticket.id);
       },
       onDragOver: (event) => {
+        if (isSwimlaneDrag(event.dataTransfer)) return;
         event.preventDefault();
         event.dataTransfer.dropEffect = "move";
         const rect = event.currentTarget.getBoundingClientRect();
@@ -39728,6 +40128,7 @@ var TicketCard = ({
         onDragOverIssue(getVisualTargetIndex(isAfterMiddle));
       },
       onDrop: (event) => {
+        if (isSwimlaneDrag(event.dataTransfer)) return;
         event.preventDefault();
         event.stopPropagation();
         const issueId = event.dataTransfer.getData("text/plain");
@@ -39748,14 +40149,10 @@ var TicketCard = ({
         minHeight: "58px",
         borderRadius: "8px",
         marginBottom: 4,
-        border: `1px solid ${isSelected || isPicked ? GUI_THEME.accent : "transparent"}`,
-        // Only the multi-selection is outlined, so it stays legible when the
-        // details panel is closed.
-        outline: isPicked ? `1px solid ${GUI_THEME.accent}` : void 0,
-        outlineOffset: 1
+        border: `1px solid ${isSelected || isPicked ? GUI_THEME.accent : "transparent"}`
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           "div",
           {
             style: {
@@ -39769,7 +40166,7 @@ var TicketCard = ({
             children: isSelected ? "\u276F" : index2 + 1
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
           "div",
           {
             style: {
@@ -39781,7 +40178,7 @@ var TicketCard = ({
               paddingLeft: 8
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
                 "div",
                 {
                   style: {
@@ -39792,7 +40189,7 @@ var TicketCard = ({
                     flex: 1
                   },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                       "div",
                       {
                         style: {
@@ -39808,17 +40205,17 @@ var TicketCard = ({
                         children: ticket.title
                       }
                     ),
-                    ticket.ref && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                    ticket.ref && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                       "div",
                       {
                         style: {
                           color: GUI_THEME.dim2,
                           fontSize: 10
                         },
-                        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(CopyRef, { refValue: ticket.ref })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CopyRef, { refValue: ticket.ref })
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                       "div",
                       {
                         style: {
@@ -39827,7 +40224,7 @@ var TicketCard = ({
                           gap: 6,
                           alignItems: "center"
                         },
-                        children: ticket.tags.map((tag) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                        children: ticket.tags.map((tag) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                           "span",
                           {
                             style: {
@@ -39847,7 +40244,7 @@ var TicketCard = ({
                   ]
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                 "div",
                 {
                   style: {
@@ -39857,7 +40254,7 @@ var TicketCard = ({
                     flexShrink: 0,
                     paddingTop: 2
                   },
-                  children: commentCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+                  children: commentCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
                     "button",
                     {
                       type: "button",
@@ -39895,14 +40292,14 @@ var TicketCard = ({
                         event.currentTarget.style.transform = "translateY(0)";
                       },
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(IconComment, {}),
-                        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { children: commentCount })
+                        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(IconComment, {}),
+                        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { children: commentCount })
                       ]
                     }
                   )
                 }
               ),
-              ticket.assignees.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              ticket.assignees.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                 "div",
                 {
                   style: {
@@ -39912,7 +40309,7 @@ var TicketCard = ({
                     paddingTop: 2,
                     marginTop: "-4px"
                   },
-                  children: ticket.assignees.map((assignee, idx) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                  children: ticket.assignees.map((assignee, idx) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                     User,
                     {
                       user: assignee,
@@ -39931,8 +40328,130 @@ var TicketCard = ({
   );
 };
 
+// source/gui/client/components/KebabMenu.tsx
+var import_react13 = __toESM(require_react(), 1);
+var import_jsx_runtime28 = __toESM(require_jsx_runtime(), 1);
+var KebabMenu = ({
+  items,
+  testId
+}) => {
+  const [open, setOpen] = (0, import_react13.useState)(false);
+  const [hovered, setHovered] = (0, import_react13.useState)(false);
+  const ref = (0, import_react13.useRef)(null);
+  (0, import_react13.useEffect)(() => {
+    if (!open) return;
+    const close = (event) => {
+      if (ref.current && !ref.current.contains(event.target)) {
+        setOpen(false);
+      }
+    };
+    const onEscape = (event) => {
+      if (event.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("mousedown", close);
+    document.addEventListener("keydown", onEscape);
+    return () => {
+      document.removeEventListener("mousedown", close);
+      document.removeEventListener("keydown", onEscape);
+    };
+  }, [open]);
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { ref, style: { position: "relative", display: "flex" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      "button",
+      {
+        type: "button",
+        "data-testid": testId,
+        title: "Swimlane actions",
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        onClick: () => setOpen((value) => !value),
+        onMouseEnter: () => setHovered(true),
+        onMouseLeave: () => setHovered(false),
+        style: {
+          appearance: "none",
+          WebkitAppearance: "none",
+          background: hovered ? "rgba(255,255,255,0.04)" : "transparent",
+          border: `1px solid ${open || hovered ? GUI_THEME.line : "transparent"}`,
+          borderRadius: 6,
+          color: open || hovered ? GUI_THEME.secondary : GUI_THEME.dim,
+          cursor: "pointer",
+          fontFamily: "inherit",
+          fontSize: 12,
+          lineHeight: 1,
+          padding: "3px 6px",
+          outline: "none",
+          transition: "color 120ms ease, background 120ms ease"
+        },
+        children: "\u22EE"
+      }
+    ),
+    open && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      "div",
+      {
+        role: "menu",
+        style: {
+          position: "absolute",
+          top: 26,
+          right: 0,
+          minWidth: 140,
+          background: GUI_THEME.bg,
+          border: `1px solid ${GUI_THEME.line}`,
+          borderRadius: 8,
+          boxShadow: "0 12px 32px rgba(0, 0, 0, 0.35)",
+          padding: 6,
+          zIndex: 20
+        },
+        children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          MenuItem,
+          {
+            item,
+            testId: testId ? `${testId}-${item.id}` : void 0,
+            onDone: () => setOpen(false)
+          },
+          item.id
+        ))
+      }
+    )
+  ] });
+};
+var MenuItem = ({
+  item,
+  testId,
+  onDone
+}) => {
+  const [hovered, setHovered] = (0, import_react13.useState)(false);
+  const color2 = item.danger ? GUI_THEME.red : GUI_THEME.primary;
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    "button",
+    {
+      type: "button",
+      role: "menuitem",
+      "data-testid": testId,
+      onClick: () => {
+        onDone();
+        item.onSelect();
+      },
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      style: {
+        width: "100%",
+        border: "none",
+        background: hovered ? GUI_THEME.line : "transparent",
+        color: color2,
+        fontFamily: "inherit",
+        fontSize: 11,
+        textAlign: "left",
+        padding: "8px 10px",
+        borderRadius: 6,
+        cursor: "pointer"
+      },
+      children: item.label
+    }
+  );
+};
+
 // source/gui/client/components/SwimlaneColumn.tsx
-var import_jsx_runtime24 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime29 = __toESM(require_jsx_runtime(), 1);
 var COLUMN_GLOW_COLOR = "rgb(140, 176, 232)";
 var COLUMN_PADDING = 14;
 var SCROLLBAR_GUTTER_INSET = COLUMN_PADDING / 2;
@@ -39947,12 +40466,18 @@ var SwimlaneColumn = ({
   onSelectIssue,
   pickedIssueIds,
   onCreateIssue,
+  onRenameSwimlane,
+  onDeleteSwimlane,
+  dropSide,
+  onSwimlaneDragOver,
+  onSwimlaneDragEnd,
+  onDropSwimlane,
   onDropIssue,
   onDragOver,
   onDragOverIssue,
   onDragLeave
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
     Panel,
     {
       as: "section",
@@ -39979,6 +40504,11 @@ var SwimlaneColumn = ({
       onDragOver: (event) => {
         event.preventDefault();
         event.dataTransfer.dropEffect = "move";
+        if (isSwimlaneDrag(event.dataTransfer)) {
+          const rect = event.currentTarget.getBoundingClientRect();
+          const side = event.clientX < rect.left + rect.width / 2 ? "left" : "right";
+          return onSwimlaneDragOver(swimlane.id, side);
+        }
         onDragOver(swimlane.id);
         if (dropIndex === null) {
           onDragOverIssue(swimlane.id, swimlane.issues.length);
@@ -39989,9 +40519,13 @@ var SwimlaneColumn = ({
           onDragLeave();
         }
       },
+      "data-drop-side": dropSide ?? void 0,
       onDrop: (event) => {
         event.preventDefault();
         event.stopPropagation();
+        if (isSwimlaneDrag(event.dataTransfer)) {
+          return onDropSwimlane(event.dataTransfer.getData(SWIMLANE_DRAG_TYPE));
+        }
         const issueId = event.dataTransfer.getData("text/plain");
         if (!issueId) return;
         const targetIndex = dropIndex ?? swimlane.issues.length;
@@ -39999,19 +40533,46 @@ var SwimlaneColumn = ({
         onDragLeave();
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+        dropSide && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          "div",
+          {
+            "data-testid": "swimlane-drop-indicator",
+            style: {
+              position: "absolute",
+              top: 8,
+              bottom: 8,
+              [dropSide]: -1,
+              width: 2,
+              borderRadius: 999,
+              background: GUI_THEME.accent,
+              boxShadow: `0 0 12px ${GUI_THEME.accent}`,
+              zIndex: 2
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
           "header",
           {
+            draggable: !swimlane.readonly,
+            "data-testid": "swimlane-handle",
+            onDragStart: (event) => {
+              event.stopPropagation();
+              event.dataTransfer.effectAllowed = "move";
+              event.dataTransfer.setData(SWIMLANE_DRAG_TYPE, swimlane.id);
+              event.dataTransfer.setData("text/plain", "");
+            },
+            onDragEnd: onSwimlaneDragEnd,
             style: {
               height: 48,
               flexShrink: 0,
               display: "flex",
               fontSize: 12,
               justifyContent: "space-between",
-              alignItems: "center"
+              alignItems: "center",
+              cursor: swimlane.readonly ? "default" : "grab"
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
                 "div",
                 {
                   style: {
@@ -40020,50 +40581,71 @@ var SwimlaneColumn = ({
                     gap: 8
                   },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                       "span",
                       {
                         style: { color: selected ? GUI_THEME.accent : GUI_THEME.secondary },
                         children: selected ? "\u276F" : " "
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                       "strong",
                       {
                         style: { color: selected ? GUI_THEME.accent : GUI_THEME.primary },
                         children: swimlane.title
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { style: { color: GUI_THEME.dim }, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("span", { style: { color: GUI_THEME.dim }, children: [
                       "(",
                       swimlane.issues.length,
                       ")"
                     ] }),
-                    swimlane.readonly && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                    swimlane.readonly && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                       "span",
                       {
                         title: "Read-only",
                         style: { display: "flex", color: GUI_THEME.dim },
-                        children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(IconLock, {})
+                        children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(IconLock, {})
                       }
                     )
                   ]
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-                Button,
-                {
-                  variant: "ghost",
-                  onClick: () => onCreateIssue(swimlane.id),
-                  disabled: swimlane.readonly,
-                  title: "Add issue",
-                  children: "+"
-                }
-              ) })
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 2 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                  Button,
+                  {
+                    variant: "ghost",
+                    onClick: () => onCreateIssue(swimlane.id),
+                    disabled: swimlane.readonly,
+                    title: "Add issue",
+                    children: "+"
+                  }
+                ),
+                !swimlane.readonly && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                  KebabMenu,
+                  {
+                    testId: "swimlane-menu",
+                    items: [
+                      {
+                        id: "rename",
+                        label: "rename",
+                        onSelect: () => onRenameSwimlane(swimlane.id)
+                      },
+                      {
+                        id: "delete",
+                        label: "delete",
+                        danger: true,
+                        onSelect: () => onDeleteSwimlane(swimlane.id)
+                      }
+                    ]
+                  }
+                )
+              ] })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           "div",
           {
             style: {
@@ -40074,24 +40656,10 @@ var SwimlaneColumn = ({
               flex: 1,
               minHeight: 0
             },
-            children: swimlane.issues.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
-              dropIndex === 0 && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(DropIndicator, {}),
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-                "div",
-                {
-                  style: {
-                    padding: 24,
-                    textAlign: "center",
-                    color: GUI_THEME.dim,
-                    fontSize: 12
-                  },
-                  children: "Drop issue here"
-                }
-              )
-            ] }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
-              swimlane.issues.map((ticket, index2) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react12.default.Fragment, { children: [
-                dropIndex === index2 && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(DropIndicator, {}),
-                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            children: swimlane.issues.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_jsx_runtime29.Fragment, {}) : /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
+              swimlane.issues.map((ticket, index2) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_react14.default.Fragment, { children: [
+                dropIndex === index2 && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DropIndicator, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                   TicketCard,
                   {
                     ticket,
@@ -40109,7 +40677,7 @@ var SwimlaneColumn = ({
                   }
                 )
               ] }, ticket.id)),
-              dropIndex === swimlane.issues.length && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(DropIndicator, {})
+              dropIndex === swimlane.issues.length && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DropIndicator, {})
             ] })
           }
         )
@@ -40119,9 +40687,9 @@ var SwimlaneColumn = ({
 };
 
 // source/gui/client/components/GlobalScrollbarStyles.tsx
-var import_jsx_runtime25 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime30 = __toESM(require_jsx_runtime(), 1);
 var SCROLLBAR_SIZE = 3;
-var GlobalScrollbarStyles = () => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("style", { children: `
+var GlobalScrollbarStyles = () => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("style", { children: `
 		/* Gated deliberately: Chrome implements scrollbar-width/-color too, and
 		   setting either makes it ignore the ::-webkit-scrollbar rules below. */
 		@supports not selector(::-webkit-scrollbar) {
@@ -40162,8 +40730,8 @@ var GlobalScrollbarStyles = () => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
 	` });
 
 // source/gui/client/components/ErrorToast.tsx
-var import_jsx_runtime26 = __toESM(require_jsx_runtime(), 1);
-var ErrorToast = ({ message, onDismiss }) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+var import_jsx_runtime31 = __toESM(require_jsx_runtime(), 1);
+var ErrorToast = ({ message, onDismiss }) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
   "div",
   {
     style: {
@@ -40184,8 +40752,8 @@ var ErrorToast = ({ message, onDismiss }) => /* @__PURE__ */ (0, import_jsx_runt
       boxShadow: "0 4px 16px rgba(0, 0, 0, 0.4)"
     },
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { style: { flex: 1, minWidth: 0, overflowWrap: "anywhere" }, children: message }),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { style: { flex: 1, minWidth: 0, overflowWrap: "anywhere" }, children: message }),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         "button",
         {
           onClick: onDismiss,
@@ -40206,7 +40774,7 @@ var ErrorToast = ({ message, onDismiss }) => /* @__PURE__ */ (0, import_jsx_runt
 );
 
 // source/gui/client/components/TimeScrubber.tsx
-var import_react15 = __toESM(require_react(), 1);
+var import_react17 = __toESM(require_react(), 1);
 
 // source/lib/utils/date.utils.ts
 var pad = (n) => String(n).padStart(2, "0");
@@ -40219,8 +40787,9 @@ var minOf = (values, seed) => values.reduce((min, value) => value < min ? value
 var maxOf = (values, seed) => values.reduce((max, value) => value > max ? value : max, seed);
 
 // source/gui/client/lib/scrubber.ts
-var import_react13 = __toESM(require_react(), 1);
+var import_react15 = __toESM(require_react(), 1);
 var clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+var isLayoutMode = (value) => value === "even" || value === "real";
 var TRACK_HEIGHT = 24;
 var EVENTS_MODE_TOTAL_HEIGHT = 8 + TRACK_HEIGHT * 2;
 var EVENTS_SCATTER_HEIGHT = TRACK_HEIGHT + 16;
@@ -40241,12 +40810,11 @@ var bucketCountForSpan = (spanMs) => {
   );
 };
 var buildAxis = (timeline, commits, now = Date.now()) => {
-  const commitBounds = commits.length ? commits.map((c) => c.time) : [now];
-  const earliest = minOf(
-    commitBounds,
-    timeline?.buckets[0]?.t ?? timeline?.earliest ?? now
-  );
-  const latest = maxOf(commitBounds, timeline?.latest ?? now);
+  const commitTimes = commits.map((c) => c.time);
+  const windowStart = timeline?.earliest ?? minOf(commitTimes, now);
+  const windowEnd = timeline?.latest ?? maxOf(commitTimes, now);
+  const earliest = minOf(commitTimes, windowStart);
+  const latest = maxOf(commitTimes, windowEnd);
   const span = Math.max(1, latest - earliest);
   const bucketCount = bucketCountForSpan(span);
   const bucketMs = span / bucketCount;
@@ -40308,6 +40876,7 @@ var CATEGORY_BY_ACTION = {
   "add.issue.assignee": "assigning",
   "remove.issue.assignee": "assigning",
   "create.contributor": "assigning",
+  "rename.contributor": "assigning",
   "tombstone.contributor": "assigning",
   "restore.contributor": "assigning",
   "link.contributor.user": "assigning"
@@ -40353,6 +40922,7 @@ var buildEventDots = (timeline, view = "all", hiddenIds = /* @__PURE__ */ new Se
         {
           // Two events can share a millisecond, so time alone is not a key.
           key: `${entry.t}-${index2}`,
+          id: entry.id,
           t: entry.t,
           count: null,
           label: entry.label,
@@ -40373,6 +40943,7 @@ var buildEventDots = (timeline, view = "all", hiddenIds = /* @__PURE__ */ new Se
     const intensity = bucket.count / maxCount;
     return {
       key: String(bucket.t),
+      id: null,
       t: bucket.t,
       count: bucket.count,
       label: null,
@@ -40392,8 +40963,16 @@ var hourFractionForTime = (time) => {
   const date = new Date(time);
   return (date.getHours() * 60 + date.getMinutes()) / (24 * 60);
 };
-var SEGMENT_UNIT_ORDER = ["hour", "day", "week", "month", "year"];
+var SEGMENT_UNIT_ORDER = [
+  "minute",
+  "hour",
+  "day",
+  "week",
+  "month",
+  "year"
+];
 var APPROX_UNIT_MS = {
+  minute: 60 * 1e3,
   hour: 60 * 60 * 1e3,
   day: 24 * 60 * 60 * 1e3,
   week: 7 * 24 * 60 * 60 * 1e3,
@@ -40401,9 +40980,16 @@ var APPROX_UNIT_MS = {
   year: 365.25 * 24 * 60 * 60 * 1e3
 };
 var MAX_SEGMENTS = 35;
-var chooseSegmentUnit = (spanMs) => SEGMENT_UNIT_ORDER.find(
-  (unit) => spanMs / APPROX_UNIT_MS[unit] <= MAX_SEGMENTS
-) ?? "year";
+var MIN_SEGMENTS = 2;
+var chooseSegmentUnit = (spanMs) => {
+  const index2 = SEGMENT_UNIT_ORDER.findIndex(
+    (unit) => spanMs / APPROX_UNIT_MS[unit] <= MAX_SEGMENTS
+  );
+  if (index2 === -1) return "year";
+  const chosen = SEGMENT_UNIT_ORDER[index2];
+  if (spanMs / APPROX_UNIT_MS[chosen] >= MIN_SEGMENTS) return chosen;
+  return SEGMENT_UNIT_ORDER[Math.max(0, index2 - 1)];
+};
 var WEEKDAY_LABELS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
 var MONTH_LABELS = [
   "Jan",
@@ -40420,7 +41006,8 @@ var MONTH_LABELS = [
   "Dec"
 ];
 var advanceByUnit = (date, unit) => {
-  if (unit === "hour") date.setHours(date.getHours() + 1);
+  if (unit === "minute") date.setMinutes(date.getMinutes() + 1);
+  else 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);
@@ -40428,7 +41015,8 @@ var advanceByUnit = (date, unit) => {
 };
 var segmentAt = (time, unit) => {
   const start2 = new Date(time);
-  if (unit === "hour") start2.setMinutes(0, 0, 0);
+  if (unit === "minute") start2.setSeconds(0, 0);
+  else 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);
@@ -40440,7 +41028,10 @@ var segmentAt = (time, unit) => {
   const end = new Date(start2);
   advanceByUnit(end, unit);
   const lastDay = new Date(end.getTime() - 1);
-  const label = unit === "hour" ? `${WEEKDAY_LABELS[start2.getDay()]} ${String(start2.getHours()).padStart(
+  const clock = (date) => `${String(date.getHours()).padStart(2, "0")}:${String(
+    date.getMinutes()
+  ).padStart(2, "0")}`;
+  const label = unit === "minute" ? clock(start2) : 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()}`;
@@ -40452,14 +41043,23 @@ var formatInterval = (start2, end) => {
   const endLabel = isSameDay(startDate, endDate) ? formatTimeOfDay(endDate) : formatDateTime(endDate);
   return `${formatDateTime(startDate)} \u2013 ${endLabel}`;
 };
-var SCOPES = ["day", "week", "month", "year", "all"];
+var SCOPES = [
+  "hour",
+  "day",
+  "week",
+  "month",
+  "year",
+  "all"
+];
 var SCOPE_DURATION_MS = {
+  hour: 60 * 60 * 1e3,
   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 = {
+  hour: "Last hour",
   day: "Last 24 hours",
   week: "Last 7 days",
   month: "Last 30 days",
@@ -40542,10 +41142,10 @@ var SCRUBBER_KEYFRAMES = `
 `;
 var REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
 var usePrefersReducedMotion = () => {
-  const [reduced, setReduced] = (0, import_react13.useState)(
+  const [reduced, setReduced] = (0, import_react15.useState)(
     () => window.matchMedia(REDUCED_MOTION_QUERY).matches
   );
-  (0, import_react13.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     const query = window.matchMedia(REDUCED_MOTION_QUERY);
     const onChange = () => setReduced(query.matches);
     query.addEventListener("change", onChange);
@@ -40554,12 +41154,12 @@ var usePrefersReducedMotion = () => {
   return reduced;
 };
 var useExitTransition = (visible, durationMs) => {
-  const [mounted, setMounted] = (0, import_react13.useState)(visible);
-  const [leaving, setLeaving] = (0, import_react13.useState)(false);
-  const wasVisible = (0, import_react13.useRef)(visible);
-  const duration = (0, import_react13.useRef)(durationMs);
+  const [mounted, setMounted] = (0, import_react15.useState)(visible);
+  const [leaving, setLeaving] = (0, import_react15.useState)(false);
+  const wasVisible = (0, import_react15.useRef)(visible);
+  const duration = (0, import_react15.useRef)(durationMs);
   duration.current = durationMs;
-  (0, import_react13.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (visible === wasVisible.current) return;
     wasVisible.current = visible;
     if (visible) {
@@ -40578,10 +41178,10 @@ var useExitTransition = (visible, durationMs) => {
     }, duration.current);
     return () => clearTimeout(timeout);
   }, [visible]);
-  return { mounted, leaving };
+  return (0, import_react15.useMemo)(() => ({ mounted, leaving }), [mounted, leaving]);
 };
 var usePersistedFlag = (key, fallback) => {
-  const [value, setValue] = (0, import_react13.useState)(() => {
+  const [value, setValue] = (0, import_react15.useState)(() => {
     const stored = localStorage.getItem(key);
     return stored === null ? fallback : stored === "true";
   });
@@ -40608,10 +41208,10 @@ var issuePassesBoardFilter = (issue, commentAuthorIds, filter) => {
 };
 
 // source/gui/client/components/ScrubberParts.tsx
-var import_react14 = __toESM(require_react(), 1);
+var import_react16 = __toESM(require_react(), 1);
 
 // source/gui/client/components/Checkbox.tsx
-var import_jsx_runtime27 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime32 = __toESM(require_jsx_runtime(), 1);
 var Checkbox = ({
   label,
   checked,
@@ -40621,7 +41221,7 @@ var Checkbox = ({
   title
 }) => {
   const color2 = checked ? activeColor : GUI_THEME.dim;
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
     "label",
     {
       title,
@@ -40635,7 +41235,7 @@ var Checkbox = ({
         opacity: disabled ? 0.4 : 1
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
           "span",
           {
             style: {
@@ -40652,7 +41252,7 @@ var Checkbox = ({
               flexShrink: 0
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                 "input",
                 {
                   type: "checkbox",
@@ -40670,7 +41270,7 @@ var Checkbox = ({
                   }
                 }
               ),
-              checked && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+              checked && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                 "span",
                 {
                   style: {
@@ -40691,8 +41291,8 @@ var Checkbox = ({
 };
 
 // source/gui/client/components/IconBars.tsx
-var import_jsx_runtime28 = __toESM(require_jsx_runtime(), 1);
-var IconBars = ({ size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+var import_jsx_runtime33 = __toESM(require_jsx_runtime(), 1);
+var IconBars = ({ size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
   "svg",
   {
     width: size,
@@ -40704,18 +41304,18 @@ var IconBars = ({ size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)
     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" })
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("line", { x1: "3", y1: "8.5", x2: "3", y2: "15.5" }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("line", { x1: "7.5", y1: "4.5", x2: "7.5", y2: "19.5" }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("line", { x1: "12", y1: "7", x2: "12", y2: "17" }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("line", { x1: "16.5", y1: "3", x2: "16.5", y2: "21" }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.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)(
+var import_jsx_runtime34 = __toESM(require_jsx_runtime(), 1);
+var IconChevronDown = ({ size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
   "svg",
   {
     width: size,
@@ -40727,13 +41327,13 @@ var IconChevronDown = ({ size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime2
     strokeLinecap: "round",
     strokeLinejoin: "round",
     "aria-hidden": "true",
-    children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("polyline", { points: "6 9 12 15 18 9" })
+    children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("polyline", { points: "6 9 12 15 18 9" })
   }
 );
 
 // source/gui/client/components/IconChevronRight.tsx
-var import_jsx_runtime30 = __toESM(require_jsx_runtime(), 1);
-var IconChevronRight = ({ size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+var import_jsx_runtime35 = __toESM(require_jsx_runtime(), 1);
+var IconChevronRight = ({ size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
   "svg",
   {
     width: size,
@@ -40745,13 +41345,13 @@ var IconChevronRight = ({ size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime
     strokeLinecap: "round",
     strokeLinejoin: "round",
     "aria-hidden": "true",
-    children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("polyline", { points: "9 18 15 12 9 6" })
+    children: /* @__PURE__ */ (0, import_jsx_runtime35.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)(
+var import_jsx_runtime36 = __toESM(require_jsx_runtime(), 1);
+var IconScatter = ({ size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
   "svg",
   {
     width: size,
@@ -40761,17 +41361,17 @@ var IconScatter = ({ size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime31.js
     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" })
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("circle", { cx: "4.5", cy: "8", r: "2.2" }),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("circle", { cx: "9.5", cy: "17", r: "2.2" }),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("circle", { cx: "13", cy: "6.5", r: "2.2" }),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("circle", { cx: "17", cy: "14.5", r: "2.2" }),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("circle", { cx: "20.5", cy: "8.5", r: "2.2" })
     ]
   }
 );
 
 // source/gui/client/components/ScrubberParts.tsx
-var import_jsx_runtime32 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime37 = __toESM(require_jsx_runtime(), 1);
 var toggleButtonStyle = (active) => ({
   background: "transparent",
   border: `1px solid ${active ? GUI_THEME.accent : GUI_THEME.dim}`,
@@ -40781,6 +41381,20 @@ var toggleButtonStyle = (active) => ({
   padding: "2px 8px",
   cursor: "pointer"
 });
+var scopeButtonStyle = (active) => ({
+  background: "transparent",
+  border: "none",
+  borderBottom: `1px solid ${active ? GUI_THEME.accent : "transparent"}`,
+  color: active ? GUI_THEME.primary : GUI_THEME.dim,
+  borderRadius: 0,
+  fontSize: 10,
+  padding: "2px 6px 3px",
+  cursor: "pointer"
+});
+var mutedStyle = {
+  opacity: 0.4,
+  cursor: "not-allowed"
+};
 var iconToggleButtonStyle = (active) => ({
   ...toggleButtonStyle(active),
   display: "inline-flex",
@@ -40873,8 +41487,8 @@ var onlyButtonStyle = {
   cursor: "pointer"
 };
 var useDismissOnOutsideClick = (open, onDismiss) => {
-  const ref = (0, import_react14.useRef)(null);
-  (0, import_react14.useEffect)(() => {
+  const ref = (0, import_react16.useRef)(null);
+  (0, import_react16.useEffect)(() => {
     if (!open) return;
     const onPointerDown = (event) => {
       if (!ref.current?.contains(event.target)) onDismiss();
@@ -40897,7 +41511,7 @@ var Radio = ({
   color: color2,
   disabled,
   onSelect
-}) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
   "button",
   {
     type: "button",
@@ -40919,7 +41533,7 @@ var Radio = ({
       opacity: disabled ? 0.4 : 1
     },
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
         "span",
         {
           style: {
@@ -40932,7 +41546,7 @@ var Radio = ({
             justifyContent: "center",
             flexShrink: 0
           },
-          children: selected && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          children: selected && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
             "span",
             {
               style: {
@@ -40950,6 +41564,7 @@ var Radio = ({
   }
 );
 var BoardSeriesGroup = ({
+  connected,
   showIssues,
   view,
   identities,
@@ -40969,35 +41584,39 @@ var BoardSeriesGroup = ({
   const label = sole ? `${VIEW_LABELS[view]}: ${sole.name}` : partial ? `${VIEW_LABELS[view]} (multi)` : VIEW_LABELS[view];
   const color2 = sole?.color ?? (partial ? GUI_THEME.dim2 : boardViewColor(view));
   const ref = useDismissOnOutsideClick(expanded, onToggleExpanded);
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.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)(
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
             Checkbox,
             {
               label: null,
               title: "Show board events",
               checked: showIssues,
               activeColor: color2,
+              disabled: !connected,
               onChange: onChangeShowIssues
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
             "button",
             {
               type: "button",
               onClick: onToggleExpanded,
-              disabled: !showIssues,
+              disabled: !showIssues || !connected,
               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),
+              style: {
+                ...selectTriggerStyle(color2, !showIssues),
+                ...connected ? {} : mutedStyle
+              },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
                   "span",
                   {
                     style: {
@@ -41008,22 +41627,22 @@ var BoardSeriesGroup = ({
                     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 }) })
+                /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { style: { display: "inline-flex", flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(IconChevronDown, { size: 12 }) })
               ]
             }
           )
         ] }),
-        expanded && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { role: "radiogroup", style: popoverStyle, children: BOARD_VIEWS.map((option) => {
+        expanded && /* @__PURE__ */ (0, import_jsx_runtime37.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)(
+          return /* @__PURE__ */ (0, import_jsx_runtime37.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)(
+                /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 3 }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
                     Radio,
                     {
                       label: VIEW_LABELS[option],
@@ -41033,7 +41652,7 @@ var BoardSeriesGroup = ({
                       onSelect: () => onChangeView(option)
                     }
                   ),
-                  hasList && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                  hasList && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
                     "button",
                     {
                       type: "button",
@@ -41045,11 +41664,11 @@ var BoardSeriesGroup = ({
                       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 })
+                      children: open ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(IconChevronDown, { size: 12 }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(IconChevronRight, { size: 12 })
                     }
                   )
                 ] }),
-                open && identities.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                open && identities.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
                   "div",
                   {
                     style: {
@@ -41059,7 +41678,7 @@ var BoardSeriesGroup = ({
                       maxHeight: 132,
                       overflowY: "auto"
                     },
-                    children: identities.map((identity) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+                    children: identities.map((identity) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
                       "div",
                       {
                         style: {
@@ -41069,7 +41688,7 @@ var BoardSeriesGroup = ({
                           gap: 10
                         },
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
                             Checkbox,
                             {
                               label: identity.name,
@@ -41079,7 +41698,7 @@ var BoardSeriesGroup = ({
                               onChange: (next) => onToggleIdentity(identity.id, next)
                             }
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
                             "button",
                             {
                               type: "button",
@@ -41116,6 +41735,7 @@ var navButtonStyle = {
   lineHeight: 1
 };
 var ScrubberControls = ({
+  connected,
   scope,
   offset,
   periodRange,
@@ -41142,7 +41762,7 @@ var ScrubberControls = ({
   onOnlyIdentity,
   onToggleCategoriesExpanded,
   onSetIdentitiesExpanded
-}) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
   "div",
   {
     style: {
@@ -41152,18 +41772,19 @@ var ScrubberControls = ({
       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)(
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+        scope !== "all" && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 2 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
             "button",
             {
               title: "Earlier",
+              disabled: !connected,
               onClick: () => onChangeOffset(offset + 1),
-              style: navButtonStyle,
+              style: { ...navButtonStyle, ...connected ? {} : mutedStyle },
               children: "\u25C0"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
             "span",
             {
               style: {
@@ -41180,11 +41801,11 @@ var ScrubberControls = ({
               children: formatPeriodLabel(scope, offset, periodRange)
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
             "button",
             {
               title: "Later",
-              disabled: offset === 0,
+              disabled: offset === 0 || !connected,
               onClick: () => onChangeOffset(Math.max(0, offset - 1)),
               style: {
                 ...navButtonStyle,
@@ -41195,53 +41816,68 @@ var ScrubberControls = ({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { style: { display: "flex", gap: 2 }, children: SCOPES.map((option) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { style: { display: "flex", gap: 2 }, children: SCOPES.map((option) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
           "button",
           {
+            "aria-pressed": scope === option,
+            disabled: !connected,
             onClick: () => onChangeScope(option),
-            style: toggleButtonStyle(scope === option),
+            style: {
+              ...scopeButtonStyle(scope === option),
+              ...connected ? {} : mutedStyle
+            },
             children: scopeButtonLabel(option)
           },
           option
         )) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { style: { display: "flex", gap: 2 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { style: { display: "flex", gap: 2 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.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",
+            disabled: !connected,
             onClick: () => onChangeLayoutMode("even"),
-            style: iconToggleButtonStyle(layoutMode === "even"),
-            children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(IconBars, { size: 13 })
+            style: {
+              ...iconToggleButtonStyle(layoutMode === "even"),
+              ...connected ? {} : mutedStyle
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(IconBars, { size: 13 })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime37.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",
+            disabled: !connected,
             onClick: () => onChangeLayoutMode("real"),
-            style: iconToggleButtonStyle(layoutMode === "real"),
-            children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(IconScatter, { size: 13 })
+            style: {
+              ...iconToggleButtonStyle(layoutMode === "real"),
+              ...connected ? {} : mutedStyle
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime37.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)(
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { style: { display: "flex", gap: 12, alignItems: "center" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
           Checkbox,
           {
             label: "Code",
             checked: showCommits,
             activeColor: GUI_THEME.green,
+            disabled: !connected,
             onChange: onChangeShowCommits
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
           BoardSeriesGroup,
           {
+            connected,
             showIssues,
             view: boardView,
             identities,
@@ -41258,7 +41894,7 @@ var ScrubberControls = ({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
         "button",
         {
           onClick: onReturnToLive,
@@ -41289,7 +41925,7 @@ var ScrubberControls = ({
 var ScrubberHeader = ({
   collapsed,
   onToggleCollapsed
-}) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
   "div",
   {
     style: {
@@ -41299,7 +41935,7 @@ var ScrubberHeader = ({
       fontSize: 11,
       whiteSpace: "nowrap"
     },
-    children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       "button",
       {
         onClick: onToggleCollapsed,
@@ -41316,7 +41952,7 @@ var ScrubberHeader = ({
           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 })
+        children: collapsed ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(IconChevronRight, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(IconChevronDown, { size: 14 })
       }
     )
   }
@@ -41326,7 +41962,7 @@ var SegmentHighlight = ({
   fractionForTime
 }) => {
   const left = fractionForTime(segment.start);
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     "div",
     {
       style: {
@@ -41358,7 +41994,7 @@ var SegmentHighlight = ({
 var TrackBaseline = ({
   color: color2,
   anchor
-}) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
   "div",
   {
     style: {
@@ -41374,11 +42010,11 @@ var TrackBaseline = ({
     }
   }
 );
-var HourAxisLabels = () => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_jsx_runtime32.Fragment, { children: [
+var HourAxisLabels = () => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_jsx_runtime37.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_runtime32.jsx)(
+].map(([label, position3]) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
   "span",
   {
     style: {
@@ -41396,7 +42032,7 @@ var HourAxisLabels = () => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_
 var SeriesLayer = ({
   animate,
   children
-}) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
   "div",
   {
     style: {
@@ -41412,12 +42048,30 @@ var SeriesLayer = ({
     children
   }
 );
-var VolumeBars = ({
+var BucketHighlight = ({
+  index: index2,
+  bucketCount
+}) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  "div",
+  {
+    style: {
+      position: "absolute",
+      left: `${index2 * (100 / bucketCount)}%`,
+      top: 0,
+      bottom: 0,
+      width: `${100 / bucketCount}%`,
+      // A bucket can be thinner than a pixel at wide spans.
+      minWidth: 2,
+      background: BUCKET_HIGHLIGHT_COLOR,
+      pointerEvents: "none"
+    }
+  }
+);
+var VolumeBarsImpl = ({
   bars,
   bucketCount,
   firstBar,
   lastBar,
-  highlightedIndex,
   color: color2,
   direction,
   animate
@@ -41425,57 +42079,40 @@ var VolumeBars = ({
   const widthPercent = 100 / bucketCount;
   const barWidth = barWidthCss(bucketCount);
   const growsUp = direction === "up";
-  const [fresh, setFresh] = (0, import_react14.useState)(true);
-  (0, import_react14.useEffect)(() => {
+  const [fresh, setFresh] = (0, import_react16.useState)(true);
+  (0, import_react16.useEffect)(() => {
     const timeout = setTimeout(() => setFresh(false), BAR_ENTRANCE_TOTAL_MS);
     return () => clearTimeout(timeout);
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
-    highlightedIndex !== null && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-      "div",
-      {
-        style: {
-          position: "absolute",
-          left: `${highlightedIndex * widthPercent}%`,
-          top: 0,
-          bottom: 0,
-          width: `${widthPercent}%`,
-          // A bucket can be thinner than a pixel at wide spans.
-          minWidth: 2,
-          background: BUCKET_HIGHLIGHT_COLOR,
-          pointerEvents: "none"
-        }
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_jsx_runtime37.Fragment, { children: bars.map(({ index: index2, intensity }) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        left: `${index2 * widthPercent}%`,
+        ...growsUp ? { bottom: 0 } : { top: 0 },
+        width: barWidth,
+        height: 3 + intensity * (TRACK_HEIGHT - 3),
+        borderRadius: growsUp ? "1px 1px 0 0" : "0 0 1px 1px",
+        background: color2,
+        opacity: 0.35 + intensity * 0.65,
+        transformOrigin: growsUp ? "bottom" : "top",
+        animation: animate && fresh ? barGrowAnimation(index2, firstBar, lastBar) : void 0,
+        pointerEvents: "none"
       }
-    ),
-    bars.map(({ index: index2, intensity }) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-      "div",
-      {
-        style: {
-          position: "absolute",
-          left: `${index2 * widthPercent}%`,
-          ...growsUp ? { bottom: 0 } : { top: 0 },
-          width: barWidth,
-          height: 3 + intensity * (TRACK_HEIGHT - 3),
-          borderRadius: growsUp ? "1px 1px 0 0" : "0 0 1px 1px",
-          background: color2,
-          opacity: 0.35 + intensity * 0.65,
-          transformOrigin: growsUp ? "bottom" : "top",
-          animation: animate && fresh ? barGrowAnimation(index2, firstBar, lastBar) : void 0,
-          pointerEvents: "none"
-        }
-      },
-      index2
-    ))
-  ] });
+    },
+    index2
+  )) });
 };
+var VolumeBars = (0, import_react16.memo)(VolumeBarsImpl);
 var ScrubberNeedle = ({ fraction }) => {
-  const [hovered, setHovered] = (0, import_react14.useState)(false);
+  const [hovered, setHovered] = (0, import_react16.useState)(false);
   const hover = {
     onMouseEnter: () => setHovered(true),
     onMouseLeave: () => setHovered(false)
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       "div",
       {
         ...hover,
@@ -41495,7 +42132,7 @@ var ScrubberNeedle = ({ fraction }) => {
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       "div",
       {
         ...hover,
@@ -41525,7 +42162,7 @@ var ScrubberHoverHint = ({
   fraction,
   trackWidthPx,
   empty: empty3 = false
-}) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
   "div",
   {
     style: {
@@ -41557,8 +42194,8 @@ var ScrubberHoverHint = ({
       zIndex: 5
     },
     children: [
-      segmentLabel && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { style: { fontSize: 10, color: GUI_THEME.dim }, children: segmentLabel }),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      segmentLabel && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { style: { fontSize: 10, color: GUI_THEME.dim }, children: segmentLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
         "div",
         {
           style: {
@@ -41571,7 +42208,7 @@ var ScrubberHoverHint = ({
           children: label
         }
       ),
-      rows.map((row, index2) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      rows.map((row, index2) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
         "div",
         {
           style: {
@@ -41605,22 +42242,31 @@ var pointAt = (layers, x, y, width) => {
   }
   return best;
 };
+var DIMMED_ALPHA = 0.08;
+var HIGHLIGHT_RADIUS_SCALE = 2.2;
 var ScatterCanvas = ({
   layers,
   animate,
+  highlightId,
   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);
+  const canvasRef = (0, import_react16.useRef)(null);
+  const sizeRef = (0, import_react16.useRef)({ width: 0, height: 0 });
+  const layersRef = (0, import_react16.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 activeHighlight = (0, import_react16.useMemo)(
+    () => highlightId !== null && layers.some((layer) => layer.points.some((point4) => point4.id === highlightId)) ? highlightId : null,
+    [layers, highlightId]
+  );
+  const highlightRef = (0, import_react16.useRef)(activeHighlight);
+  highlightRef.current = activeHighlight;
+  const phasesRef = (0, import_react16.useRef)(/* @__PURE__ */ new Map());
+  const frameRef = (0, import_react16.useRef)(null);
+  const hoveredRef = (0, import_react16.useRef)(null);
+  const [entrancePlaying, setEntrancePlaying] = (0, import_react16.useState)(false);
+  const paint = (0, import_react16.useCallback)((now) => {
     const canvas = canvasRef.current;
     const context = canvas?.getContext("2d");
     if (!canvas || !context) return false;
@@ -41636,23 +42282,28 @@ var ScatterCanvas = ({
       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;
+        const highlight = highlightRef.current;
+        const isHighlighted = highlight !== null && point4.id === highlight;
+        const radiusScale = scale * (isHighlighted ? HIGHLIGHT_RADIUS_SCALE : 1);
+        const cx = point4.fraction * width;
+        const cy = EVENTS_MODE_VERTICAL_PADDING + point4.hourFraction * EVENTS_SCATTER_HEIGHT;
+        context.globalAlpha = highlight === null ? point4.opacity : isHighlighted ? 1 : DIMMED_ALPHA;
         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.arc(cx, cy, point4.radius * radiusScale, 0, Math.PI * 2);
         context.fill();
+        if (isHighlighted) {
+          context.globalAlpha = 0.25;
+          context.beginPath();
+          context.arc(cx, cy, point4.radius * radiusScale * 2.4, 0, Math.PI * 2);
+          context.fill();
+        }
       }
     }
     context.globalAlpha = 1;
     return running;
   }, []);
-  const run = (0, import_react14.useCallback)(() => {
+  const run = (0, import_react16.useCallback)(() => {
     if (frameRef.current !== null) return;
     const step = () => {
       frameRef.current = null;
@@ -41662,7 +42313,7 @@ var ScatterCanvas = ({
     };
     frameRef.current = requestAnimationFrame(step);
   }, [paint]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     const canvas = canvasRef.current;
     const parent = canvas?.parentElement;
     if (!canvas || !parent) return;
@@ -41683,7 +42334,7 @@ var ScatterCanvas = ({
     return () => observer.disconnect();
   }, [paint]);
   const signature = layers.map((layer) => `${layer.id}:${layer.generation}:${layer.leaving}`).join("|");
-  (0, import_react14.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     const seen = /* @__PURE__ */ new Set();
     for (const layer of layers) {
       seen.add(layer.id);
@@ -41708,10 +42359,10 @@ var ScatterCanvas = ({
     if (animate) run();
     else paint(performance.now());
   }, [signature, animate, run, paint]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (frameRef.current === null) paint(performance.now());
-  }, [layers, paint]);
-  (0, import_react14.useEffect)(
+  }, [layers, activeHighlight, paint]);
+  (0, import_react16.useEffect)(
     () => () => {
       if (frameRef.current !== null) cancelAnimationFrame(frameRef.current);
     },
@@ -41726,11 +42377,13 @@ var ScatterCanvas = ({
       rect.width
     );
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     "canvas",
     {
       ref: canvasRef,
+      "data-testid": "scatter-canvas",
       "data-entrance": entrancePlaying ? "playing" : "done",
+      "data-highlight": activeHighlight ?? "",
       style: { position: "absolute", inset: 0 },
       onMouseMove: (event) => {
         const point4 = hitTest(event);
@@ -41755,7 +42408,8 @@ var ScatterCanvas = ({
 };
 
 // source/gui/client/components/ScrubberLayout.tsx
-var import_jsx_runtime33 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime38 = __toESM(require_jsx_runtime(), 1);
+var DAY_MS2 = 24 * 60 * 60 * 1e3;
 var ScrubberLayout = ({
   collapsed,
   onToggleCollapsed,
@@ -41763,7 +42417,7 @@ var ScrubberLayout = ({
   chart
 }) => {
   const { axis, layoutMode, animate, windowKey, on } = chart;
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
     Panel,
     {
       as: "div",
@@ -41780,8 +42434,8 @@ var ScrubberLayout = ({
         overflow: "visible"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("style", { children: SCRUBBER_KEYFRAMES }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("style", { children: SCRUBBER_KEYFRAMES }),
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
           "div",
           {
             style: {
@@ -41790,7 +42444,7 @@ var ScrubberLayout = ({
               gap: collapsed ? 0 : 8
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
                 "div",
                 {
                   style: {
@@ -41802,14 +42456,14 @@ var ScrubberLayout = ({
                     minHeight: 22
                   },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                       ScrubberHeader,
                       {
                         collapsed,
                         onToggleCollapsed
                       }
                     ),
-                    !collapsed && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ScrubberControls, { ...controls })
+                    !collapsed && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ScrubberControls, { ...controls })
                   ]
                 }
               ),
@@ -41817,9 +42471,10 @@ 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_runtime33.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
                 "div",
                 {
+                  "data-testid": "scrubber-track",
                   onPointerDown: on.onPointerDown,
                   onPointerMove: on.onPointerMove,
                   onPointerUp: on.onPointerEnd,
@@ -41831,17 +42486,17 @@ var ScrubberLayout = ({
                     display: "flex",
                     flexDirection: "column",
                     gap: 8,
-                    cursor: "pointer"
+                    cursor: chart.connected ? "pointer" : "default"
                   },
                   children: [
-                    chart.hoveredSegment && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                    chart.hoveredSegment && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                       SegmentHighlight,
                       {
                         segment: chart.hoveredSegment,
                         fractionForTime: axis.fractionForTime
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
                       "div",
                       {
                         ref: chart.trackRef,
@@ -41856,32 +42511,41 @@ var ScrubberLayout = ({
                           alignItems: "center"
                         },
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                             TrackBaseline,
                             {
                               color: chart.issueSeriesColor,
                               anchor: layoutMode === "even" ? "bottom" : "centre"
                             }
                           ),
-                          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,
-                              bucketCount: axis.bucketCount,
-                              firstBar: chart.issueBarRange[0],
-                              lastBar: chart.issueBarRange[1],
-                              highlightedIndex: chart.hoveredBucketIndex,
-                              color: chart.issueSeriesColor,
-                              direction: "up",
-                              animate
-                            }
-                          ) }, `issues-${windowKey}`),
-                          layoutMode === "real" && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                          layoutMode === "real" && axis.span >= DAY_MS2 && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(HourAxisLabels, {}),
+                          chart.showIssues && layoutMode === "even" && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
+                            chart.hoveredBucketIndex !== null && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+                              BucketHighlight,
+                              {
+                                index: chart.hoveredBucketIndex,
+                                bucketCount: axis.bucketCount
+                              }
+                            ),
+                            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(SeriesLayer, { animate, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+                              VolumeBars,
+                              {
+                                bars: chart.issueBars,
+                                bucketCount: axis.bucketCount,
+                                firstBar: chart.issueBarRange[0],
+                                lastBar: chart.issueBarRange[1],
+                                color: chart.issueSeriesColor,
+                                direction: "up",
+                                animate
+                              }
+                            ) }, `issues-${windowKey}`)
+                          ] }),
+                          layoutMode === "real" && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                             ScatterCanvas,
                             {
                               layers: chart.scatterLayers,
                               animate,
+                              highlightId: chart.highlightEventId,
                               onPointEnter: on.onScatterPointEnter,
                               onPointLeave: on.onScatterPointLeave,
                               onInspectCommit: on.onInspectCommit
@@ -41890,7 +42554,7 @@ var ScrubberLayout = ({
                         ]
                       }
                     ),
-                    chart.showCommits && layoutMode === "even" && chart.commits.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+                    chart.showCommits && layoutMode === "even" && chart.commits.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
                       "div",
                       {
                         onMouseEnter: on.onCommitTrackMouseEnter,
@@ -41903,15 +42567,21 @@ var ScrubberLayout = ({
                           animation: animate ? FADE_IN_ANIMATION : void 0
                         },
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TrackBaseline, { color: GUI_THEME.green, anchor: "top" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TrackBaseline, { color: GUI_THEME.green, anchor: "top" }),
+                          chart.hoveredCommitBucketIndex !== null && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+                            BucketHighlight,
+                            {
+                              index: chart.hoveredCommitBucketIndex,
+                              bucketCount: axis.bucketCount
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                             VolumeBars,
                             {
                               bars: chart.commitBars,
                               bucketCount: axis.bucketCount,
                               firstBar: chart.commitBarRange[0],
                               lastBar: chart.commitBarRange[1],
-                              highlightedIndex: chart.hoveredCommitBucketIndex,
                               color: GUI_THEME.green,
                               direction: "down",
                               animate
@@ -41921,8 +42591,8 @@ var ScrubberLayout = ({
                       },
                       `commits-${windowKey}`
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ScrubberNeedle, { fraction: chart.thumbFraction }),
-                    chart.boardHint && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ScrubberNeedle, { fraction: chart.thumbFraction }),
+                    chart.boardHint && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                       ScrubberHoverHint,
                       {
                         ...chart.boardHint,
@@ -41931,7 +42601,7 @@ var ScrubberLayout = ({
                         trackWidthPx: chart.trackWidthPx
                       }
                     ),
-                    chart.commitHint && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                    chart.commitHint && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                       ScrubberHoverHint,
                       {
                         ...chart.commitHint,
@@ -41952,10 +42622,11 @@ var ScrubberLayout = ({
 };
 
 // source/gui/client/components/TimeScrubber.tsx
-var import_jsx_runtime34 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime39 = __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 LAYOUT_MODE_STORAGE_KEY = "epiq.timeScrubber.layoutMode";
 var SCOPE_STORAGE_KEY = "epiq.timeScrubber.scope";
 var SHOW_ISSUES_STORAGE_KEY = "epiq.timeScrubber.showIssues";
 var SHOW_COMMITS_STORAGE_KEY = "epiq.timeScrubber.showCommits";
@@ -41977,6 +42648,10 @@ var readStoredHiddenIds = () => {
     return /* @__PURE__ */ new Set();
   }
 };
+var readStoredLayoutMode = () => {
+  const stored = localStorage.getItem(LAYOUT_MODE_STORAGE_KEY);
+  return isLayoutMode(stored) ? stored : "even";
+};
 var readStoredScope = () => {
   const stored = localStorage.getItem(SCOPE_STORAGE_KEY);
   return isScope(stored) ? stored : "all";
@@ -41991,16 +42666,19 @@ var TimeScrubber = ({
   onRequestHistory,
   boardId,
   connected,
+  socketEpoch,
+  highlightEventId,
   onInspectCommit,
   onBoardFilterChange
 }) => {
   const animate = !usePrefersReducedMotion();
-  const trackRef = (0, import_react15.useRef)(null);
-  const lastDispatchRef = (0, import_react15.useRef)(0);
-  const [layoutMode, setLayoutMode] = (0, import_react15.useState)("even");
-  const [scope, setScope] = (0, import_react15.useState)(readStoredScope);
-  const [offset, setOffset] = (0, import_react15.useState)(0);
-  const [dragFraction, setDragFraction] = (0, import_react15.useState)(null);
+  const trackRef = (0, import_react17.useRef)(null);
+  const lastDispatchRef = (0, import_react17.useRef)(0);
+  const lastTargetRef = (0, import_react17.useRef)(null);
+  const [layoutMode, setLayoutMode] = (0, import_react17.useState)(readStoredLayoutMode);
+  const [scope, setScope] = (0, import_react17.useState)(readStoredScope);
+  const [offset, setOffset] = (0, import_react17.useState)(0);
+  const [dragFraction, setDragFraction] = (0, import_react17.useState)(null);
   const [collapsed, setCollapsed] = usePersistedFlag(
     COLLAPSED_STORAGE_KEY,
     false
@@ -42013,8 +42691,8 @@ var TimeScrubber = ({
     SHOW_COMMITS_STORAGE_KEY,
     true
   );
-  const [boardView, setBoardView] = (0, import_react15.useState)(readStoredBoardView);
-  const [hiddenIdentityIds, setHiddenIdentityIds] = (0, import_react15.useState)(readStoredHiddenIds);
+  const [boardView, setBoardView] = (0, import_react17.useState)(readStoredBoardView);
+  const [hiddenIdentityIds, setHiddenIdentityIds] = (0, import_react17.useState)(readStoredHiddenIds);
   const [categoriesExpanded, setCategoriesExpanded] = usePersistedFlag(
     CATEGORIES_EXPANDED_STORAGE_KEY,
     false
@@ -42030,18 +42708,26 @@ var TimeScrubber = ({
   const exitMs = layoutMode === "real" && animate ? DOT_EXIT_TOTAL_MS : 0;
   const issueScatter = useExitTransition(showIssues, exitMs);
   const commitScatter = useExitTransition(showCommits, exitMs);
-  const [hoveredEvent, setHoveredEvent] = (0, import_react15.useState)(null);
-  const [pointerFraction, setPointerFraction] = (0, import_react15.useState)(null);
-  const [hoveredCommit, setHoveredCommit] = (0, import_react15.useState)(null);
-  const [hoveredBucketIndex, setHoveredBucketIndex] = (0, import_react15.useState)(
+  const [hoveredEvent, setHoveredEvent] = (0, import_react17.useState)(null);
+  const [pointerFraction, setPointerFraction] = (0, import_react17.useState)(null);
+  const [hoveredCommit, setHoveredCommit] = (0, import_react17.useState)(null);
+  const [hoveredBucketIndex, setHoveredBucketIndex] = (0, import_react17.useState)(
     null
   );
-  const [hoveredCommitBucketIndex, setHoveredCommitBucketIndex] = (0, import_react15.useState)(null);
+  const [hoveredCommitBucketIndex, setHoveredCommitBucketIndex] = (0, import_react17.useState)(null);
   const periodRange = getPeriodRange(scope, offset);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!connected) return;
-    onRequestHistory(periodRange?.start, periodRange?.end, allBoards);
-  }, [scope, offset, boardId, allBoards, connected]);
+    pendingRequestId.current = onRequestHistory(
+      periodRange?.start,
+      periodRange?.end,
+      allBoards
+    );
+  }, [scope, offset, boardId, allBoards, connected, socketEpoch]);
+  const changeLayoutMode = (next) => {
+    setLayoutMode(next);
+    localStorage.setItem(LAYOUT_MODE_STORAGE_KEY, next);
+  };
   const changeScope = (nextScope) => {
     armEntrance();
     setScope(nextScope);
@@ -42087,68 +42773,53 @@ var TimeScrubber = ({
     armEntrance();
     setAllBoards(next);
   };
-  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)(
+  const filterKey = (0, import_react17.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 entrance = (0, import_react17.useRef)(0);
+  const armed = (0, import_react17.useRef)(true);
   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;
+  const shownRef = (0, import_react17.useRef)({ timeline, commits });
+  const pendingRequestId = (0, import_react17.useRef)(null);
+  if (pendingRequestId.current !== null && historyId === pendingRequestId.current) {
+    pendingRequestId.current = null;
     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 axis = (0, import_react17.useMemo)(() => buildAxis(shown.timeline, shown.commits), [shown]);
   const categoriesFiltered = (timeline?.events.length ?? 0) > 0;
-  const identities = (0, import_react15.useMemo)(
+  const identities = (0, import_react17.useMemo)(
     () => listIdentities(shown.timeline, boardView),
     [shown, boardView]
   );
-  const soleIdentity = (0, import_react15.useMemo)(
+  const soleIdentity = (0, import_react17.useMemo)(
     () => soleVisibleIdentity(identities, hiddenIdentityIds),
     [identities, hiddenIdentityIds]
   );
-  const issueCounts = bucketIssueCounts(
-    axis,
-    shown.timeline,
-    boardView,
-    hiddenIdentityIds
+  const issueCounts = (0, import_react17.useMemo)(
+    () => bucketIssueCounts(axis, shown.timeline, boardView, hiddenIdentityIds),
+    [axis, shown, boardView, hiddenIdentityIds]
+  );
+  const commitStats = (0, import_react17.useMemo)(
+    () => bucketCommitStats(axis, shown.commits),
+    [axis, shown.commits]
   );
-  const commitStats = bucketCommitStats(axis, shown.commits);
-  const liveEventDots = (0, import_react15.useMemo)(
+  const liveEventDots = (0, import_react17.useMemo)(
     () => buildEventDots(shown.timeline, boardView, hiddenIdentityIds),
     [shown, boardView, hiddenIdentityIds]
   );
   const dragging = dragFraction !== null;
-  const commitPoints = (0, import_react15.useMemo)(
+  const commitPoints = (0, import_react17.useMemo)(
     () => shown.commits.map((commit) => ({
       key: commit.sha,
+      id: null,
       t: commit.time,
       fraction: axis.fractionForTime(commit.time),
       hourFraction: hourFractionForTime(commit.time),
@@ -42161,9 +42832,10 @@ var TimeScrubber = ({
     })),
     [shown.commits, axis]
   );
-  const issuePoints = (0, import_react15.useMemo)(
+  const issuePoints = (0, import_react17.useMemo)(
     () => liveEventDots.map((dot) => ({
       key: dot.key,
+      id: dot.id,
       t: dot.t,
       fraction: axis.fractionForTime(dot.t),
       hourFraction: hourFractionForTime(dot.t),
@@ -42175,33 +42847,42 @@ var TimeScrubber = ({
     })),
     [liveEventDots, axis]
   );
-  const boardFilter = (0, import_react15.useMemo)(
+  const boardFilter = (0, import_react17.useMemo)(
     () => buildBoardFilter(boardView, identities, hiddenIdentityIds),
     [boardView, identities, hiddenIdentityIds]
   );
-  (0, import_react15.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     onBoardFilterChange(boardFilter);
   }, [boardFilter]);
-  const maxIssueBucketCount = maxOf(issueCounts, 1);
-  const maxCommitCount = maxOf(
-    Array.from(commitStats.values(), (stats) => stats.count),
-    1
-  );
-  const issueBars = issueCounts.flatMap(
-    (count, index2) => count > 0 ? [{ index: index2, intensity: count / maxIssueBucketCount }] : []
+  const issueBars = (0, import_react17.useMemo)(() => {
+    const max = maxOf(issueCounts, 1);
+    return issueCounts.flatMap(
+      (count, index2) => count > 0 ? [{ index: index2, intensity: count / max }] : []
+    );
+  }, [issueCounts]);
+  const commitBars = (0, import_react17.useMemo)(() => {
+    const max = maxOf(
+      Array.from(commitStats.values(), (stats) => stats.count),
+      1
+    );
+    return Array.from(commitStats, ([index2, stats]) => ({
+      index: index2,
+      intensity: stats.count / max
+    }));
+  }, [commitStats]);
+  const issueBarRange = (0, import_react17.useMemo)(() => populatedRange(issueBars), [issueBars]);
+  const commitBarRange = (0, import_react17.useMemo)(
+    () => populatedRange(commitBars),
+    [commitBars]
   );
-  const commitBars = Array.from(commitStats, ([index2, stats]) => ({
-    index: index2,
-    intensity: stats.count / maxCommitCount
-  }));
-  const armedBoardId = (0, import_react15.useRef)(boardId);
-  (0, import_react15.useEffect)(() => {
+  const armedBoardId = (0, import_react17.useRef)(boardId);
+  (0, import_react17.useEffect)(() => {
     if (boardId === null || boardId === armedBoardId.current) return;
     armedBoardId.current = boardId;
     armEntrance();
   }, [boardId]);
   const windowKey = `${layoutMode}-${entrance.current}-${filterKey}`;
-  const scatterLayers = (0, import_react15.useMemo)(
+  const scatterLayers = (0, import_react17.useMemo)(
     () => [
       ...commitScatter.mounted ? [
         {
@@ -42230,11 +42911,18 @@ var TimeScrubber = ({
     return clamp((clientX - rect.left) / Math.max(1, rect.width), 0, 1);
   };
   const dispatchScrub = (fraction, force) => {
+    if (!connected) return;
+    const target = axis.fractionToTime(fraction);
+    if (target === lastTargetRef.current) return;
     const now = Date.now();
     if (!force && now - lastDispatchRef.current < SCRUB_THROTTLE_MS) return;
     lastDispatchRef.current = now;
-    onScrub(axis.fractionToTime(fraction));
+    lastTargetRef.current = target;
+    onScrub(target);
   };
+  (0, import_react17.useEffect)(() => {
+    if (timeTravel.mode !== "scrub") lastTargetRef.current = null;
+  }, [timeTravel.mode]);
   const endDrag = () => {
     if (dragFraction === null) return;
     dispatchScrub(dragFraction, true);
@@ -42251,7 +42939,7 @@ var TimeScrubber = ({
   );
   const bucketTimeAt = (index2) => index2 !== null && index2 < axis.bucketCount ? axis.bucketTimeAt(index2) : void 0;
   const centreFraction = (index2) => (index2 + 0.5) / axis.bucketCount;
-  const onScatterPointEnter = (0, import_react15.useCallback)(
+  const onScatterPointEnter = (0, import_react17.useCallback)(
     (point4) => {
       if (point4.commitSha) {
         const commit = shown.commits.find((c) => c.sha === point4.commitSha);
@@ -42271,7 +42959,7 @@ var TimeScrubber = ({
     },
     [shown.commits]
   );
-  const onScatterPointLeave = (0, import_react15.useCallback)(() => {
+  const onScatterPointLeave = (0, import_react17.useCallback)(() => {
     setHoveredEvent(null);
     setHoveredCommit(null);
   }, []);
@@ -42316,12 +43004,13 @@ 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_runtime34.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     ScrubberLayout,
     {
       collapsed,
       onToggleCollapsed: () => setCollapsed(!collapsed),
       controls: {
+        connected,
         scope,
         offset,
         periodRange,
@@ -42331,7 +43020,7 @@ var TimeScrubber = ({
         allBoards,
         onChangeScope: changeScope,
         onChangeOffset: changeOffset,
-        onChangeLayoutMode: setLayoutMode,
+        onChangeLayoutMode: changeLayoutMode,
         onChangeShowIssues: setShowIssues,
         onChangeShowCommits: setShowCommits,
         onChangeAllBoards: changeAllBoards,
@@ -42360,9 +43049,9 @@ var TimeScrubber = ({
         issueScatter,
         commitScatter,
         issueBars,
-        issueBarRange: populatedRange(issueBars),
+        issueBarRange,
         commitBars,
-        commitBarRange: populatedRange(commitBars),
+        commitBarRange,
         scatterLayers,
         issueSeriesColor: soleIdentity?.color ?? boardViewColor(boardView),
         dragging,
@@ -42373,7 +43062,9 @@ var TimeScrubber = ({
         hoveredBucketIndex,
         hoveredCommitBucketIndex,
         hoveredSegment: hoveredSegmentTime !== null ? segmentAt(hoveredSegmentTime, segmentUnit) : null,
+        connected,
         thumbFraction: dragFraction ?? confirmedFraction,
+        highlightEventId,
         trackWidthPx: trackRef.current?.clientWidth ?? 0,
         boardHint,
         commitHint,
@@ -42418,7 +43109,7 @@ var TimeScrubber = ({
 };
 
 // source/gui/client/lib/gui-move-issue.tsx
-var toMovePosition = (targetIssues, targetIndex) => {
+var toMovePosition2 = (targetIssues, targetIndex) => {
   if (targetIssues.length === 0) return { at: "start" };
   if (targetIndex === "end") return { at: "end" };
   const index2 = Math.max(0, Math.min(targetIndex, targetIssues.length));
@@ -42453,7 +43144,7 @@ var findMove = (state, issueId, parentId, targetIndex) => {
   }
   if (!movedIssue || !sourceSwimlaneId || !targetSwimlane) return null;
   const targetIssues = sourceSwimlaneId === targetSwimlane.id ? targetSwimlane.issues.filter((issue) => issue.id !== issueId) : targetSwimlane.issues;
-  const position3 = toMovePosition(targetIssues, targetIndex);
+  const position3 = toMovePosition2(targetIssues, targetIndex);
   return {
     movedIssue,
     position: position3,
@@ -42493,6 +43184,12 @@ var moveIssue = (state, setState, send) => (issueIds, parentId, targetIndex) =>
   setState((current) => current ? next : current);
 };
 
+// source/gui/client/lib/reconnect.ts
+var BASE_DELAY_MS = 500;
+var MAX_DELAY_MS = 8e3;
+var MAX_RECONNECT_ATTEMPTS = 5;
+var reconnectDelayMs = (attempt) => attempt >= MAX_RECONNECT_ATTEMPTS ? null : Math.min(MAX_DELAY_MS, BASE_DELAY_MS * 2 ** attempt);
+
 // source/lib/utils/node-ref.ts
 var NODE_REF_LENGTH = 7;
 var nodeRef = (id) => id.slice(-NODE_REF_LENGTH).toUpperCase();
@@ -42522,6 +43219,17 @@ var findIssue = (state, issueRefOrId) => findByRefOrId(
   issueRefOrId
 );
 var findBoard = (state, boardRefOrId) => findByRefOrId(state.boards, boardRefOrId);
+var updateSwimlaneInGuiState = (state, swimlaneId, updateSwimlane) => ({
+  ...state,
+  boards: state.boards.map((board) => ({
+    ...board,
+    swimlanes: board.swimlanes.flatMap((swimlane) => {
+      if (swimlane.id !== swimlaneId) return [swimlane];
+      const next = updateSwimlane(swimlane);
+      return next ? [next] : [];
+    })
+  }))
+});
 var updateIssueInGuiState = (state, issueId, updateIssue) => ({
   ...state,
   boards: state.boards.map((board) => ({
@@ -42591,6 +43299,10 @@ var createHistoryBuffer = (publish) => {
 var MUTATING_MESSAGE_TYPES = /* @__PURE__ */ new Set([
   "sync",
   "issues:create",
+  "swimlane:create",
+  "swimlane:edit:title",
+  "swimlane:delete",
+  "swimlane:move",
   "issues:move",
   "issue:close",
   "issue:reopen",
@@ -42693,11 +43405,13 @@ var blobToBase64 = (blob) => new Promise((resolve, reject) => {
 });
 
 // source/gui/client/App.tsx
-var import_jsx_runtime35 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime40 = __toESM(require_jsx_runtime(), 1);
 var EMPTY_COMMENTS = {};
-var DropIndicator = () => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+var BOARD_GUTTER = 30;
+var DropIndicator = () => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
   "div",
   {
+    "data-testid": "ticket-drop-indicator",
     style: {
       height: 2,
       background: GUI_THEME.accent,
@@ -42713,39 +43427,60 @@ var App = () => {
   const legacyIssueMatch = useMatch("/board/:boardId/:issueId");
   const issueId = issueMatch?.params.issueId ?? legacyIssueMatch?.params.issueId;
   const [searchParams, setSearchParams] = useSearchParams();
-  const [connected, setConnected] = (0, import_react16.useState)(false);
-  const [syncStatus, setSyncStatus] = (0, import_react16.useState)({
+  const [connected, setConnected] = (0, import_react18.useState)(false);
+  const [socketEpoch, setSocketEpoch] = (0, import_react18.useState)(0);
+  const [syncStatus, setSyncStatus] = (0, import_react18.useState)({
     status: "synced",
     msg: "idle"
   });
-  const [state, setState] = (0, import_react16.useState)(null);
-  const [contributors, setContributors] = (0, import_react16.useState)([]);
-  const [history, setHistory] = (0, import_react16.useState)({ requestId: 0, timeline: null, commits: [] });
-  const [historyBuffer] = (0, import_react16.useState)(() => createHistoryBuffer(setHistory));
-  const [commitInspectError, setCommitInspectError] = (0, import_react16.useState)(
+  const [state, setState] = (0, import_react18.useState)(null);
+  const [noProject, setNoProject] = (0, import_react18.useState)(null);
+  const [contributors, setContributors] = (0, import_react18.useState)([]);
+  const [history, setHistory] = (0, import_react18.useState)({ requestId: 0, timeline: null, commits: [] });
+  const [historyBuffer] = (0, import_react18.useState)(() => createHistoryBuffer(setHistory));
+  const [commitInspectError, setCommitInspectError] = (0, import_react18.useState)(
+    null
+  );
+  const [removeError, setRemoveError] = (0, import_react18.useState)(null);
+  const [actionError, setActionError] = (0, import_react18.useState)(null);
+  const [dragOverSwimlaneId, setDragOverSwimlaneId] = (0, import_react18.useState)(
+    null
+  );
+  const [dropTarget, setDropTarget] = (0, import_react18.useState)(null);
+  const [pickedIssueIds, setPickedIssueIds] = (0, import_react18.useState)([]);
+  const [boardMenuOpen, setBoardMenuOpen] = (0, import_react18.useState)(false);
+  const [createIssueModal, setCreateIssueModal] = (0, import_react18.useState)(null);
+  const [createSwimlaneTitle, setCreateSwimlaneTitle] = (0, import_react18.useState)(
     null
   );
-  const [removeError, setRemoveError] = (0, import_react16.useState)(null);
-  const [actionError, setActionError] = (0, import_react16.useState)(null);
-  const [dragOverSwimlaneId, setDragOverSwimlaneId] = (0, import_react16.useState)(
+  const [renameSwimlane, setRenameSwimlane] = (0, import_react18.useState)(null);
+  const [deleteSwimlaneId, setDeleteSwimlaneId] = (0, import_react18.useState)(null);
+  const [hoveredLogEventId, setHoveredLogEventId] = (0, import_react18.useState)(
     null
   );
-  const [dropTarget, setDropTarget] = (0, import_react16.useState)(null);
-  const [pickedIssueIds, setPickedIssueIds] = (0, import_react16.useState)([]);
-  const [boardMenuOpen, setBoardMenuOpen] = (0, import_react16.useState)(false);
-  const [createIssueModal, setCreateIssueModal] = (0, import_react16.useState)(null);
-  const boardMenuRef = (0, import_react16.useRef)(null);
-  const socketRef = (0, import_react16.useRef)(null);
-  const [mutationGate] = (0, import_react16.useState)(createMutationGate);
-  const selectedTab = searchParams.get("tab") === "comments" ? "comments" : "overview";
+  const [swimlaneDropEdge, setSwimlaneDropEdge] = (0, import_react18.useState)(null);
+  const boardMenuRef = (0, import_react18.useRef)(null);
+  const socketRef = (0, import_react18.useRef)(null);
+  const [reconnectTick, setReconnectTick] = (0, import_react18.useState)(0);
+  const [reconnectExhausted, setReconnectExhausted] = (0, import_react18.useState)(false);
+  const reconnectAttempts = (0, import_react18.useRef)(0);
+  const reconnectTimer = (0, import_react18.useRef)(null);
+  const reconnectNow = () => {
+    reconnectAttempts.current = 0;
+    setReconnectExhausted(false);
+    setReconnectTick((tick) => tick + 1);
+  };
+  const [mutationGate] = (0, import_react18.useState)(createMutationGate);
+  const tabParam = searchParams.get("tab");
+  const selectedTab = tabParam === "comments" || tabParam === "history" ? tabParam : "overview";
   const navigate = useNavigate();
   const selectedBoard = (state && boardId ? findBoard(state, boardId) : null) ?? state?.boards?.[0] ?? null;
   const selectedBoardId = selectedBoard?.id ?? null;
-  const selectedBoardIdRef = (0, import_react16.useRef)(selectedBoardId);
+  const selectedBoardIdRef = (0, import_react18.useRef)(selectedBoardId);
   selectedBoardIdRef.current = selectedBoardId;
   const boardSlug = selectedBoard?.ref ?? boardId;
   const selectedIssue = state && issueId ? findIssue(state, issueId) : null;
-  (0, import_react16.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     const onPaste = (event) => {
       if (!selectedIssue || selectedIssue.readonly) return;
       const target = event.target;
@@ -42765,9 +43500,9 @@ var App = () => {
     void navigate(`/board/${boardSlug}`);
   };
   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 [issueDetail, setIssueDetail] = (0, import_react18.useState)(null);
+  const [boardFilter, setBoardFilter] = (0, import_react18.useState)(null);
+  const { visibleSwimlanes, hiddenIssueCount } = (0, import_react18.useMemo)(() => {
     const swimlanes = selectedBoard?.swimlanes ?? [];
     if (!boardFilter) return { visibleSwimlanes: swimlanes, hiddenIssueCount: 0 };
     let hidden = 0;
@@ -42785,8 +43520,8 @@ var App = () => {
     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)(() => {
+  const [attachmentUploadStatus, setAttachmentUploadStatus] = (0, import_react18.useState)({ state: "idle" });
+  (0, import_react18.useEffect)(() => {
     if (!selectedIssue) {
       setIssueDetail(null);
       return;
@@ -42799,29 +43534,50 @@ var App = () => {
   const requestState = () => {
     sendSocketJson(socketRef.current, { type: "state:get" });
   };
-  (0, import_react16.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     const socket = new WebSocket(
       `ws://${window.location.host}/ws${boardId ? `?boardId=${boardId}` : ""}`
     );
     socketRef.current = socket;
+    let replaced = false;
     socket.addEventListener("open", () => {
       setConnected(true);
+      setSocketEpoch((epoch) => epoch + 1);
+      reconnectAttempts.current = 0;
+      setReconnectExhausted(false);
       mutationGate.reset();
       sendSocketJson(socket, { type: "state:get" });
     });
     socket.addEventListener("close", () => {
-      setConnected(false);
-      mutationGate.reset();
       if (socketRef.current === socket) {
         socketRef.current = null;
       }
+      if (replaced) return;
+      setConnected(false);
+      mutationGate.reset();
+      const delay = reconnectDelayMs(reconnectAttempts.current);
+      if (delay === null) {
+        setReconnectExhausted(true);
+        return;
+      }
+      reconnectAttempts.current += 1;
+      reconnectTimer.current = window.setTimeout(
+        () => setReconnectTick((tick) => tick + 1),
+        delay
+      );
     });
     socket.addEventListener("message", (event) => {
       const message = JSON.parse(event.data);
       mutationGate.received(message.type);
       if (message.type === "state" && !mutationGate.holdsState()) {
         const nextState = getResultValue(message.payload);
-        if (nextState) setState(nextState);
+        if (nextState) {
+          setState(nextState);
+          setNoProject(null);
+        }
+      }
+      if (message.type === "state:unavailable") {
+        setNoProject(message.payload);
       }
       if (message.type === "issue") {
         const detail = getResultValue(message.payload);
@@ -42880,19 +43636,24 @@ var App = () => {
       }
     });
     return () => {
+      replaced = true;
+      if (reconnectTimer.current !== null) {
+        clearTimeout(reconnectTimer.current);
+        reconnectTimer.current = null;
+      }
       if (socketRef.current === socket) {
         socketRef.current = null;
       }
       socket.close();
     };
-  }, [boardId, navigate]);
-  (0, import_react16.useEffect)(() => {
+  }, [boardId, navigate, reconnectTick]);
+  (0, import_react18.useEffect)(() => {
     const first = state?.boards?.[0];
     if (!boardId && first) {
       void navigate(`/board/${first.ref}`, { replace: true });
     }
   }, [boardId, state, navigate]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     const close = (event) => {
       if (boardMenuRef.current && !boardMenuRef.current.contains(event.target)) {
         setBoardMenuOpen(false);
@@ -42915,8 +43676,8 @@ var App = () => {
     );
   };
   const clearPicked = () => setPickedIssueIds([]);
-  const [bulkTagName, setBulkTagName] = (0, import_react16.useState)("");
-  const [bulkAssigneeName, setBulkAssigneeName] = (0, import_react16.useState)("");
+  const [bulkTagName, setBulkTagName] = (0, import_react18.useState)("");
+  const [bulkAssigneeName, setBulkAssigneeName] = (0, import_react18.useState)("");
   const pickedIssues = (state?.boards ?? []).flatMap((board) => board.swimlanes).flatMap((swimlane) => swimlane.issues).filter((issue) => pickedIssueIds.includes(issue.id));
   const forPicked = (act) => {
     for (const issue of pickedIssues) act(issue.id);
@@ -42926,7 +43687,7 @@ var App = () => {
     setPickedIssueIds([nextIssueId]);
     if (!boardSlug) return;
     void navigate(
-      `/board/${boardSlug}/issue/${nodeRef(nextIssueId)}?tab=overview`
+      `/board/${boardSlug}/issue/${nodeRef(nextIssueId)}?tab=${selectedTab}`
     );
   };
   const selectIssueComments = (nextIssueId) => {
@@ -43070,7 +43831,7 @@ var App = () => {
   const returnToLive = () => {
     send("time-travel:live", {});
   };
-  const requestBoardHistory = (0, import_react16.useCallback)(
+  const requestBoardHistory = (0, import_react18.useCallback)(
     (start2, end, allBoards) => {
       const window2 = start2 !== void 0 ? { start: start2, end } : void 0;
       const requestId = historyBuffer.open();
@@ -43086,33 +43847,34 @@ var App = () => {
         type: "commits:get",
         payload: { ...window2, requestId }
       });
+      return requestId;
     },
     [selectedBoardId]
   );
-  const requestContributors = (0, import_react16.useCallback)(() => {
+  const requestContributors = (0, import_react18.useCallback)(() => {
     sendSocketJson(socketRef.current, {
       type: "contributors:get",
       payload: { boardId: selectedBoardIdRef.current }
     });
   }, []);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     setContributors([]);
     setPickedIssueIds([]);
   }, [selectedBoardId]);
-  const inspectCommit = (0, import_react16.useCallback)((sha) => {
+  const inspectCommit = (0, import_react18.useCallback)((sha) => {
     sendSocketJson(socketRef.current, { type: "commit:inspect", payload: { sha } });
   }, []);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (!commitInspectError) return;
     const timeout = setTimeout(() => setCommitInspectError(null), 8e3);
     return () => clearTimeout(timeout);
   }, [commitInspectError]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (!removeError) return;
     const timeout = setTimeout(() => setRemoveError(null), 8e3);
     return () => clearTimeout(timeout);
   }, [removeError]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (!actionError) return;
     const timeout = setTimeout(() => setActionError(null), 8e3);
     return () => clearTimeout(timeout);
@@ -43138,6 +43900,81 @@ var App = () => {
       parentId
     });
   };
+  const createSwimlane = () => {
+    if (createSwimlaneTitle === null || !selectedBoard) return;
+    const title = createSwimlaneTitle.trim() || "New swimlane";
+    const boardId2 = selectedBoard.id;
+    setCreateSwimlaneTitle(null);
+    setState(
+      (prev) => prev ? {
+        ...prev,
+        boards: prev.boards.map(
+          (board) => board.id === boardId2 ? {
+            ...board,
+            swimlanes: [
+              ...board.swimlanes,
+              {
+                id: `pending-swimlane-${title}`,
+                title,
+                readonly: true,
+                issues: []
+              }
+            ]
+          } : board
+        )
+      } : prev
+    );
+    send("swimlane:create", { title, boardId: boardId2 });
+  };
+  const openRenameSwimlane = (swimlaneId) => {
+    const swimlane = visibleSwimlanes.find((x) => x.id === swimlaneId);
+    if (!swimlane) return;
+    setRenameSwimlane({ swimlaneId, title: swimlane.title });
+  };
+  const submitRenameSwimlane = () => {
+    if (!renameSwimlane) return;
+    const { swimlaneId } = renameSwimlane;
+    const title = renameSwimlane.title.trim();
+    setRenameSwimlane(null);
+    if (!title) return;
+    setState(
+      (prev) => prev ? updateSwimlaneInGuiState(prev, swimlaneId, (swimlane) => ({
+        ...swimlane,
+        title
+      })) : prev
+    );
+    send("swimlane:edit:title", { swimlaneId, title });
+  };
+  const deletingSwimlane = selectedBoard?.swimlanes.find((x) => x.id === deleteSwimlaneId) ?? null;
+  const offline = !connected && state !== null;
+  const shownSwimlanes = (0, import_react18.useMemo)(
+    () => offline ? visibleSwimlanes.map((swimlane) => ({
+      ...swimlane,
+      readonly: true,
+      issues: swimlane.issues.map((issue) => ({ ...issue, readonly: true }))
+    })) : visibleSwimlanes,
+    [offline, visibleSwimlanes]
+  );
+  const dropSwimlane = (swimlaneId) => {
+    const edge = swimlaneDropEdge;
+    setSwimlaneDropEdge(null);
+    if (!edge || !swimlaneId || !selectedBoard) return;
+    const overIndex = visibleSwimlanes.findIndex((x) => x.id === edge.swimlaneId);
+    if (overIndex === -1) return;
+    moveSwimlane(state, setState, send)(
+      swimlaneId,
+      selectedBoard.id,
+      edge.side === "left" ? overIndex : overIndex + 1
+    );
+  };
+  const confirmDeleteSwimlane = () => {
+    if (!deleteSwimlaneId) return;
+    setState(
+      (prev) => prev ? updateSwimlaneInGuiState(prev, deleteSwimlaneId, () => null) : prev
+    );
+    send("swimlane:delete", { swimlaneId: deleteSwimlaneId });
+    setDeleteSwimlaneId(null);
+  };
   const addIssueComment = (issueId2, body) => {
     setState((prev) => {
       if (!prev) return prev;
@@ -43239,7 +44076,17 @@ var App = () => {
     });
     send("issue:comment:delete", { commentId });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+  if (noProject) {
+    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+      InitProjectScreen,
+      {
+        repoRoot: noProject.repoRoot,
+        message: noProject.message,
+        onRetry: requestState
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
     "div",
     {
       style: {
@@ -43251,38 +44098,39 @@ var App = () => {
         flexDirection: "column"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(GlobalScrollbarStyles, {}),
-        commitInspectError && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(GlobalScrollbarStyles, {}),
+        commitInspectError && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
           ErrorToast,
           {
             message: `Couldn't open commit diff: ${commitInspectError}`,
             onDismiss: () => setCommitInspectError(null)
           }
         ),
-        removeError && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        removeError && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
           ErrorToast,
           {
             message: removeError,
             onDismiss: () => setRemoveError(null)
           }
         ),
-        actionError && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        actionError && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
           ErrorToast,
           {
             message: actionError,
             onDismiss: () => setActionError(null)
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
           Header,
           {
             state,
-            connected,
+            connection: connected ? "connected" : !offline ? "connecting" : reconnectExhausted ? "lost" : "reconnecting",
+            onReconnect: reconnectNow,
             scrubbing: state?.timeTravel?.mode === "scrub",
             syncStatus
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
           TimeScrubber,
           {
             timeline: history.timeline,
@@ -43290,31 +44138,33 @@ var App = () => {
             historyId: history.requestId,
             boardId: selectedBoardId,
             connected,
+            socketEpoch,
             onRequestHistory: requestBoardHistory,
             onInspectCommit: inspectCommit,
+            highlightEventId: hoveredLogEventId,
             timeTravel: state?.timeTravel ?? { mode: "live", asOfTime: null },
             onScrub: scrubToTime,
             onReturnToLive: returnToLive,
             onBoardFilterChange: setBoardFilter
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
           "div",
           {
             style: {
               display: "flex",
               flex: 1,
-              overflow: "hidden"
+              overflow: "hidden",
+              opacity: offline ? 0.55 : 1,
+              transition: "opacity 160ms ease"
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
                 "main",
                 {
                   onClick: clearPicked,
                   style: {
-                    // No bottom padding: the board row is the horizontal scroll
-                    // container, and a gap below it would strand its scrollbar.
-                    padding: "0 30px 0 30px",
+                    padding: "0 0 0 30px",
                     flex: 1,
                     minHeight: 0,
                     display: "flex",
@@ -43322,7 +44172,7 @@ var App = () => {
                     overflow: "hidden"
                   },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
                       "div",
                       {
                         style: {
@@ -43331,7 +44181,7 @@ var App = () => {
                           alignItems: "center",
                           gap: 10
                         },
-                        children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                        children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
                           Dropdown,
                           {
                             testId: "board-switcher",
@@ -43350,7 +44200,7 @@ var App = () => {
                         )
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
                       "div",
                       {
                         style: {
@@ -43362,7 +44212,7 @@ var App = () => {
                           overflowY: "hidden"
                         },
                         children: [
-                          visibleSwimlanes.map((swimlane) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                          shownSwimlanes.map((swimlane) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
                             SwimlaneColumn,
                             {
                               swimlane,
@@ -43374,6 +44224,12 @@ var App = () => {
                               onSelectIssue: selectIssue,
                               onSelectIssueComments: selectIssueComments,
                               onCreateIssue: openCreateIssueModal,
+                              onRenameSwimlane: openRenameSwimlane,
+                              onDeleteSwimlane: setDeleteSwimlaneId,
+                              dropSide: swimlaneDropEdge?.swimlaneId === swimlane.id ? swimlaneDropEdge.side : null,
+                              onSwimlaneDragOver: (swimlaneId, side) => setSwimlaneDropEdge({ swimlaneId, side }),
+                              onSwimlaneDragEnd: () => setSwimlaneDropEdge(null),
+                              onDropSwimlane: dropSwimlane,
                               onDropIssue: (issueId2, swimlaneId, targetIndex) => {
                                 const moving = pickedIssueIds.includes(issueId2) ? pickedIssueIds : [issueId2];
                                 moveIssue(state, setState, send)(
@@ -43390,14 +44246,16 @@ var App = () => {
                             },
                             swimlane.id
                           )),
-                          !(selectedIssue && state?.user) && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { style: { width: ASIDE_WIDTH, flexShrink: 0 } })
+                          selectedBoard && !selectedBoard.readonly && !offline && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(AddSwimlaneColumn, { onClick: () => setCreateSwimlaneTitle("") }),
+                          !(selectedIssue && state?.user) && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { style: { width: ASIDE_WIDTH, flexShrink: 0 } }),
+                          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { style: { width: BOARD_GUTTER, flexShrink: 0 } })
                         ]
                       }
                     )
                   ]
                 }
               ),
-              pickedIssues.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+              pickedIssues.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
                 BulkDetails,
                 {
                   issues: pickedIssues,
@@ -43415,23 +44273,32 @@ var App = () => {
                   onAddAssignee: (assigneeId) => forPicked((id) => addIssueAssignee(id, assigneeId)),
                   onRemoveAssignee: (assigneeId) => forPicked((id) => removeIssueAssignee(id, assigneeId)),
                   onCloseIssues: () => {
-                    forPicked(closeIssue);
+                    for (const issue of pickedIssues) {
+                      if (!issue.isClosed) closeIssue(issue.id);
+                    }
                     clearPicked();
                   },
                   onReopenIssues: () => {
-                    forPicked(reopenIssue);
+                    for (const issue of pickedIssues) {
+                      if (issue.isClosed) reopenIssue(issue.id);
+                    }
                     clearPicked();
                   },
                   onClear: clearPicked
                 }
               ),
-              pickedIssues.length <= 1 && selectedIssue && state?.user && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+              pickedIssues.length <= 1 && selectedIssue && state?.user && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
                 IssueDetails,
                 {
                   whoAmI: state.user,
-                  issue: issueDetail?.issueId === selectedIssue.id ? { ...selectedIssue, description: issueDetail.description } : selectedIssue,
+                  issue: (() => {
+                    const base = issueDetail?.issueId === selectedIssue.id ? { ...selectedIssue, description: issueDetail.description } : selectedIssue;
+                    return offline ? { ...base, readonly: true } : base;
+                  })(),
                   activeTab: selectedTab,
                   comments: issueDetail?.issueId === selectedIssue.id ? issueDetail.comments : [],
+                  history: issueDetail?.issueId === selectedIssue.id ? issueDetail.history : [],
+                  onHoverHistoryEvent: setHoveredLogEventId,
                   onChangeTab: changeIssueDetailsTab,
                   onClose: closeIssueDetails,
                   onEditTitle: editIssueTitle,
@@ -43458,14 +44325,53 @@ var App = () => {
             ]
           }
         ),
-        createIssueModal && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-          CreateIssueModal,
+        createIssueModal && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+          CreateNodeModal,
           {
+            eyebrow: "New issue",
+            fieldLabel: "title",
+            placeholder: "issue name",
             title: createIssueModal.title,
             onChangeTitle: (title) => setCreateIssueModal((prev) => prev ? { ...prev, title } : prev),
             onCreate: createIssue,
             onClose: () => setCreateIssueModal(null)
           }
+        ),
+        renameSwimlane && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+          CreateNodeModal,
+          {
+            eyebrow: "Rename swimlane",
+            fieldLabel: "title",
+            placeholder: "swimlane name",
+            confirmLabel: "rename",
+            title: renameSwimlane.title,
+            onChangeTitle: (title) => setRenameSwimlane((prev) => prev ? { ...prev, title } : prev),
+            onCreate: submitRenameSwimlane,
+            onClose: () => setRenameSwimlane(null)
+          }
+        ),
+        deletingSwimlane && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+          ConfirmModal,
+          {
+            eyebrow: "Delete swimlane",
+            heading: `Delete "${deletingSwimlane.title}"?`,
+            body: deletingSwimlane.issues.length > 0 ? `This also deletes the ${deletingSwimlane.issues.length} ticket${deletingSwimlane.issues.length === 1 ? "" : "s"} in it. Their history stays in the event log, but they leave the board.` : "The swimlane is empty, so nothing else goes with it.",
+            confirmLabel: "delete",
+            onConfirm: confirmDeleteSwimlane,
+            onClose: () => setDeleteSwimlaneId(null)
+          }
+        ),
+        createSwimlaneTitle !== null && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+          CreateNodeModal,
+          {
+            eyebrow: "New swimlane",
+            fieldLabel: "title",
+            placeholder: "swimlane name",
+            title: createSwimlaneTitle,
+            onChangeTitle: setCreateSwimlaneTitle,
+            onCreate: createSwimlane,
+            onClose: () => setCreateSwimlaneTitle(null)
+          }
         )
       ]
     }
@@ -43473,12 +44379,12 @@ var App = () => {
 };
 
 // source/gui/client/main.tsx
-var import_jsx_runtime36 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime41 = __toESM(require_jsx_runtime(), 1);
 (0, import_client.createRoot)(document.getElementById("root")).render(
-  /* @__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 }) })
+  /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(BrowserRouter, { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Routes, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Route, { path: "/", element: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(App, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Route, { path: "/board/:boardId/*", element: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(App, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Route, { path: "*", element: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Navigate, { to: "/", replace: true }) })
   ] }) })
 );
 /*! Bundled license information: