fix(chat): handle native focus and touch resize gestures

Author: waleedlatif1

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

@@ -113,6 +113,9 @@ test('chat panel sizes survive navigation, chat switches, collapse, and layout c
     })
     const shell = app
     const page = await shell.firstWindow()
+    const inputSession = await page.context().newCDPSession(page)
+    // Playwright otherwise keeps the document focused when its native window loses focus.
+    await inputSession.send('Emulation.setFocusEmulationEnabled', { enabled: false })
     page.on('pageerror', (error) => errors.push(error.message))
     page.on('crash', () => {
       rendererCrashed = true
@@ -267,7 +270,8 @@ test('chat panel sizes survive navigation, chat switches, collapse, and layout c
             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')))
+            await shell.evaluate(({ BrowserWindow }) => BrowserWindow.getAllWindows()[0].blur())
+            await expect.poll(() => page.evaluate(() => document.hasFocus())).toBe(false)
           } else if (interruption === 'chat switch') {
             await page
               .getByRole('button', { name: 'organization-chat-a', exact: true })
@@ -279,6 +283,18 @@ test('chat panel sizes survive navigation, chat switches, collapse, and layout c
               .evaluate((element: HTMLButtonElement) => element.click())
             await expect(panel).toHaveCount(0)
           }
+          if (keepsDraggedWidth) {
+            await expectWidth(598)
+            expect(await page.evaluate(() => JSON.stringify(localStorage))).not.toBe(before)
+            if (interruption === 'blur') {
+              await shell.evaluate(({ app, BrowserWindow }) => {
+                app.focus({ steal: true })
+                BrowserWindow.getAllWindows()[0].focus()
+              })
+            }
+            await page.mouse.move(rect.x + 150, rect.y + 100)
+            await expectWidth(598)
+          }
           await page.mouse.up()
           if (interruption === 'chat switch') {
             await page.getByRole('button', { name: 'workspace-chat-b', exact: true }).click()
@@ -299,6 +315,43 @@ test('chat panel sizes survive navigation, chat switches, collapse, and layout c
       )
     }
 
+    for (const button of ['middle', 'right'] as const) {
+      await check(`${button}-button drags leave the panel width unchanged`, 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({ button })
+        await page.mouse.move(rect.x + 100, rect.y + 100, { steps: 12 })
+        await page.mouse.up({ button })
+        await expectWidth(698)
+        expect(await page.evaluate(() => JSON.stringify(localStorage))).toBe(before)
+      })
+    }
+
+    await check('a touch drag resizes the panel without becoming a scroll gesture', async () => {
+      const rect = await panel.boundingBox()
+      if (!rect) throw new Error('Missing panel bounds')
+      await inputSession.send('Emulation.setTouchEmulationEnabled', { enabled: true })
+      await inputSession.send('Input.dispatchTouchEvent', {
+        type: 'touchStart',
+        touchPoints: [{ x: rect.x, y: rect.y + 100 }],
+      })
+      for (let offset = 10; offset <= 100; offset += 10) {
+        await inputSession.send('Input.dispatchTouchEvent', {
+          type: 'touchMove',
+          touchPoints: [{ x: rect.x + offset, y: rect.y + 100 }],
+        })
+      }
+      await inputSession.send('Input.dispatchTouchEvent', { type: 'touchEnd', touchPoints: [] })
+      await inputSession.send('Emulation.setTouchEmulationEnabled', { enabled: false })
+      await expectWidth(598)
+      await page.reload()
+      await page.getByRole('button', { name: 'workspace-chat-b', exact: true }).click()
+      await expectWidth(598)
+      await dragTo(698)
+    })
+
     await check('a viewport change during a drag clamps the committed display width', async () => {
       await expectWidth(698)
       const rect = await beginDrag()

apps/sim/app/workspace/[workspaceId]/home/components/chat-panel-layout.tsx

@@ -52,7 +52,7 @@ export function ChatPanelLayout({
       {!collapsed && (
         <div className='relative z-20 w-0 flex-none max-md:hidden'>
           <div
-            className='absolute inset-y-0 left-[-4px] w-[8px] cursor-ew-resize focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--selection)]'
+            className='absolute inset-y-0 left-[-4px] w-[8px] cursor-ew-resize touch-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--selection)]'
             role='separator'
             tabIndex={0}
             aria-orientation='vertical'

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

@@ -205,6 +205,7 @@ export function useMothershipResize(
 
   const handleResizePointerDown = useCallback(
     (e: React.PointerEvent) => {
+      if (e.button !== 0) return
       e.preventDefault()
 
       const el = mothershipRef.current