fix(workbench): refine agent dock and smooth map resizing

Unify dock surfaces, headers and dividers, and remove the visible context strip.
Limit pointer resizing to 400-640px and reveal the edge grip on hover.
Resize and redraw the map in the same layout cycle to prevent blanking and lag.
Preserve horizontal centering during conversation control press feedback.

Validation: isolated lint, typecheck, 21 focused unit tests, and 10 relevant
browser checks passed. Snapshot baselines regenerated from the isolated change.
The existing mobile alert summary test also fails on unchanged HEAD because
the expected demo alert source is unavailable in this environment.

src/features/workbench/hooks/use-agent-panel-resize.ts

@@ -3,74 +3,55 @@ import {
   useEffect,
   useRef,
   useState,
-  type KeyboardEvent as ReactKeyboardEvent,
   type PointerEvent as ReactPointerEvent
 } from "react";
 import {
-  WORKBENCH_LAYOUT,
   clampAgentPanelWidth,
-  getAgentPanelDefaultWidth,
-  getAgentPanelMaxWidth
+  getWorkbenchViewportLayout
 } from "../layout/workbench-layout";
 
 export function useAgentPanelResize(viewportWidth: number, conditionExpanded = false) {
   const panelRef = useRef<HTMLDivElement | null>(null);
-  const resizeLeftRef = useRef(0);
   const cleanupRef = useRef<(() => void) | null>(null);
-  const widthRef = useRef<number | null>(null);
   const [width, setWidth] = useState<number | null>(null);
-  const [committedWidth, setCommittedWidth] = useState<number | null>(null);
   const [resizing, setResizing] = useState(false);
 
   useEffect(() => () => cleanupRef.current?.(), []);
 
-  useEffect(() => {
-    if (widthRef.current === null) {
-      return;
-    }
-
-    const nextWidth = clampAgentPanelWidth(widthRef.current, viewportWidth, conditionExpanded);
-    widthRef.current = nextWidth;
-    setWidth(nextWidth);
-    setCommittedWidth(nextWidth);
-  }, [conditionExpanded, viewportWidth]);
-
-  const resize = useCallback(
-    (clientX: number) => {
-      const nextWidth = clampAgentPanelWidth(
-        clientX - resizeLeftRef.current,
-        window.innerWidth,
-        conditionExpanded
-      );
-      widthRef.current = nextWidth;
-      setWidth(nextWidth);
-    },
-    [conditionExpanded]
-  );
-
   const handlePointerDown = useCallback(
     (event: ReactPointerEvent<HTMLDivElement>) => {
       if (event.button !== 0 || !panelRef.current) return;
 
       event.preventDefault();
-      resizeLeftRef.current = panelRef.current.getBoundingClientRect().left;
-      setResizing(true);
-      resize(event.clientX);
-
       cleanupRef.current?.();
+      const startX = event.clientX;
+      const startWidth = panelRef.current.getBoundingClientRect().width;
+      const handle = event.currentTarget;
+      const pointerId = event.pointerId;
+      handle.setPointerCapture(pointerId);
+      setResizing(true);
+
       const handlePointerMove = (pointerEvent: PointerEvent) => {
+        if (pointerEvent.pointerId !== pointerId) return;
         pointerEvent.preventDefault();
-        resize(pointerEvent.clientX);
+        setWidth(clampAgentPanelWidth(
+          startWidth + pointerEvent.clientX - startX,
+          window.innerWidth,
+          conditionExpanded
+        ));
       };
-      const stopResizing = () => {
+      const stopResizing = (pointerEvent?: PointerEvent) => {
+        if (pointerEvent && pointerEvent.pointerId !== pointerId) return;
         cleanupRef.current?.();
         setResizing(false);
-        setCommittedWidth(widthRef.current);
       };
+      const handleBlur = () => stopResizing();
       const cleanup = () => {
         window.removeEventListener("pointermove", handlePointerMove);
         window.removeEventListener("pointerup", stopResizing);
         window.removeEventListener("pointercancel", stopResizing);
+        window.removeEventListener("blur", handleBlur);
+        if (handle.hasPointerCapture(pointerId)) handle.releasePointerCapture(pointerId);
         cleanupRef.current = null;
       };
 
@@ -78,43 +59,19 @@ export function useAgentPanelResize(viewportWidth: number, conditionExpanded = f
       window.addEventListener("pointermove", handlePointerMove);
       window.addEventListener("pointerup", stopResizing);
       window.addEventListener("pointercancel", stopResizing);
-    },
-    [resize]
-  );
-
-  const handleKeyDown = useCallback(
-    (event: ReactKeyboardEvent<HTMLDivElement>) => {
-      const currentWidth =
-        panelRef.current?.getBoundingClientRect().width ?? WORKBENCH_LAYOUT.desktop.agentWidth;
-      let nextWidth = currentWidth;
-
-      if (event.key === "ArrowLeft") {
-        nextWidth -= 16;
-      } else if (event.key === "ArrowRight") {
-        nextWidth += 16;
-      } else if (event.key === "Home") {
-        nextWidth = getAgentPanelDefaultWidth(window.innerWidth, conditionExpanded);
-      } else if (event.key === "End") {
-        nextWidth = getAgentPanelMaxWidth(window.innerWidth, conditionExpanded);
-      } else {
-        return;
-      }
-
-      event.preventDefault();
-      const clampedWidth = clampAgentPanelWidth(nextWidth, window.innerWidth, conditionExpanded);
-      widthRef.current = clampedWidth;
-      setWidth(clampedWidth);
-      setCommittedWidth(clampedWidth);
+      window.addEventListener("blur", handleBlur);
     },
     [conditionExpanded]
   );
 
   return {
-    committedWidth,
-    handleKeyDown,
     handlePointerDown,
     panelRef,
     resizing,
-    width
+    width: clampAgentPanelWidth(
+      width ?? getWorkbenchViewportLayout(viewportWidth).agentWidth,
+      viewportWidth,
+      conditionExpanded
+    )
   };
 }

src/features/workbench/hooks/use-workbench-map.ts

@@ -274,9 +274,25 @@ export function useWorkbenchMap({
       maxZoom: MAP_MAX_ZOOM,
       antialias: true,
       preserveDrawingBuffer: true,
+      trackResize: false,
       attributionControl: false
     });
 
+    // MapLibre throttles automatic resizing to 50ms, which lags behind the dock edge.
+    const resizeObserver = new ResizeObserver(() => {
+      const container = map.getContainer();
+      const canvas = map.getCanvas();
+      if (!container.clientWidth || !container.clientHeight) return;
+      if (
+        canvas.clientWidth === container.clientWidth &&
+        canvas.clientHeight === container.clientHeight
+      ) return;
+      map.resize();
+      // Resizing clears the drawing buffer; repaint in the same layout cycle.
+      map.redraw();
+    });
+    resizeObserver.observe(map.getContainer());
+
     window.__waterNetworkMap = map;
     let removeCityScene: (() => void) | undefined;
 
@@ -385,20 +401,6 @@ export function useWorkbenchMap({
     };
     void refreshScada();
 
-    let resizeFrame: number | null = null;
-    const resizeMap = () => map.resize();
-    const resizeObserver = new ResizeObserver(() => {
-      if (resizeFrame !== null) {
-        window.cancelAnimationFrame(resizeFrame);
-      }
-      resizeFrame = window.requestAnimationFrame(() => {
-        resizeFrame = null;
-        resizeMap();
-      });
-    });
-    resizeObserver.observe(containerRef.current);
-    window.addEventListener("resize", resizeMap);
-
     map.on("sourcedata", (event) => {
       updateStatusFromSourceEvent(event, "online", setSourceStatuses);
     });
@@ -427,10 +429,6 @@ export function useWorkbenchMap({
     mapRef.current = map;
 
     return () => {
-      window.removeEventListener("resize", resizeMap);
-      if (resizeFrame !== null) {
-        window.cancelAnimationFrame(resizeFrame);
-      }
       resizeObserver.disconnect();
       scadaAbortController.abort();
       if (scadaRefreshTimeoutId !== undefined) {