fix(chat): finalize panel resizing against current layout

Author: waleedlatif1

.github/workflows/desktop-e2e.yml

@@ -15,6 +15,8 @@ on:
       - 'apps/sim/app/workspace/**/home/hooks/use-resource-panel.ts'
       - 'apps/sim/app/workspace/**/home/components/chat-panel-layout.tsx'
       - 'apps/sim/stores/chat-panel/**'
+      - 'apps/sim/stores/constants.ts'
+      - 'apps/sim/lib/browser-agent/transport.ts'
       - 'apps/sim/scripts/fixtures/chat-panel.tsx'
       - 'apps/sim/app/layout.tsx'
       - 'apps/sim/hooks/use-desktop-update-state.ts'

apps/desktop/e2e/chat-panel.spec.ts

@@ -99,13 +99,17 @@ test('chat panel sizes survive navigation, chat switches, collapse, and layout c
     page.on('pageerror', (error) => errors.push(error.message))
     await shell.evaluate(({ app, BrowserWindow }) => {
       const window = BrowserWindow.getAllWindows()[0]
-      window.setContentSize(1440, 800)
+      // Keep the physical window inside the small displays used by macOS CI.
+      window.setMinimumSize(0, 0)
+      window.setContentSize(720, 400)
+      window.webContents.setZoomFactor(0.5)
       window.webContents.setBackgroundThrottling(false)
       app.focus({ steal: true })
       window.focus()
     })
     await page.reload()
     expect(errors).toEqual([])
+    await expect.poll(() => page.evaluate(() => window.innerWidth)).toBe(1440)
     const panel = page.locator('[data-mothership-panel]')
     const divider = page.getByRole('separator', { name: 'Resize resource view' })
     const width = () => panel.evaluate((element) => element.getBoundingClientRect().width)
@@ -177,14 +181,14 @@ test('chat panel sizes survive navigation, chat switches, collapse, and layout c
       await page.getByRole('button', { name: 'Resize container' }).click()
       await expectWidth(798)
       await shell.evaluate(({ BrowserWindow }) =>
-        BrowserWindow.getAllWindows()[0].setContentSize(1050, 800)
+        BrowserWindow.getAllWindows()[0].setContentSize(525, 400)
       )
       await expectWidth(570)
       await page.getByRole('button', { name: 'Settings', exact: true }).click()
       await page.getByRole('button', { name: 'Back', exact: true }).click()
       await expectWidth(570)
       await shell.evaluate(({ BrowserWindow }) =>
-        BrowserWindow.getAllWindows()[0].setContentSize(1440, 800)
+        BrowserWindow.getAllWindows()[0].setContentSize(720, 400)
       )
       await expectWidth(798)
     })
@@ -205,6 +209,66 @@ test('chat panel sizes survive navigation, chat switches, collapse, and layout c
       expect(await page.evaluate(() => JSON.stringify(localStorage))).not.toBe(before)
     })
 
