fix(chat): retain resized panels when pointer capture ends

Author: waleedlatif1

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

@@ -253,39 +253,50 @@ test('chat panel sizes survive navigation, chat switches, collapse, and layout c
       'detach',
       'chat switch',
     ] as const) {
-      await check(`${interruption} keeps the previous saved width`, async () => {
-        const before = await page.evaluate(() => JSON.stringify(localStorage))
-        const rect = await beginDrag()
-        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 if (interruption === 'chat switch') {
-          await page
-            .getByRole('button', { name: 'organization-chat-a', exact: true })
-            .evaluate((element: HTMLButtonElement) => element.click())
-          await expectWidth(560)
-        } 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 === 'chat switch') {
-          await page.getByRole('button', { name: 'workspace-chat-b', exact: true }).click()
-        }
-        if (interruption === 'detach') {
-          await page.getByRole('button', { name: 'Back', exact: true }).click()
+      const keepsDraggedWidth = interruption === 'capture loss' || interruption === 'blur'
+      await check(
+        `${interruption} keeps the ${keepsDraggedWidth ? 'dragged' : 'previous saved'} width`,
+        async () => {
+          const before = await page.evaluate(() => JSON.stringify(localStorage))
+          const rect = await beginDrag()
+          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 + 100, rect.y + 100)
+          } else if (interruption === 'blur') {
+            await page.evaluate(() => window.dispatchEvent(new Event('blur')))
+          } else if (interruption === 'chat switch') {
+            await page
+              .getByRole('button', { name: 'organization-chat-a', exact: true })
+              .evaluate((element: HTMLButtonElement) => element.click())
+            await expectWidth(560)
+          } 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 === 'chat switch') {
+            await page.getByRole('button', { name: 'workspace-chat-b', exact: true }).click()
+          }
+          if (interruption === 'detach') {
+            await page.getByRole('button', { name: 'Back', exact: true }).click()
+          }
+          await expectWidth(keepsDraggedWidth ? 598 : 698)
+          if (keepsDraggedWidth) {
+            await page.reload()
+            await page.getByRole('button', { name: 'workspace-chat-b', exact: true }).click()
+            await expectWidth(598)
+            await dragTo(698)
+          } else {
+            expect(await page.evaluate(() => JSON.stringify(localStorage))).toBe(before)
+          }
         }
-        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 () => {

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

@@ -285,6 +285,10 @@ export function useMothershipResize(
       const cancelPointer = (event: PointerEvent) => {
         if (event.pointerId === pointerId) cancel()
       }
+      const complete = () => finish(true)
+      const completePointer = (event: PointerEvent) => {
+        if (event.pointerId === pointerId) complete()
+      }
       cleanupRef.current = cancel
 
       handle.addEventListener(
@@ -307,22 +311,14 @@ export function useMothershipResize(
         { signal }
       )
 
-      handle.addEventListener(
-        'pointerup',
-        (upEvent: PointerEvent) => {
-          if (upEvent.pointerId !== pointerId) return
-          finish(true)
-        },
-        { signal }
-      )
+      handle.addEventListener('pointerup', completePointer, { 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', 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', cancel, { signal })
+      // Capture or focus can be lost before pointerup reaches the handle; retain the user's resize.
+      handle.addEventListener('lostpointercapture', completePointer, { signal })
+      window.addEventListener('blur', complete, { signal })
     },
     [desktopScopeId, rememberWidth]
   )