fix(playground): animate memory panel resizing (#19337)

damien-schneider · web-flow · commit 2d5c85612f65 · 2026-07-13T16:00:23.000+02:00
Opening Observational Memory details resized the shared agent panel to 50% immediately, which made the layout visibly jump. https://github.com/user-attachments/assets/8ef2ba3d-ed68-4570-a1ce-f16cb53812f5 ## Summary - Add a shared `PanelGroup` that couples smooth programmatic resize behavior with its colocated stylesheet. - Animate panel width through `flex-grow` and `flex-basis`, keep pointer-driven resizing immediate, and honor reduced-motion preferences entirely in CSS. - Use the panel width as the only content transition: collapsible content stays mounted and clipped while the panel shrinks, then becomes statically hidden at zero width. - Remove the separate collapsible-content fade/slide state, custom event subscriptions, `matchMedia` handling, mount-ready DOM mutation, and the panel-resize `requestAnimationFrame`. - Keep the transition rules loaded only by the `resize/panel-group` package entry. - Preserve the existing Observational Memory 50% expansion and previous-width restoration behavior. ## Validation - Playground UI typecheck and focused collapsible-panel tests - Playground UI and Playground production builds - Targeted ESLint and Prettier checks - React Doctor: 100/100 for both changed packages - Confirmed the transition selector is absent from global `dist/style.css` and emitted only in `dist/panel-group.css` - Real-browser verification: Observational Memory expands from 300px to about 583px and restores to 300px; workflow content is progressively clipped through the width transition and hidden only at zero; persisted collapsed state does not flash; no console errors  ## ELI5 When opening Observational Memory details, the side panel now smoothly grows instead of suddenly jumping to a new size. The change also respects reduced-motion preferences and keeps existing resize and restore behavior intact. ## Summary - Added a shared `PanelGroup` with scoped CSS for smooth programmatic panel resizing. - Preserved immediate pointer-driven resizing and 50% Observational Memory expansion/restoration. - Honors `prefers-reduced-motion` and disables transitions during active separator dragging. - Simplified collapsible panel behavior by removing redundant transition, mount, event, and animation-frame logic. - Applied `PanelGroup` to agent, workflow, and topics layouts. - Updated affected tests and added a patch changeset for `@mastra/playground-ui`.
diff --git a/.changeset/slimy-cloths-grab.md b/.changeset/slimy-cloths-grab.md
@@ -0,0 +1,5 @@
+---
+'@mastra/playground-ui': patch
+---
+
+Improved side panel resizing so programmatic layout changes animate smoothly and respect reduced-motion preferences.
diff --git a/packages/playground-ui/src/ee/signals/components/__tests__/signal-details-page.test.tsx b/packages/playground-ui/src/ee/signals/components/__tests__/signal-details-page.test.tsx
@@ -98,21 +98,6 @@ function useLiveDataHandlers() {
 }
 
 beforeAll(() => {
-  // jsdom does not implement matchMedia; CollapsiblePanel reads it to detect the
-  // reduced-motion preference. Provide a minimal stub so the real first-party
-  // layout components render without a third-party DOM API gap.
-  window.matchMedia ??= (query: string) =>
-    ({
-      matches: false,
-      media: query,
-      onchange: null,
-      addEventListener: () => {},
-      removeEventListener: () => {},
-      addListener: () => {},
-      removeListener: () => {},
-      dispatchEvent: () => false,
-    }) as unknown as MediaQueryList;
-
   server.listen({ onUnhandledRequest: 'error' });
 });
 
diff --git a/packages/playground-ui/src/ee/topics/components/topics-layout.tsx b/packages/playground-ui/src/ee/topics/components/topics-layout.tsx
@@ -1,5 +1,6 @@
-import { Panel, Group } from 'react-resizable-panels';
+import { Panel } from 'react-resizable-panels';
 import { CollapsiblePanel } from '@/lib/resize/collapsible-panel';
+import { PanelGroup } from '@/lib/resize/panel-group';
 import { PanelSeparator } from '@/lib/resize/separator';
 
 export interface TopicsLayoutProps {
@@ -17,7 +18,7 @@ export function TopicsLayout({ sidebar, children, tracePanel, contentPadding = t
       {sidebar ? <aside className="w-88 min-h-0 shrink-0 border-r border-border1">{sidebar}</aside> : null}
       {hasContent ? (
         <main className={contentPadding ? 'min-w-0 flex-1 p-4' : 'min-w-0 flex-1'}>
-          <Group className="size-full min-h-0 min-w-0" direction="horizontal">
+          <PanelGroup className="size-full min-h-0 min-w-0" orientation="horizontal">
             {children ? (
               <Panel id="topic-main" className="min-w-0 pr-2" minSize={35}>
                 {children}
@@ -40,7 +41,7 @@ export function TopicsLayout({ sidebar, children, tracePanel, contentPadding = t
                 </CollapsiblePanel>
               </>
             ) : null}
-          </Group>
+          </PanelGroup>
         </main>
       ) : null}
     </div>
diff --git a/packages/playground-ui/src/lib/resize/collapsible-panel.test.tsx b/packages/playground-ui/src/lib/resize/collapsible-panel.test.tsx
@@ -25,7 +25,7 @@ vi.mock('react-resizable-panels', () => ({
     className?: string;
     collapsedSize?: number;
     elementRef?: Ref<HTMLDivElement>;
-    onResize?: (size: MockPanelSize, previousSize: MockPanelSize, panel: unknown) => void;
+    onResize?: (size: MockPanelSize, id: string | number | undefined, previousSize: MockPanelSize | undefined) => void;
     style?: CSSProperties;
   }) => {
     const assignRef = (node: HTMLDivElement | null) => {
@@ -43,12 +43,12 @@ vi.mock('react-resizable-panels', () => ({
         <button
           type="button"
           data-testid="resize-collapsed"
-          onClick={() => onResize?.({ inPixels: collapsedSize ?? 0 }, { inPixels: 320 }, {})}
+          onClick={() => onResize?.({ inPixels: collapsedSize ?? 0 }, undefined, undefined)}
         />
         <button
           type="button"
           data-testid="resize-open"
-          onClick={() => onResize?.({ inPixels: 320 }, { inPixels: collapsedSize ?? 0 }, {})}
+          onClick={() => onResize?.({ inPixels: 320 }, undefined, { inPixels: collapsedSize ?? 0 })}
         />
         {children}
       </section>
@@ -92,15 +92,6 @@ const renderPanel = (direction: 'left' | 'right' = 'left') =>
 describe('CollapsiblePanel', () => {
   beforeEach(() => {
     panelMocks.expand.mockReset();
-    Object.defineProperty(window, 'matchMedia', {
-      configurable: true,
-      writable: true,
-      value: vi.fn().mockReturnValue({
-        matches: false,
-        addEventListener: vi.fn(),
-        removeEventListener: vi.fn(),
-      }),
-    });
     Object.defineProperty(window, 'requestAnimationFrame', {
       configurable: true,
       writable: true,
@@ -120,7 +111,7 @@ describe('CollapsiblePanel', () => {
     const { container } = renderPanel();
 
     expect(screen.getByTestId('panel').style.overflow).toBe('hidden');
-    expect(screen.getByTestId('panel-content').parentElement?.dataset.state).toBe('open');
+    expect(screen.getByTestId('panel-content').parentElement?.hasAttribute('hidden')).toBe(false);
     expect(screen.queryByRole('button', { name: 'Expand panel' })).toBeNull();
     expect(container.querySelector('button[aria-hidden="true"]')).toBeNull();
   });
@@ -132,8 +123,7 @@ describe('CollapsiblePanel', () => {
 
     const contentWrapper = screen.getByTestId('panel-content').parentElement;
     expect(screen.getByTestId('panel').style.overflow).toBe('visible');
-    expect(contentWrapper?.dataset.state).toBe('collapsed');
-    expect(contentWrapper?.getAttribute('inert')).toBe('');
+    expect(contentWrapper?.getAttribute('hidden')).toBe('');
 
     fireEvent.click(screen.getByRole('button', { name: 'Expand panel' }));
 
diff --git a/packages/playground-ui/src/lib/resize/collapsible-panel.tsx b/packages/playground-ui/src/lib/resize/collapsible-panel.tsx
@@ -19,64 +19,6 @@ const PILL_EDGE_MARGIN = 22;
 
 type PanelElementRef = RefObject<HTMLDivElement | null>;
 
-const usePanelSizeTransitions = (elementRef: PanelElementRef) => {
-  const [booted, setBooted] = useState(false);
-  const bootedRef = useRef(false);
-  const bootScheduled = useRef(false);
-  const enableSizeTransitionsRef = useRef<() => void>(() => {});
-
-  const enableSizeTransitions = useCallback(() => {
-    enableSizeTransitionsRef.current();
-  }, []);
-
-  const boot = useCallback(() => {
-    if (bootScheduled.current) return;
-    bootScheduled.current = true;
-    requestAnimationFrame(() => {
-      bootedRef.current = true;
-      setBooted(true);
-      enableSizeTransitionsRef.current();
-    });
-  }, []);
-
-  useEffect(() => {
-    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
-    const group = elementRef.current?.parentElement;
-    if (!group) return;
-    const panels = Array.from(group.children).filter(
-      (child): child is HTMLElement => child instanceof HTMLElement && child.hasAttribute('data-panel'),
-    );
-    const separators = Array.from(group.children).filter(
-      (child): child is HTMLElement => child instanceof HTMLElement && child.hasAttribute('data-separator'),
-    );
-
-    const enable = () => {
-      if (!bootedRef.current) return;
-      panels.forEach(
-        panel =>
-          (panel.style.transition =
-            'flex-grow 300ms var(--ease-out-custom, ease), flex-basis 300ms var(--ease-out-custom, ease)'),
-      );
-    };
-    const disable = () => panels.forEach(panel => (panel.style.transition = 'none'));
-
-    enable();
-    enableSizeTransitionsRef.current = enable;
-    separators.forEach(separator => separator.addEventListener('pointerdown', disable));
-    window.addEventListener('pointerup', enable);
-    window.addEventListener('pointercancel', enable);
-    return () => {
-      enableSizeTransitionsRef.current = () => {};
-      separators.forEach(separator => separator.removeEventListener('pointerdown', disable));
-      window.removeEventListener('pointerup', enable);
-      window.removeEventListener('pointercancel', enable);
-      panels.forEach(panel => (panel.style.transition = ''));
-    };
-  }, [elementRef]);
-
-  return { booted, boot, enableSizeTransitions };
-};
-
 const useCollapsedEdgePill = ({
   collapsed,
   direction,
@@ -112,6 +54,8 @@ const useCollapsedEdgePill = ({
       if (!pill) return;
       beginPillTracking(point);
       pill.style.transitionProperty = 'opacity, translate';
+      // Re-enable top transitions after the browser commits the pill's new
+      // starting position; otherwise it travels in from its previous position.
       requestAnimationFrame(() => {
         pill.style.transitionProperty = '';
       });
@@ -169,18 +113,13 @@ export const CollapsiblePanel = ({
   const [collapsed, setCollapsed] = useState(false);
   const panelRef = usePanelRef();
   const elementRef = useRef<HTMLDivElement | null>(null);
-  const { booted, boot, enableSizeTransitions } = usePanelSizeTransitions(elementRef);
   const { endPillTracking, expandButtonRef, stripRef, pillRef, spawnPill, trackPillPosition } = useCollapsedEdgePill({
     collapsed,
     direction,
     elementRef,
   });
 
-  const expand = useCallback(() => {
-    enableSizeTransitions();
-    if (!panelRef.current) return;
-    panelRef.current.expand();
-  }, [enableSizeTransitions, panelRef]);
+  const expand = () => panelRef.current?.expand();
 
   const numericMinSize = typeof minSize === 'number' ? minSize : null;
 
@@ -199,29 +138,16 @@ export const CollapsiblePanel = ({
         } as CSSProperties
       }
       {...props}
-      onResize={(size, previousSize, panel) => {
-        onResize?.(size, previousSize, panel);
+      onResize={(size, id, previousSize) => {
+        onResize?.(size, id, previousSize);
         if (typeof collapsedSize !== 'number') return;
         setCollapsed(size.inPixels <= collapsedSize);
-        boot();
       }}
     >
       <div
-        inert={collapsed}
-        data-state={collapsed ? 'collapsed' : 'open'}
-        data-direction={direction}
-        style={{
-          minWidth: 'var(--panel-min-w)',
-          opacity: collapsed ? 0 : undefined,
-          translate: collapsed ? (direction === 'left' ? '-100% 0' : '100% 0') : undefined,
-        }}
-        className={cn(
-          'absolute inset-y-0 w-full overflow-hidden',
-          'transition-[opacity,translate] duration-300 ease-out-custom motion-reduce:transition-none',
-          'data-[direction=left]:left-0 data-[direction=right]:right-0',
-          'data-[state=collapsed]:z-10',
-          !booted && 'transition-none',
-        )}
+        hidden={collapsed}
+        style={{ minWidth: 'var(--panel-min-w)' }}
+        className={cn('absolute inset-y-0 w-full overflow-hidden', direction === 'left' ? 'left-0' : 'right-0')}
       >
         {children}
       </div>
diff --git a/packages/playground-ui/src/lib/resize/panel-group.css b/packages/playground-ui/src/lib/resize/panel-group.css
@@ -0,0 +1,11 @@
+@media (prefers-reduced-motion: no-preference) {
+  .panel-group-resize-transition > [data-panel] {
+    transition-property: flex-grow, flex-basis;
+    transition-duration: var(--duration-slow, 300ms);
+    transition-timing-function: var(--ease-out-custom, ease);
+  }
+
+  .panel-group-resize-transition:has(> [data-separator='active']) > [data-panel] {
+    transition: none;
+  }
+}
diff --git a/packages/playground-ui/src/lib/resize/panel-group.tsx b/packages/playground-ui/src/lib/resize/panel-group.tsx
@@ -0,0 +1,14 @@
+import type { GroupProps } from 'react-resizable-panels';
+import { Group } from 'react-resizable-panels';
+import { cn } from '@/lib/utils';
+import './panel-group.css';
+
+export type PanelGroupProps = GroupProps;
+
+/**
+ * A resizable panel group with smooth programmatic resizing. CSS keeps pointer
+ * dragging immediate and disables motion when the user prefers reduced motion.
+ */
+export function PanelGroup({ className, ...props }: PanelGroupProps) {
+  return <Group className={cn('panel-group-resize-transition', className)} {...props} />;
+}
diff --git a/packages/playground/src/domains/agents/components/__tests__/resizable-layouts.test.tsx b/packages/playground/src/domains/agents/components/__tests__/resizable-layouts.test.tsx
@@ -2,7 +2,7 @@ import { cleanup, render, screen, waitFor } from '@testing-library/react';
 import type { ReactNode, Ref } from 'react';
 import { afterEach, describe, expect, it, vi } from 'vitest';
 import { WorkflowLayout } from '../../../workflows/components/workflow-layout';
-import type * as AgentsContext from '../../context';
+import type * as MemoryTimelineContext from '../../context/memory-timeline-context';
 import { AgentLayout } from '../agent-layout';
 
 const resizeLeftPanel = vi.hoisted(() => vi.fn());
@@ -57,8 +57,8 @@ vi.mock('react-resizable-panels', () => ({
   },
 }));
 
-vi.mock('../../context', async () => {
-  const actual = await vi.importActual<typeof AgentsContext>('../../context');
+vi.mock('../../context/memory-timeline-context', async () => {
+  const actual = await vi.importActual<typeof MemoryTimelineContext>('../../context/memory-timeline-context');
 
   return {
     ...actual,
diff --git a/packages/playground/src/domains/agents/components/agent-layout.tsx b/packages/playground/src/domains/agents/components/agent-layout.tsx
@@ -1,10 +1,11 @@
 import { useIsMobile } from '@mastra/playground-ui/hooks/use-is-mobile';
 import { PanelDrawer } from '@mastra/playground-ui/resize/panel-drawer';
+import { PanelGroup } from '@mastra/playground-ui/resize/panel-group';
 import { PanelSeparator } from '@mastra/playground-ui/resize/separator';
 import { useEffect, useRef } from 'react';
-import { Panel, useDefaultLayout, Group } from 'react-resizable-panels';
+import { Panel, useDefaultLayout } from 'react-resizable-panels';
 import type { PanelImperativeHandle } from 'react-resizable-panels';
-import { useMemoryTimeline } from '../context';
+import { useMemoryTimeline } from '../context/memory-timeline-context';
 
 export interface AgentLayoutProps {
   agentId: string;
@@ -82,7 +83,11 @@ export const AgentLayout = ({
 
   return (
     <div className="relative h-full w-full overflow-hidden">
-      <Group className="h-full min-h-0 w-full min-w-0" defaultLayout={defaultLayout} onLayoutChange={onLayoutChange}>
+      <PanelGroup
+        className="h-full min-h-0 w-full min-w-0"
+        defaultLayout={defaultLayout}
+        onLayoutChange={onLayoutChange}
+      >
         {leftSlot && (
           <Panel
             id="left-slot"
@@ -108,7 +113,7 @@ export const AgentLayout = ({
             </Panel>
           </>
         )}
-      </Group>
+      </PanelGroup>
       {/* Browser modal overlay - center view mode */}
       {browserOverlay}
     </div>
diff --git a/packages/playground/src/domains/workflows/components/workflow-layout.tsx b/packages/playground/src/domains/workflows/components/workflow-layout.tsx
@@ -1,10 +1,11 @@
 import { useIsMobile } from '@mastra/playground-ui/hooks/use-is-mobile';
 import { CollapsiblePanel } from '@mastra/playground-ui/resize/collapsible-panel';
 import { PanelDrawer } from '@mastra/playground-ui/resize/panel-drawer';
+import { PanelGroup } from '@mastra/playground-ui/resize/panel-group';
 import { PanelSeparator } from '@mastra/playground-ui/resize/separator';
 import { useState } from 'react';
 import type { CSSProperties } from 'react';
-import { Panel, useDefaultLayout, Group } from 'react-resizable-panels';
+import { Panel, useDefaultLayout } from 'react-resizable-panels';
 
 export interface WorkflowLayoutProps {
   workflowId: string;
@@ -55,7 +56,7 @@ export const WorkflowLayout = ({ workflowId, children, leftSlot, rightSlot }: Wo
       <div className="absolute inset-0 min-w-0 overflow-y-auto">{children}</div>
 
       {leftSlot && (
-        <Group
+        <PanelGroup
           className="pointer-events-none absolute inset-0 z-10 h-full min-h-0 w-full min-w-0 bg-transparent"
           defaultLayout={defaultLayout}
           onLayoutChange={onLayoutChange}
@@ -75,11 +76,11 @@ export const WorkflowLayout = ({ workflowId, children, leftSlot, rightSlot }: Wo
           </CollapsiblePanel>
           <PanelSeparator />
           <Panel id="left-overlay-filler" className="pointer-events-none min-w-0 bg-transparent" />
-        </Group>
+        </PanelGroup>
       )}
 
       {rightSlot && (
-        <Group
+        <PanelGroup
           className="pointer-events-none absolute inset-0 z-10 h-full min-h-0 w-full min-w-0 bg-transparent"
           defaultLayout={defaultLayout}
           onLayoutChange={onLayoutChange}
@@ -98,7 +99,7 @@ export const WorkflowLayout = ({ workflowId, children, leftSlot, rightSlot }: Wo
           >
             {rightSlot}
           </CollapsiblePanel>
-        </Group>
+        </PanelGroup>
       )}
     </div>
   );

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@mastra/playground-ui': patch
 +---
++
 +Improved side panel resizing so programmatic layout changes animate smoothly and respect reduced-motion preferences.