Lock the right pane while focused, add project focus, quiet lead

web/src/panes.ts

@@ -1,4 +1,4 @@
-import type { TaskTab } from "./api.js";
+import { put, type TaskTab } from "./api.js";
 import { mountChanges } from "./changes.js";
 import { h, replace } from "./dom.js";
 import { mountFiles } from "./files.js";
@@ -52,5 +52,48 @@ export function taskPane(): HTMLElement {
 
   on("focus", render);
   render();
-  return h("section", { class: "pane" }, strip, body);
+  const pane = h("section", { class: "pane", tabIndex: -1 }, strip, body);
+  trackPaneFocus(pane);
+  return pane;
+}
+
+function trackPaneFocus(pane: HTMLElement): void {
+  let focused = false;
+  let inside: Element | null = null;
+  let sending: Promise<unknown> = Promise.resolve();
+  const send = () => {
+    const body = { focused };
+    sending = sending.then(() => put("/api/me/pane-focus", { body })).catch((err: unknown) => console.error("set pane focus", err));
+  };
+  const update = () => {
+    setTimeout(() => {
+      if (focused && inside && !inside.isConnected && document.activeElement === document.body) {
+        // A re-render removed the focused element (a tab button, a list row); that isn't the human leaving.
+        pane.focus({ preventScroll: true });
+      }
+      const active = document.activeElement;
+      const now = document.hasFocus() && pane.contains(active);
+      inside = now ? active : null;
+      if (now === focused) {
+        return;
+      }
+      focused = now;
+      send();
+    });
+  };
+  on("connection", () => {
+    if (state.connected && focused) {
+      send();
+    }
+  });
+  document.addEventListener("focusin", update);
+  document.addEventListener("focusout", update);
+  addEventListener("focus", update);
+  addEventListener("blur", update);
+  addEventListener("pagehide", () => {
+    if (focused) {
+      focused = false;
+      void put("/api/me/pane-focus", { body: { focused: false }, keepalive: true });
+    }
+  });
 }