+    for (const interruption of ['pointercancel', 'capture loss', 'blur', 'detach'] as const) {
+      await check(`${interruption} keeps the previous saved width`, async () => {
+        const before = await page.evaluate(() => JSON.stringify(localStorage))
+        await divider.hover({ position: { x: 4, y: 100 } })
+        const rect = await panel.boundingBox()
+        if (!rect) throw new Error('Missing panel bounds')
+        await page.mouse.down()
+        await expect
+          .poll(() => divider.evaluate((element) => element.hasPointerCapture(1)))
+          .toBe(true)
+        await page.mouse.move(rect.x + 100, rect.y + 100, { steps: 12 })
+        await expectWidth(598)
+        if (interruption === 'pointercancel') {
+          await divider.dispatchEvent('pointercancel', { pointerId: 1 })
+        } else if (interruption === 'capture loss') {
+          await divider.evaluate((element) => element.releasePointerCapture(1))
+          await page.mouse.move(rect.x + 101, rect.y + 100)
+        } else if (interruption === 'blur') {
+          await page.evaluate(() => window.dispatchEvent(new Event('blur')))
+        } else {
+          await page
+            .getByRole('button', { name: 'Settings', exact: true })
+            .evaluate((element: HTMLButtonElement) => element.click())
+          await expect(panel).toHaveCount(0)
+        }
+        await page.mouse.up()
+        if (interruption === 'detach') {
+          await page.getByRole('button', { name: 'Back', exact: true }).click()
+        }
+        await expectWidth(698)
+        expect(await page.evaluate(() => JSON.stringify(localStorage))).toBe(before)
+      })
+    }
+
+    await check('a viewport change during a drag clamps the committed display width', async () => {
+      await page.getByRole('button', { name: 'Resize container' }).click()
+      await expectWidth(520)
+      await divider.hover({ position: { x: 4, y: 100 } })
+      const rect = await panel.boundingBox()
+      if (!rect) throw new Error('Missing panel bounds')
+      await page.mouse.down()
+      await expect
+        .poll(() => divider.evaluate((element) => element.hasPointerCapture(1)))
+        .toBe(true)
+      await page.mouse.move(rect.x + 20, rect.y + 100, { steps: 12 })
+      await expectWidth(500)
+      await shell.evaluate(({ BrowserWindow }) =>
+        BrowserWindow.getAllWindows()[0].setContentSize(300, 400)
+      )
+      await expect.poll(() => page.evaluate(() => window.innerWidth)).toBe(600)
+      await page.mouse.up()
+      await expectWidth(480)
+      await shell.evaluate(({ BrowserWindow }) =>
+        BrowserWindow.getAllWindows()[0].setContentSize(720, 400)
+      )
+      await expectWidth(500)
+      await page.getByRole('button', { name: 'Resize container' }).click()
+      await dragTo(698)
+    })
+
     await check('another account cannot inherit the current chat width', async () => {
       await page.getByRole('button', { name: 'Switch account' }).click()
       await expectWidth(720)

apps/sim/app/workspace/[workspaceId]/home/hooks/use-mothership-resize.ts

@@ -98,6 +98,16 @@ function writeWidthInstantly(el: HTMLElement, width: number) {
   el.style.transition = prevTransition
 }
 
+/** Restores the preference within the current layout without changing the saved width. */
+function restorePanelWidth(el: HTMLElement, preferred: number | undefined) {
+  if (preferred === undefined) {
+    el.style.removeProperty('width')
+    return
+  }
+  const width = Math.min(preferred, measureMaxWidth(el))
+  if (el.style.width !== `${width}px`) writeWidthInstantly(el, width)
+}
+
 /** Mirrors the panel's current width and bounds onto the divider for assistive tech. */
 function syncDividerValue(handle: HTMLElement, el: HTMLElement, maxWidth = measureMaxWidth(el)) {
   handle.setAttribute('aria-valuemin', String(MOTHERSHIP_WIDTH.MIN))
@@ -150,13 +160,7 @@ export function useMothershipResize(
       const restoreWidth = () => {
         rafId = null
         if (cleanupRef.current) return
-        const preferred = preferredWidthRef.current
-        if (collapsed || preferred === undefined) {
-          el.style.removeProperty('width')
-        } else {
-          const width = Math.min(preferred, measureMaxWidth(el))
-          if (el.style.width !== `${width}px`) writeWidthInstantly(el, width)
-        }
+        restorePanelWidth(el, collapsed ? undefined : preferredWidthRef.current)
         const divider = focusedDividerRef.current
         if (divider && document.activeElement === divider) syncDividerValue(divider, el)
       }
@@ -195,8 +199,7 @@ export function useMothershipResize(
       const startRect = el.getBoundingClientRect()
       el.style.width = `${startRect.width}px`
 
-      // Nothing moves the panel's right edge mid-drag, and the pointer keeps the
-      // offset it grabbed at, so one measurement serves the whole gesture.
+      // Snapshot geometry avoids layout reads on every move; release applies fresh bounds.
       const geometry: DragGeometry = {
         panelRight: startRect.right,
         grabOffset: e.clientX - startRect.left,
@@ -227,30 +230,31 @@ export function useMothershipResize(
       const ac = new AbortController()
       const { signal } = ac
 
-      const cleanup = () => {
+      const finish = (commit: boolean) => {
         ac.abort()
         if (rafId !== null) {
           cancelAnimationFrame(rafId)
           rafId = null
         }
-        // Land on the exact final pointer position before transitions come back,
-        // so a fast flick whose last move never got a frame is not lost. The
-        // flush is what stops that catch-up delta from animating: without it the
-        // width write and the transition restore land in one style change, and
-        // the panel eases into its final width over 200ms while the native view
-        // chases it.
-        if (lastClientX !== null) {
-          applyWidth(lastClientX)
+        if (commit && lastClientX !== null) {
           rememberWidth(panelWidthAt(lastClientX, geometry))
         }
+        // Flush the restored width before transitions return, so the native view
+        // does not chase a 200ms catch-up animation.
+        restorePanelWidth(el, preferredWidthRef.current)
         void el.offsetWidth
         el.style.transition = prevTransition
         document.body.style.cursor = ''
         document.body.style.userSelect = ''
         cleanupRef.current = null
+        if (handle.hasPointerCapture(pointerId)) handle.releasePointerCapture(pointerId)
         syncDividerValue(handle, el)
       }
-      cleanupRef.current = cleanup
+      const cancel = () => finish(false)
+      const cancelPointer = (event: PointerEvent) => {
+        if (event.pointerId === pointerId) cancel()
+      }
+      cleanupRef.current = cancel
 
       handle.addEventListener(
         'pointermove',
@@ -276,18 +280,18 @@ export function useMothershipResize(
         'pointerup',
         (upEvent: PointerEvent) => {
           if (upEvent.pointerId !== pointerId) return
-          handle.releasePointerCapture(upEvent.pointerId)
-          cleanup()
+          finish(true)
         },
         { signal }
       )
 
       // Browser fires pointercancel when it reclaims the gesture (scroll, palm rejection, etc.)
       // Without this, body cursor/userSelect and transition would be permanently stuck
-      handle.addEventListener('pointercancel', cleanup, { signal })
+      handle.addEventListener('pointercancel', cancelPointer, { signal })
+      handle.addEventListener('lostpointercapture', cancelPointer, { signal })
       // A blur mid-drag (cmd-tab, window switch) would otherwise strand the
       // body cursor/userSelect overrides with no pointerup coming
-      window.addEventListener('blur', cleanup, { signal })
+      window.addEventListener('blur', cancel, { signal })
     },
     [desktopScopeId, rememberWidth]
   )