feat(ui): animate docked pane transitions

.changeset/sliding-panes.md

@@ -0,0 +1,5 @@
+---
+"hunkdiff": minor
+---
+
+Animate docked panes as they open and close, moving the review pane alongside them.

packages/hunk/src/ui/App.tsx

@@ -74,6 +74,7 @@ import {
 } from "./hooks/useExtensionWorkspaceControls";
 import { useHunkSessionBridge } from "./hooks/useHunkSessionBridge";
 import { useMenuController } from "./hooks/useMenuController";
+import { usePaneSlideAnimation } from "./hooks/usePaneSlideAnimation";
 import { useThemeSelectorController } from "./hooks/useThemeSelectorController";
 import { useTimedNotice } from "./hooks/useTimedNotice";
 import { useUserNoteComposer } from "./hooks/useUserNoteComposer";
@@ -465,6 +466,7 @@ export function App({
     filesPaneVisible,
     onCurrentLinePaintChange,
     paneLayout,
+    paneLayoutSettled,
     reportPaneRenderFailure,
     renderSidebar,
     resizingPaneKey,
@@ -491,6 +493,14 @@ export function App({
     responsiveShowsSidebar: responsiveLayout.showSidebar,
   });
 
+  const { animating: paneLayoutAnimating, layout: presentedPaneLayout } = usePaneSlideAnimation({
+    bodyHeight,
+    bodyWidth,
+    paneLayout,
+    paneLayoutSettled,
+    resizing: resizingPaneKey !== null,
+  });
+
   useEffect(() => {
     if (resizingPaneKey === null) {
       setMouseCapture(renderer, undefined);
@@ -668,8 +678,8 @@ export function App({
       selectedHunkIndex,
       themeId,
     });
-  const diffPaneWidth = paneLayout.reviewBounds.width;
-  const diffPaneHeight = paneLayout.reviewBounds.height;
+  const diffPaneWidth = presentedPaneLayout.reviewBounds.width;
+  const diffPaneHeight = presentedPaneLayout.reviewBounds.height;
   const diffContentWidth = Math.max(0, diffPaneWidth - 2);
   // Publish the live note geometry for daemon-driven markup validation; the
   // note markup width mirrors what AgentInlineNote lays STML out at.
@@ -1220,7 +1230,7 @@ export function App({
   const diffHeaderStatsWidth = maxFileHeaderStatsWidth(filteredFiles);
   const diffHeaderLabelWidth = Math.max(0, diffContentWidth - diffHeaderStatsWidth - 1);
   const diffSeparatorWidth = Math.max(0, diffContentWidth - 2);
-  const diffPaneScreenTop = (showMenuBar ? 1 : 0) + paneLayout.reviewBounds.y;
+  const diffPaneScreenTop = (showMenuBar ? 1 : 0) + presentedPaneLayout.reviewBounds.y;
 
   /** Render one pane from the exact accepted host rectangle. */
   const renderPane = (planned: PlannedPane) => {
@@ -1295,7 +1305,7 @@ export function App({
   };
 
   const renderDivider = (planned: PlannedPane) =>
-    planned.divider ? (
+    planned.divider && !paneLayoutAnimating ? (
       <box
         key={`${planned.pane.key}:divider`}
         style={{
@@ -1366,13 +1376,13 @@ export function App({
           cancelCopySelectionRef.current?.();
         }}
       >
-        {paneLayout.panes.map(renderPane)}
-        {paneLayout.panes.map(renderDivider)}
+        {presentedPaneLayout.panes.map(renderPane)}
+        {presentedPaneLayout.panes.map(renderDivider)}
         <box
           style={{
             position: "absolute",
-            left: bodyPadding / 2 + paneLayout.reviewBounds.x,
-            top: paneLayout.reviewBounds.y,
+            left: bodyPadding / 2 + presentedPaneLayout.reviewBounds.x,
+            top: presentedPaneLayout.reviewBounds.y,
             width: diffPaneWidth,
             height: diffPaneHeight,
           }}

packages/hunk/src/ui/hooks/useExtensionPaneController.ts

@@ -83,6 +83,7 @@ export interface ExtensionPaneController {
   filesPaneVisible: boolean;
   onCurrentLinePaintChange: (update: ExtensionCurrentLinePaintUpdate) => void;
   paneLayout: ExtensionPaneLayoutPlan;
+  paneLayoutSettled: boolean;
   reportPaneRenderFailure: (pane: SessionPane) => void;
   renderSidebar: boolean;
   resizingPaneKey: string | null;
@@ -641,6 +642,7 @@ export function useExtensionPaneController({
     filesPaneVisible: visiblePaneKeys.includes(visibleFilesPaneKey),
     onCurrentLinePaintChange,
     paneLayout,
+    paneLayoutSettled: availabilitySnapshot.request === availabilityRequest,
     reportPaneRenderFailure,
     renderSidebar: paneLayout.panes.some(
       ({ pane }) => pane.placement === "left" || pane.placement === "right",

packages/hunk/src/ui/hooks/usePaneSlideAnimation.ts

@@ -0,0 +1,150 @@
+/**
+ * Animates one pane visibility change while semantic pane planning remains immediate.
+ *
+ * The hook retains an exiting pane only in its presentation projection and moves the other panes
+ * and review geometry in the same timeline. Terminal resize, pane resize, broader registration
+ * changes, and the first mounted layout snap directly to the semantic plan.
+ */
+
+import { useTimeline } from "@opentui/react";
+import { useLayoutEffect, useRef, useState } from "react";
+import type { ExtensionPaneLayoutPlan } from "../lib/extensionPanes";
+import {
+  interpolatePaneLayout,
+  paneLayoutGeometryEqual,
+  paneSlideAnimationDuration,
+  paneVisibilityTransitionKey,
+} from "../lib/paneSlide";
+
+interface PaneSlideAnimationOptions {
+  bodyHeight: number;
+  bodyWidth: number;
+  paneLayout: ExtensionPaneLayoutPlan;
+  paneLayoutSettled: boolean;
+  resizing: boolean;
+}
+
+interface LayoutSnapshot {
+  bodyHeight: number;
+  bodyWidth: number;
+  paneLayout: ExtensionPaneLayoutPlan;
+}
+
+interface ActiveTransition {
+  from: ExtensionPaneLayoutPlan;
+  to: ExtensionPaneLayoutPlan;
+  paneKey: string;
+}
+
+interface PaneSlidePresentation {
+  animating: boolean;
+  layout: ExtensionPaneLayoutPlan;
+}
+
+/** Return the presentation pane plan and whether its geometry is still moving. */
+export function usePaneSlideAnimation({
+  bodyHeight,
+  bodyWidth,
+  paneLayout,
+  paneLayoutSettled,
+  resizing,
+}: PaneSlideAnimationOptions): PaneSlidePresentation {
+  const duration = paneSlideAnimationDuration();
+  const timeline = useTimeline({
+    autoplay: false,
+    duration: Math.max(1, duration),
+  });
+  const [presentedLayout, setPresentedLayout] = useState(paneLayout);
+  const presentedLayoutRef = useRef(paneLayout);
+  const semanticSnapshotRef = useRef<LayoutSnapshot | null>(null);
+  const activeTransitionRef = useRef<ActiveTransition | null>(null);
+  const timelineConfiguredRef = useRef(false);
+
+  useLayoutEffect(() => {
+    if (timelineConfiguredRef.current) return;
+    timelineConfiguredRef.current = true;
+    timeline.add(
+      { progress: 0 },
+      {
+        progress: 1,
+        duration,
+        ease: "outQuad",
+        onUpdate: (animation) => {
+          const transition = activeTransitionRef.current;
+          if (!transition) return;
+          const nextLayout = interpolatePaneLayout(
+            transition.from,
+            transition.to,
+            transition.paneKey,
+            animation.progress,
+          );
+          if (paneLayoutGeometryEqual(presentedLayoutRef.current, nextLayout)) return;
+          presentedLayoutRef.current = nextLayout;
+          setPresentedLayout(nextLayout);
+        },
+        onComplete: () => {
+          const transition = activeTransitionRef.current;
+          if (!transition) return;
+          activeTransitionRef.current = null;
+          presentedLayoutRef.current = transition.to;
+          setPresentedLayout(transition.to);
+        },
+      },
+    );
+  }, [duration, timeline]);
+
+  useLayoutEffect(() => {
+    if (!paneLayoutSettled) {
+      activeTransitionRef.current = null;
+      timeline.pause();
+      if (semanticSnapshotRef.current === null) {
+        presentedLayoutRef.current = paneLayout;
+        setPresentedLayout(paneLayout);
+      }
+      return;
+    }
+
+    const previous = semanticSnapshotRef.current;
+    semanticSnapshotRef.current = { bodyHeight, bodyWidth, paneLayout };
+    const transitionKey = previous
+      ? paneVisibilityTransitionKey(previous.paneLayout, paneLayout)
+      : null;
+    const interruptedByAnotherPane =
+      activeTransitionRef.current !== null && activeTransitionRef.current.paneKey !== transitionKey;
+    const canAnimate =
+      previous !== null &&
+      transitionKey !== null &&
+      !interruptedByAnotherPane &&
+      !resizing &&
+      previous.bodyHeight === bodyHeight &&
+      previous.bodyWidth === bodyWidth;
+
+    if (!canAnimate) {
+      activeTransitionRef.current = null;
+      timeline.pause();
+      presentedLayoutRef.current = paneLayout;
+      setPresentedLayout(paneLayout);
+      return;
+    }
+
+    if (duration === 0) {
+      activeTransitionRef.current = null;
+      timeline.pause();
+      presentedLayoutRef.current = paneLayout;
+      setPresentedLayout(paneLayout);
+      return;
+    }
+
+    activeTransitionRef.current = {
+      from: presentedLayoutRef.current,
+      to: paneLayout,
+      paneKey: transitionKey,
+    };
+    timeline.restart();
+  }, [bodyHeight, bodyWidth, duration, paneLayout, paneLayoutSettled, resizing, timeline]);
+
+  return {
+    animating: activeTransitionRef.current !== null,
+    layout: presentedLayout,
+  };
+}