Function useResizablePanelHeight

ui/src/hooks/useResizablePanel.ts:225–368

({
  storageKey,
  minHeight,
  maxHeight,
  side,
  panelRef,
}: UseResizablePanelHeightOptions)

 * ref so mousemove never triggers a React re-render — only mouseup commits.
 */
export function useResizablePanelHeight({
  storageKey,
  minHeight,
  maxHeight,
  side,
  panelRef,
}: UseResizablePanelHeightOptions): {
  height: number | null;
  handleMouseDown: PanelResizeMouseDown;
} {
  const [height, setHeight] = useState<number | null>(() => {
    const stored = localStorage.getItem(storageKey);
    if (stored) {
      const parsed = parseInt(stored, 10);
      if (!isNaN(parsed) && parsed >= minHeight && parsed <= maxHeight)
        return parsed;
    }
    return null;
  });

  const isDragging = useRef(false);
  const startY = useRef(0);
  const startHeight = useRef(0);

  const handleMouseDown = useCallback<PanelResizeMouseDown>(
    (e, cursorOverride) => {
      e.preventDefault();
      isDragging.current = true;
      startY.current = e.clientY;
      // Anchor the drag to whatever height the panel is ACTUALLY rendering —
      // this matters most before first drag when `height` is still null.
      const rendered = panelRef.current?.getBoundingClientRect().height ?? 0;
      startHeight.current = height ?? Math.round(rendered);
      document.body.style.cursor = cursorOverride ?? 'row-resize';
      document.body.style.userSelect = 'none';
    },
    [height, panelRef],
  );

  useEffect(() => {
    let pending: number | null = null;
    let rafId: number | null = null;

    const flush = () => {
      rafId = null;
      const panel = panelRef.current;
      if (pending == null || !panel) return;
      // Clamp pending to whatever the parent currently allows so the drag
      // stops cleanly at the available limit instead of fighting the
      // ResizeObserver below (which would otherwise observe-and-clamp on
      // every frame, causing twitch).
      const parent = panel.parentElement;
      if (parent) {
        const panelRect = panel.getBoundingClientRect();
        const parentRect = parent.getBoundingClientRect();
        const available = parentRect.bottom - panelRect.top - 4;
        if (available > 0 && pending > available) pending = available;
      }