From 19cd713682d7fb64dac09af49566a55ab27e7477 Mon Sep 17 00:00:00 2001
From: jiaqi62 <jiaqi62@7MacBook-Pro.local>
Date: Tue, 21 Jul 2026 14:53:12 +0800
Subject: [PATCH] fix(wework): UI display fixes for narrow toolbar, cloud
 popover, and dialogs

- Cap model selector width and collapse quick phrases in narrow composer toolbar
- Render cloud-work error popover via portal with outside-click/ESC dismissal
- Remove forced dark mode from add-device and cloud-work dialogs
- Revert model selector to left-opening and narrow browser occlusion to cloud dialog
- Swallow arrow keys at native input boundaries on macOS
- Stabilize App auth routing test by mocking auth state
---
 wework/src/App.test.tsx                       |  34 +-
 wework/src/App.tsx                            |   5 +
 wework/src/components/chat/ChatInput.test.tsx |   2 +-
 .../chat/composer/ComposerToolbar.tsx         |   2 +
 .../chat/composer/ModelSelector.test.tsx      | 308 ++++++++++++++++++
 .../chat/composer/ModelSelector.tsx           |  16 +-
 .../chat/composer/ModelSelectorTrigger.tsx    |  11 +-
 .../chat/composer/QuickPhraseMenu.test.tsx    |  18 +
 .../chat/composer/model-selector-types.ts     |   1 +
 .../components/layout/DesktopSidebar.test.tsx |  34 ++
 .../WorkspaceBrowserPanel.test.tsx            |   1 +
 .../WorkspaceBrowserPanel.tsx                 |   2 +-
 .../projects/DeviceFolderPicker.tsx           |  36 +-
 .../projects/StandaloneProjectDialogs.tsx     |  39 ++-
 .../settings/AddCloudDeviceDialog.tsx         |  10 +-
 .../CloudConnectionDialog.tsx                 |   2 +
 .../src/hooks/useEmbeddedBrowserOcclusion.ts  |  11 +
 .../src/lib/macosInputArrowKeyGuard.test.ts   | 157 +++++++++
 wework/src/lib/macosInputArrowKeyGuard.ts     |  53 +++
 19 files changed, 681 insertions(+), 61 deletions(-)
 create mode 100644 wework/src/components/chat/composer/ModelSelector.test.tsx
 create mode 100644 wework/src/hooks/useEmbeddedBrowserOcclusion.ts
 create mode 100644 wework/src/lib/macosInputArrowKeyGuard.test.ts
 create mode 100644 wework/src/lib/macosInputArrowKeyGuard.ts

diff --git a/wework/src/App.test.tsx b/wework/src/App.test.tsx
index 76c6b4634eb..b883f9e44fb 100644
--- a/wework/src/App.test.tsx
+++ b/wework/src/App.test.tsx
@@ -1,18 +1,28 @@
-import { render, screen } from '@testing-library/react'
-import { beforeEach, describe, expect, test, vi } from 'vitest'
+import { cleanup, render, screen } from '@testing-library/react'
+import { afterEach, describe, expect, test, vi } from 'vitest'
 import App from './App'
 
+vi.mock('@/features/auth/AuthProvider', () => ({
+  AuthProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+}))
+
+vi.mock('@/features/auth/useAuth', () => ({
+  useAuth: () => ({
+    user: null,
+    isLoading: false,
+    adminPasswordSetupRequired: false,
+    adminUsername: 'admin',
+    login: vi.fn(),
+    logout: vi.fn(),
+    refresh: vi.fn(),
+    loginWithOidcToken: vi.fn(),
+    setupAdminPassword: vi.fn(),
+  }),
+}))
+
 describe('App auth routing', () => {
-  beforeEach(() => {
-    vi.stubGlobal(
-      'fetch',
-      vi.fn().mockResolvedValue(
-        new Response(JSON.stringify({ required: false }), {
-          status: 200,
-          headers: { 'Content-Type': 'application/json' },
-        })
-      )
-    )
+  afterEach(() => {
+    cleanup()
   })
 
   test('renders login page on /login', async () => {
diff --git a/wework/src/App.tsx b/wework/src/App.tsx
index 41f49ef2529..b037c0c852d 100644
--- a/wework/src/App.tsx
+++ b/wework/src/App.tsx
@@ -68,6 +68,7 @@ import {
 import { AppshotBridge } from '@/features/appshots/AppshotBridge'
 import { SystemDragPanel } from '@/features/system-drag/SystemDragPanel'
 import { SystemDragBridge } from '@/features/system-drag/SystemDragBridge'
+import { installMacOSInputArrowKeyGuard } from '@/lib/macosInputArrowKeyGuard'
 
 const WORKBENCH_STARTUP_REVEAL_TIMEOUT_MS = 6000
 
@@ -377,6 +378,10 @@ function AppShell() {
     }
   }, [isTauri])
 
+  useEffect(() => {
+    return installMacOSInputArrowKeyGuard()
+  }, [])
+
   useEffect(() => {
     if (
       path === '/login' ||
diff --git a/wework/src/components/chat/ChatInput.test.tsx b/wework/src/components/chat/ChatInput.test.tsx
index 7a37e20d9e0..b5f0cca139f 100644
--- a/wework/src/components/chat/ChatInput.test.tsx
+++ b/wework/src/components/chat/ChatInput.test.tsx
@@ -1253,7 +1253,7 @@ describe('ChatInput', () => {
       'data-enter-animation',
       'main'
     )
-    expect(selectorButton).toHaveStyle({ width: '240px' })
+    expect(selectorButton).toHaveStyle({ width: 'var(--model-selector-width, auto)' })
     expect(screen.queryByTestId('model-selector-tooltip')).not.toBeInTheDocument()
     expect(screen.getByTestId('model-selector-menu').parentElement).toHaveClass(
       'fixed',
diff --git a/wework/src/components/chat/composer/ComposerToolbar.tsx b/wework/src/components/chat/composer/ComposerToolbar.tsx
index 29dd3c6d87e..82c177349cc 100644
--- a/wework/src/components/chat/composer/ComposerToolbar.tsx
+++ b/wework/src/components/chat/composer/ComposerToolbar.tsx
@@ -39,6 +39,7 @@ interface ComposerToolbarProps {
 }
 
 const COMPACT_TOOLBAR_WIDTH = 475
+const NARROW_MODEL_SELECTOR_MAX_WIDTH = 160
 
 export function ComposerToolbar({
   canSend,
@@ -131,6 +132,7 @@ export function ComposerToolbar({
             onSelectModelOption={onSelectModelOption}
             onBlockedModelSelect={onBlockedModelSelect}
             buttonClassName="opacity-90 hover:opacity-100"
+            maxClosedWidth={compact ? NARROW_MODEL_SELECTOR_MAX_WIDTH : undefined}
           />
         ) : (
           <div className="h-11 w-32 shrink-0" data-testid="model-selector-loading" />
diff --git a/wework/src/components/chat/composer/ModelSelector.test.tsx b/wework/src/components/chat/composer/ModelSelector.test.tsx
new file mode 100644
index 00000000000..add4276b2b7
--- /dev/null
+++ b/wework/src/components/chat/composer/ModelSelector.test.tsx
@@ -0,0 +1,308 @@
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'
+import type { UnifiedModel } from '@/types/api'
+
+const isMobileMock = vi.hoisted(() => vi.fn())
+vi.mock('@/hooks/useIsMobile', () => ({
+  useIsMobile: isMobileMock,
+}))
+
+const configuredKeybindingMock = vi.hoisted(() => vi.fn())
+vi.mock('@/hooks/useConfiguredKeybinding', () => ({
+  useConfiguredKeybinding: configuredKeybindingMock,
+}))
+
+const modelExecutionMock = vi.hoisted(() => ({
+  getModelExecutionOverride: vi.fn(),
+}))
+vi.mock('@/features/cloud-connection/modelExecution', () => modelExecutionMock)
+
+vi.mock('@/hooks/useTranslation', () => ({
+  useTranslation: () => ({
+    t: (key: string, fallback?: string) => fallback ?? key,
+  }),
+}))
+
+import { ModelSelector } from './ModelSelector'
+
+const SHELL_LEFT = 800
+const WINDOW_INNER_WIDTH = 1200
+const WINDOW_INNER_HEIGHT = 900
+
+function createShellElement(options?: { hidden?: boolean }): HTMLDivElement {
+  const shell = document.createElement('div')
+  shell.id = 'right-workspace-panel-shell'
+  shell.setAttribute('data-testid', 'right-workspace-panel-shell')
+  if (options?.hidden) {
+    shell.setAttribute('aria-hidden', 'true')
+  } else {
+    shell.setAttribute('aria-hidden', 'false')
+  }
+  shell.getBoundingClientRect = () =>
+    ({
+      top: 0,
+      left: options?.hidden ? WINDOW_INNER_WIDTH : SHELL_LEFT,
+      right: WINDOW_INNER_WIDTH,
+      bottom: WINDOW_INNER_HEIGHT,
+      width: options?.hidden ? 0 : WINDOW_INNER_WIDTH - SHELL_LEFT,
+      height: WINDOW_INNER_HEIGHT,
+      x: options?.hidden ? WINDOW_INNER_WIDTH : SHELL_LEFT,
+      y: 0,
+      toJSON: () => {},
+    }) as DOMRect
+  document.body.appendChild(shell)
+  return shell
+}
+
+function setButtonRect(button: HTMLElement, right = 850) {
+  const left = right - 240
+  button.getBoundingClientRect = () =>
+    ({
+      top: 500,
+      left,
+      right,
+      bottom: 540,
+      width: 240,
+      height: 40,
+      x: left,
+      y: 500,
+      toJSON: () => {},
+    }) as DOMRect
+}
+
+const SAMPLE_MODEL: UnifiedModel = {
+  name: 'gpt-5.5',
+  modelId: 'gpt-5.5',
+  displayName: 'GPT 5.5',
+  type: 'runtime',
+  provider: 'local',
+  config: {
+    weworkModelKind: 'codex-official',
+    ui: { family: 'codex-official', controls: ['speed'] },
+  },
+}
+
+describe('ModelSelector desktop layout', () => {
+  const originalInnerWidth = window.innerWidth
+  const originalInnerHeight = window.innerHeight
+
+  beforeEach(() => {
+    isMobileMock.mockReturnValue(false)
+    configuredKeybindingMock.mockReturnValue(null)
+    modelExecutionMock.getModelExecutionOverride.mockReturnValue(undefined)
+    Object.defineProperty(window, 'innerWidth', {
+      configurable: true,
+      value: WINDOW_INNER_WIDTH,
+    })
+    Object.defineProperty(window, 'innerHeight', {
+      configurable: true,
+      value: WINDOW_INNER_HEIGHT,
+    })
+  })
+
+  afterEach(() => {
+    cleanup()
+    document.querySelectorAll('#right-workspace-panel-shell').forEach(shell => shell.remove())
+    vi.restoreAllMocks()
+    Object.defineProperty(window, 'innerWidth', {
+      configurable: true,
+      value: originalInnerWidth,
+    })
+    Object.defineProperty(window, 'innerHeight', {
+      configurable: true,
+      value: originalInnerHeight,
+    })
+  })
+
+  test('positions the menu to the left of the right workspace panel shell', async () => {
+    createShellElement()
+
+    render(
+      <ModelSelector
+        models={[SAMPLE_MODEL]}
+        selectedModel={SAMPLE_MODEL}
+        selectedModelOptions={{}}
+        disabled={false}
+        onSelectModel={vi.fn()}
+        onSelectModelOption={vi.fn()}
+      />
+    )
+
+    const button = screen.getByTestId('model-selector-button')
+    setButtonRect(button)
+    fireEvent.click(button)
+
+    const menu = await waitFor(() => screen.getByTestId('model-selector-menu'))
+    const wrapper = menu.parentElement
+    expect(wrapper).not.toBeNull()
+    const left = parseInt(wrapper!.style.left, 10)
+    expect(left).toBeLessThanOrEqual(SHELL_LEFT - 16)
+  })
+
+  test('caps the trigger width when maxClosedWidth is provided', () => {
+    createShellElement({ hidden: true })
+
+    const originalGetBoundingClientRect = HTMLElement.prototype.getBoundingClientRect
+    HTMLElement.prototype.getBoundingClientRect = function getBoundingClientRect() {
+      if (this.getAttribute('data-testid') === 'model-selector-button') {
+        return {
+          top: 500,
+          left: 700,
+          right: 940,
+          bottom: 540,
+          width: 240,
+          height: 40,
+          x: 700,
+          y: 500,
+          toJSON: () => {},
+        } as DOMRect
+      }
+      if (this.getAttribute('aria-hidden') === 'true' && this.tagName === 'SPAN') {
+        return {
+          top: 0,
+          left: 0,
+          right: 300,
+          bottom: 0,
+          width: 300,
+          height: 0,
+          x: 0,
+          y: 0,
+          toJSON: () => {},
+        } as DOMRect
+      }
+      return originalGetBoundingClientRect.call(this)
+    }
+
+    try {
+      render(
+        <ModelSelector
+          models={[SAMPLE_MODEL]}
+          selectedModel={SAMPLE_MODEL}
+          selectedModelOptions={{}}
+          disabled={false}
+          onSelectModel={vi.fn()}
+          onSelectModelOption={vi.fn()}
+          maxClosedWidth={160}
+        />
+      )
+
+      const button = screen.getByTestId('model-selector-button')
+      expect(button.style.getPropertyValue('--model-selector-width')).toBe('160px')
+      expect(button.style.width).toBe('var(--model-selector-width, auto)')
+    } finally {
+      HTMLElement.prototype.getBoundingClientRect = originalGetBoundingClientRect
+    }
+  })
+
+  test('keeps the trigger capped when opened with maxClosedWidth', async () => {
+    createShellElement({ hidden: true })
+
+    const originalGetBoundingClientRect = HTMLElement.prototype.getBoundingClientRect
+    HTMLElement.prototype.getBoundingClientRect = function getBoundingClientRect() {
+      if (this.getAttribute('data-testid') === 'model-selector-button') {
+        return {
+          top: 500,
+          left: 700,
+          right: 940,
+          bottom: 540,
+          width: 240,
+          height: 40,
+          x: 700,
+          y: 500,
+          toJSON: () => {},
+        } as DOMRect
+      }
+      if (this.getAttribute('aria-hidden') === 'true' && this.tagName === 'SPAN') {
+        return {
+          top: 0,
+          left: 0,
+          right: 300,
+          bottom: 0,
+          width: 300,
+          height: 0,
+          x: 0,
+          y: 0,
+          toJSON: () => {},
+        } as DOMRect
+      }
+      return originalGetBoundingClientRect.call(this)
+    }
+
+    try {
+      render(
+        <ModelSelector
+          models={[SAMPLE_MODEL]}
+          selectedModel={SAMPLE_MODEL}
+          selectedModelOptions={{}}
+          disabled={false}
+          onSelectModel={vi.fn()}
+          onSelectModelOption={vi.fn()}
+          maxClosedWidth={160}
+        />
+      )
+
+      const button = screen.getByTestId('model-selector-button')
+      fireEvent.click(button)
+      await waitFor(() => screen.getByTestId('model-selector-menu'))
+
+      expect(button.style.getPropertyValue('--model-selector-width')).toBe('160px')
+      expect(button.style.width).toBe('var(--model-selector-width, auto)')
+    } finally {
+      HTMLElement.prototype.getBoundingClientRect = originalGetBoundingClientRect
+    }
+  })
+
+  test('uses the default closed width cap when maxClosedWidth is omitted', () => {
+    createShellElement({ hidden: true })
+
+    const originalGetBoundingClientRect = HTMLElement.prototype.getBoundingClientRect
+    HTMLElement.prototype.getBoundingClientRect = function getBoundingClientRect() {
+      if (this.getAttribute('data-testid') === 'model-selector-button') {
+        return {
+          top: 500,
+          left: 700,
+          right: 940,
+          bottom: 540,
+          width: 240,
+          height: 40,
+          x: 700,
+          y: 500,
+          toJSON: () => {},
+        } as DOMRect
+      }
+      if (this.getAttribute('aria-hidden') === 'true' && this.tagName === 'SPAN') {
+        return {
+          top: 0,
+          left: 0,
+          right: 300,
+          bottom: 0,
+          width: 300,
+          height: 0,
+          x: 0,
+          y: 0,
+          toJSON: () => {},
+        } as DOMRect
+      }
+      return originalGetBoundingClientRect.call(this)
+    }
+
+    try {
+      render(
+        <ModelSelector
+          models={[SAMPLE_MODEL]}
+          selectedModel={SAMPLE_MODEL}
+          selectedModelOptions={{}}
+          disabled={false}
+          onSelectModel={vi.fn()}
+          onSelectModelOption={vi.fn()}
+        />
+      )
+
+      const button = screen.getByTestId('model-selector-button')
+      expect(button.style.getPropertyValue('--model-selector-width')).toBe('208px')
+      expect(button.style.width).toBe('var(--model-selector-width, auto)')
+    } finally {
+      HTMLElement.prototype.getBoundingClientRect = originalGetBoundingClientRect
+    }
+  })
+})
diff --git a/wework/src/components/chat/composer/ModelSelector.tsx b/wework/src/components/chat/composer/ModelSelector.tsx
index 7d4c9377d6b..610de4203ba 100644
--- a/wework/src/components/chat/composer/ModelSelector.tsx
+++ b/wework/src/components/chat/composer/ModelSelector.tsx
@@ -60,6 +60,15 @@ const SUBMENU_VIEWPORT_VERTICAL_GAP = 128
 const DESKTOP_HIDDEN_CONTROL_IDS = new Set(['collaborationMode'])
 type DesktopSubmenuTarget = { type: 'models' } | { type: 'control'; id: string } | { type: 'none' }
 
+function getDesktopViewportRightBoundary(): number {
+  const shell = document.getElementById('right-workspace-panel-shell')
+  if (shell && shell.getAttribute('aria-hidden') !== 'true') {
+    const rect = shell.getBoundingClientRect()
+    if (rect.width > 0) return Math.round(rect.left)
+  }
+  return window.innerWidth
+}
+
 function isCloudModel(model: UnifiedModel): boolean {
   return getModelExecutionOverride(model)?.source === 'cloud'
 }
@@ -77,6 +86,7 @@ export function ModelSelector({
   menuPlacement = 'above',
   buttonClassName = '',
   menuClassName = '',
+  maxClosedWidth,
 }: ModelSelectorProps) {
   const { t } = useTranslation('common')
   const isMobile = useIsMobile()
@@ -166,7 +176,8 @@ export function ModelSelector({
     const maxTop = viewportBottom - menuHeight
     const clampedTop = Math.round(Math.max(viewportTop, Math.min(preferredTop, maxTop)))
     const menuWidth = menuPanel.getBoundingClientRect().width || MAIN_MENU_WIDTH
-    const maxLeft = window.innerWidth - VIEWPORT_MARGIN - menuWidth
+    const viewportRight = getDesktopViewportRightBoundary()
+    const maxLeft = viewportRight - VIEWPORT_MARGIN - menuWidth
     const preferredLeft = buttonRect.right - menuWidth
     const clampedLeft = Math.round(Math.max(VIEWPORT_MARGIN, Math.min(preferredLeft, maxLeft)))
 
@@ -211,7 +222,7 @@ export function ModelSelector({
     const measuredMenuWidth = menuRect.width || MAIN_MENU_WIDTH
     const measuredSubmenuWidth = submenuRect?.width || SUBMENU_WIDTH
     const rightSideLeft = measuredMenuWidth + SUBMENU_GAP
-    const viewportWidth = window.innerWidth
+    const viewportWidth = getDesktopViewportRightBoundary()
     const availableRight = viewportWidth - VIEWPORT_MARGIN - menuRect.left - rightSideLeft
     const availableLeft = menuRect.left - VIEWPORT_MARGIN - SUBMENU_GAP
     const rightSideWidth = Math.max(0, Math.min(measuredSubmenuWidth, availableRight))
@@ -1004,6 +1015,7 @@ export function ModelSelector({
         ariaLabel={t('workbench.model_selector')}
         tooltipLabel={t('workbench.model_picker_title', '选择模型')}
         buttonClassName={buttonClassName}
+        maxClosedWidth={maxClosedWidth}
         onToggle={() => {
           if (disabled) return
           setOpen(current => {
diff --git a/wework/src/components/chat/composer/ModelSelectorTrigger.tsx b/wework/src/components/chat/composer/ModelSelectorTrigger.tsx
index c1334349207..be9bdf32d83 100644
--- a/wework/src/components/chat/composer/ModelSelectorTrigger.tsx
+++ b/wework/src/components/chat/composer/ModelSelectorTrigger.tsx
@@ -10,7 +10,6 @@ import {
 import { KeyboardShortcut } from '@/components/common/KeyboardShortcut'
 import { cn } from '@/lib/utils'
 
-const OPEN_WIDTH = 240
 const CLOSED_MAX_WIDTH = 208
 const HORIZONTAL_CHROME = 36
 
@@ -25,6 +24,7 @@ interface ModelSelectorTriggerProps {
   ariaLabel: string
   tooltipLabel: string
   buttonClassName?: string
+  maxClosedWidth?: number
   onToggle: () => void
 }
 
@@ -52,6 +52,7 @@ export function ModelSelectorTrigger({
   ariaLabel,
   tooltipLabel,
   buttonClassName,
+  maxClosedWidth = CLOSED_MAX_WIDTH,
   onToggle,
 }: ModelSelectorTriggerProps) {
   const measureRef = useRef<HTMLSpanElement>(null)
@@ -76,8 +77,8 @@ export function ModelSelectorTrigger({
       if (measuredWidth <= 0) return
       const naturalWidth = Math.ceil(measuredWidth) + HORIZONTAL_CHROME
       button.style.setProperty(
-        '--model-selector-closed-width',
-        `${Math.max(64, Math.min(CLOSED_MAX_WIDTH, naturalWidth))}px`
+        '--model-selector-width',
+        `${Math.max(64, Math.min(maxClosedWidth, naturalWidth))}px`
       )
     }
 
@@ -90,12 +91,12 @@ export function ModelSelectorTrigger({
       observer?.disconnect()
       window.removeEventListener('resize', updateWidth)
     }
-  }, [buttonRef, isMobile, label])
+  }, [buttonRef, isMobile, label, maxClosedWidth])
 
   const desktopStyle: CSSProperties | undefined = isMobile
     ? undefined
     : {
-        width: open ? OPEN_WIDTH : 'var(--model-selector-closed-width, auto)',
+        width: 'var(--model-selector-width, auto)',
       }
   const showTooltip = !isMobile && !open && !tooltipSuppressed
 
diff --git a/wework/src/components/chat/composer/QuickPhraseMenu.test.tsx b/wework/src/components/chat/composer/QuickPhraseMenu.test.tsx
index e75317307d5..0b1f67688eb 100644
--- a/wework/src/components/chat/composer/QuickPhraseMenu.test.tsx
+++ b/wework/src/components/chat/composer/QuickPhraseMenu.test.tsx
@@ -73,6 +73,24 @@ describe('QuickPhraseMenu', () => {
     expect(screen.getByTestId('quick-phrase-stash-preview')).toHaveTextContent('两张图片')
   })
 
+  test('renders icon-only without label when iconOnly is true', () => {
+    render(<QuickPhraseMenu iconOnly onSelect={vi.fn()} />)
+
+    const button = screen.getByTestId('quick-phrase-button')
+    expect(button).not.toHaveTextContent('快捷短语')
+    expect(button.className).toContain('h-8')
+    expect(button.className).toContain('w-8')
+  })
+
+  test('renders compact circular button without label when compact is true', () => {
+    render(<QuickPhraseMenu compact onSelect={vi.fn()} />)
+
+    const button = screen.getByTestId('quick-phrase-button')
+    expect(button).not.toHaveTextContent('快捷短语')
+    expect(button.className).toContain('h-11')
+    expect(button.className).toContain('w-11')
+  })
+
   test('deletes a stash without selecting it', async () => {
     const onSelect = vi.fn()
     appPreferenceMocks.get.mockResolvedValue({
diff --git a/wework/src/components/chat/composer/model-selector-types.ts b/wework/src/components/chat/composer/model-selector-types.ts
index 477e298e455..00e6518a34c 100644
--- a/wework/src/components/chat/composer/model-selector-types.ts
+++ b/wework/src/components/chat/composer/model-selector-types.ts
@@ -13,4 +13,5 @@ export interface ModelSelectorProps {
   menuPlacement?: 'above' | 'below'
   buttonClassName?: string
   menuClassName?: string
+  maxClosedWidth?: number
 }
diff --git a/wework/src/components/layout/DesktopSidebar.test.tsx b/wework/src/components/layout/DesktopSidebar.test.tsx
index 90422d4db5e..2cb60ef9299 100644
--- a/wework/src/components/layout/DesktopSidebar.test.tsx
+++ b/wework/src/components/layout/DesktopSidebar.test.tsx
@@ -844,6 +844,40 @@ describe('DesktopSidebar', () => {
     expect(screen.queryByTestId('sidebar-cloud-error-popover')).not.toBeInTheDocument()
   })
 
+  test('closes cloud work error details when clicking outside', async () => {
+    renderSidebar({
+      devices: [localDevice()],
+      cloudWorkStatus: cloudWorkStatus({
+        availability: 'unavailable',
+        checks: { devices: 'unavailable', runtimeWork: 'available' },
+        error: '云端设备: request timed out',
+      }),
+    })
+
+    await userEvent.click(screen.getByTestId('sidebar-cloud-error-button'))
+    expect(screen.getByTestId('sidebar-cloud-error-popover')).toBeInTheDocument()
+
+    await userEvent.click(document.body)
+    expect(screen.queryByTestId('sidebar-cloud-error-popover')).not.toBeInTheDocument()
+  })
+
+  test('does not close cloud work error details when clicking inside', async () => {
+    renderSidebar({
+      devices: [localDevice()],
+      cloudWorkStatus: cloudWorkStatus({
+        availability: 'unavailable',
+        checks: { devices: 'unavailable', runtimeWork: 'available' },
+        error: '云端设备: request timed out',
+      }),
+    })
+
+    await userEvent.click(screen.getByTestId('sidebar-cloud-error-button'))
+    const detail = screen.getByTestId('sidebar-cloud-error-popover')
+
+    await userEvent.click(detail)
+    expect(screen.getByTestId('sidebar-cloud-error-popover')).toBeInTheDocument()
+  })
+
   test('does not open add-device guidance while cloud work checks are failing', async () => {
     const onGetRemoteDeviceStartupCommand = vi.fn()
     renderSidebar({
diff --git a/wework/src/components/layout/workspace-panels/WorkspaceBrowserPanel.test.tsx b/wework/src/components/layout/workspace-panels/WorkspaceBrowserPanel.test.tsx
index fc3e0881f6f..57a39f2f80a 100644
--- a/wework/src/components/layout/workspace-panels/WorkspaceBrowserPanel.test.tsx
+++ b/wework/src/components/layout/workspace-panels/WorkspaceBrowserPanel.test.tsx
@@ -93,6 +93,7 @@ describe('WorkspaceBrowserPanel', () => {
     embeddedBrowserMocks.goForwardEmbeddedBrowser.mockResolvedValue(undefined)
     embeddedBrowserMocks.navigateEmbeddedBrowser.mockResolvedValue(undefined)
     embeddedBrowserMocks.reloadEmbeddedBrowser.mockResolvedValue(undefined)
+    embeddedBrowserMocks.resumeEmbeddedBrowserDownload.mockResolvedValue(undefined)
     embeddedBrowserMocks.setEmbeddedBrowserBounds.mockResolvedValue(undefined)
   })
 
diff --git a/wework/src/components/layout/workspace-panels/WorkspaceBrowserPanel.tsx b/wework/src/components/layout/workspace-panels/WorkspaceBrowserPanel.tsx
index e4db98c3aa2..8155c404977 100644
--- a/wework/src/components/layout/workspace-panels/WorkspaceBrowserPanel.tsx
+++ b/wework/src/components/layout/workspace-panels/WorkspaceBrowserPanel.tsx
@@ -1276,7 +1276,7 @@ export function WorkspaceBrowserPanel({
       )
       window.removeEventListener(EMBEDDED_BROWSER_OCCLUSION_EVENT, handleBrowserOcclusion)
     }
-  }, [])
+  }, [label])
 
   useEffect(() => {
     void syncEmbeddedBrowserBounds(active).catch(error => {
diff --git a/wework/src/components/projects/DeviceFolderPicker.tsx b/wework/src/components/projects/DeviceFolderPicker.tsx
index 2a3c75f85ee..d12717081b3 100644
--- a/wework/src/components/projects/DeviceFolderPicker.tsx
+++ b/wework/src/components/projects/DeviceFolderPicker.tsx
@@ -248,7 +248,7 @@ export function DeviceFolderPicker({
             data-testid="device-folder-parent-button"
             disabled={pickerDisabled || submitting || !currentPath || currentPath === '/'}
             onClick={() => browsePath(getParentPath(currentPath))}
-            className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg text-[#9a9a9a] hover:bg-white/5 hover:text-white disabled:opacity-40"
+            className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg text-text-secondary hover:bg-muted hover:text-text-primary disabled:opacity-40"
             aria-label={t('workbench.project_directory_parent', '返回上级目录')}
           >
             <ChevronLeft className="h-5 w-5" />
@@ -257,7 +257,7 @@ export function DeviceFolderPicker({
         <label
           className={
             dark
-              ? 'min-w-0 flex-1 rounded-[10px] border border-[#555] bg-[#2b2b2b] px-3'
+              ? 'min-w-0 flex-1 rounded-[10px] border border-border bg-background px-3'
               : 'min-w-0 flex-1'
           }
         >
@@ -280,7 +280,7 @@ export function DeviceFolderPicker({
             }}
             className={
               dark
-                ? 'h-10 w-full border border-transparent bg-transparent font-mono text-sm text-white outline-none disabled:opacity-60'
+                ? 'h-10 w-full border border-transparent bg-transparent font-mono text-sm text-text-primary outline-none disabled:opacity-60'
                 : 'h-9 w-full rounded-md border border-transparent bg-transparent px-1 font-mono text-sm text-[#3c4043] outline-none focus:border-[#14b8a6] focus:bg-white focus:ring-2 focus:ring-[#14b8a6]/20 disabled:opacity-60'
             }
             placeholder={t('workbench.project_directory_loading', '正在加载目录...')}
@@ -305,12 +305,14 @@ export function DeviceFolderPicker({
         <div
           className={
             dark
-              ? 'flex items-center gap-2 border-b border-[#454545] px-3 py-2'
+              ? 'flex items-center gap-2 border-b border-border px-3 py-2'
               : 'flex items-center gap-2 border-b border-[#e5e5e5] px-3 py-2'
           }
         >
           <FolderPlus
-            className={dark ? 'h-4 w-4 shrink-0 text-[#a8a8a8]' : 'h-4 w-4 shrink-0 text-[#606368]'}
+            className={
+              dark ? 'h-4 w-4 shrink-0 text-text-secondary' : 'h-4 w-4 shrink-0 text-[#606368]'
+            }
           />
           <input
             data-testid="device-folder-name-input"
@@ -329,7 +331,7 @@ export function DeviceFolderPicker({
             }}
             className={
               dark
-                ? 'h-10 min-w-0 flex-1 rounded-xl border border-[#454545] bg-[#303030] px-3 text-sm text-white outline-none focus:border-[#707070] disabled:opacity-60'
+                ? 'h-10 min-w-0 flex-1 rounded-xl border border-border bg-muted px-3 text-sm text-text-primary outline-none focus:border-text-secondary disabled:opacity-60'
                 : 'h-9 min-w-0 flex-1 rounded-md border border-[#d8d8d8] px-2 text-sm outline-none focus:border-text-primary focus:ring-2 focus:ring-text-primary/10 disabled:opacity-60'
             }
             placeholder={t('workbench.project_create_folder_placeholder', '输入文件夹名称')}
@@ -342,7 +344,7 @@ export function DeviceFolderPicker({
           data-testid="device-folder-picker-error"
           className={
             dark
-              ? 'border-b border-[#454545] px-3 py-2 text-xs text-red-300'
+              ? 'border-b border-border px-3 py-2 text-xs text-red-500'
               : 'border-b border-[#e5e5e5] px-3 py-2 text-xs text-[#c44]'
           }
         >
@@ -354,7 +356,7 @@ export function DeviceFolderPicker({
         data-testid="device-folder-directory-list"
         className={
           dark
-            ? 'h-[280px] overflow-auto rounded-[10px] border border-[#454545] bg-[#2b2b2b] p-2'
+            ? 'h-[280px] overflow-auto rounded-[10px] border border-border bg-background p-2'
             : 'max-h-[320px] overflow-auto p-2'
         }
       >
@@ -365,7 +367,7 @@ export function DeviceFolderPicker({
             onClick={() => browsePath(getParentPath(currentPath))}
             className={
               dark
-                ? 'flex h-10 w-full items-center gap-3 rounded-lg px-2 text-left text-base text-[#d8d8d8] hover:bg-white/5'
+                ? 'flex h-10 w-full items-center gap-3 rounded-lg px-2 text-left text-base text-text-secondary hover:bg-muted'
                 : 'flex h-8 w-full items-center gap-2 rounded-md px-2 text-left text-sm text-[#3c4043] hover:bg-[#f1f3f4]'
             }
           >
@@ -376,7 +378,7 @@ export function DeviceFolderPicker({
         {loadingDirectories && (
           <p
             className={
-              dark ? 'px-2 py-3 text-sm text-[#9a9a9a]' : 'px-2 py-3 text-sm text-[#8a8f98]'
+              dark ? 'px-2 py-3 text-sm text-text-secondary' : 'px-2 py-3 text-sm text-[#8a8f98]'
             }
           >
             {t('workbench.project_directory_loading', '正在加载目录...')}
@@ -397,7 +399,9 @@ export function DeviceFolderPicker({
                   dark
                     ? [
                         'flex h-8 w-full items-center gap-2 rounded-md px-2 text-left text-sm',
-                        selected ? 'bg-white/10 text-white' : 'text-[#f2f2f2] hover:bg-white/5',
+                        selected
+                          ? 'bg-muted text-text-primary'
+                          : 'text-text-primary hover:bg-muted',
                       ].join(' ')
                     : [
                         'flex h-8 w-full items-center gap-2 rounded-md px-2 text-left text-sm',
@@ -407,7 +411,9 @@ export function DeviceFolderPicker({
                       ].join(' ')
                 }
               >
-                <Folder className={dark ? 'h-4 w-4 shrink-0 text-[#a8a8a8]' : 'h-4 w-4 shrink-0'} />
+                <Folder
+                  className={dark ? 'h-4 w-4 shrink-0 text-text-secondary' : 'h-4 w-4 shrink-0'}
+                />
                 <span className="min-w-0 flex-1 truncate">{directory}</span>
                 {selected && <Check className="h-4 w-4 shrink-0" />}
               </button>
@@ -417,7 +423,7 @@ export function DeviceFolderPicker({
           <p
             className={
               dark
-                ? 'px-2 py-8 text-center text-sm text-[#9a9a9a]'
+                ? 'px-2 py-8 text-center text-sm text-text-secondary'
                 : 'px-2 py-8 text-center text-sm text-[#8a8f98]'
             }
           >
@@ -440,7 +446,7 @@ export function DeviceFolderPicker({
           onClick={onCancel}
           className={
             dark
-              ? 'h-9 rounded-[10px] px-4 text-sm font-medium text-[#a8a8a8] hover:bg-white/5 hover:text-white disabled:opacity-50'
+              ? 'h-9 rounded-[10px] px-4 text-sm font-medium text-text-secondary hover:bg-muted hover:text-text-primary disabled:opacity-50'
               : 'h-10 rounded-md border border-[#d8d8d8] px-3 text-sm font-medium text-[#3c4043] hover:bg-[#f7f7f8] disabled:opacity-50'
           }
         >
@@ -453,7 +459,7 @@ export function DeviceFolderPicker({
           onClick={() => void handleConfirm()}
           className={
             dark
-              ? 'inline-flex h-9 items-center gap-2 rounded-[10px] bg-white px-4 text-sm font-medium text-[#1f1f1f] hover:bg-white/90 disabled:opacity-50'
+              ? 'inline-flex h-9 items-center gap-2 rounded-[10px] bg-text-primary px-4 text-sm font-medium text-background hover:bg-text-primary/90 disabled:opacity-50'
               : 'inline-flex h-10 items-center gap-2 rounded-md bg-text-primary px-3 text-sm font-medium text-background hover:bg-text-primary/90 disabled:opacity-50'
           }
         >
diff --git a/wework/src/components/projects/StandaloneProjectDialogs.tsx b/wework/src/components/projects/StandaloneProjectDialogs.tsx
index e06e98a92bc..b823f59626b 100644
--- a/wework/src/components/projects/StandaloneProjectDialogs.tsx
+++ b/wework/src/components/projects/StandaloneProjectDialogs.tsx
@@ -540,10 +540,10 @@ export function StandaloneFolderProjectDialog({
         aria-modal="true"
         data-testid="standalone-folder-project-dialog"
         className={[
-          'max-h-[92vh] w-full overflow-y-auto shadow-2xl',
+          'max-h-[92vh] w-full overflow-y-auto border border-border bg-popover shadow-2xl text-text-primary',
           usesRemoteFolderPicker
-            ? 'max-w-[520px] rounded-[24px] border border-[#3a3a3a] bg-[#262626] p-5 text-white'
-            : 'max-w-[760px] rounded-2xl border border-border bg-surface p-6 text-text-primary',
+            ? 'max-w-[520px] rounded-[24px] p-5'
+            : 'max-w-[760px] rounded-2xl p-6',
         ].join(' ')}
       >
         <div className="flex items-start justify-between gap-4">
@@ -552,7 +552,7 @@ export function StandaloneFolderProjectDialog({
             <p
               className={
                 usesRemoteFolderPicker
-                  ? 'mt-2 max-w-[440px] text-sm leading-5 text-[#9a9a9a]'
+                  ? 'mt-2 max-w-[440px] text-sm leading-5 text-text-secondary'
                   : 'mt-2 max-w-[560px] text-sm leading-6 text-text-secondary'
               }
             >
@@ -563,11 +563,10 @@ export function StandaloneFolderProjectDialog({
             type="button"
             data-testid="close-standalone-folder-project-dialog"
             onClick={closeDialog}
-            className={
-              usesRemoteFolderPicker
-                ? 'flex h-8 min-w-[32px] shrink-0 items-center justify-center rounded-lg text-[#b8b8b8] hover:bg-white/10 hover:text-white'
-                : 'flex h-10 min-w-[40px] shrink-0 items-center justify-center rounded-lg text-text-secondary hover:bg-muted'
-            }
+            className={[
+              'flex shrink-0 items-center justify-center rounded-lg text-text-secondary hover:bg-muted',
+              usesRemoteFolderPicker ? 'h-8 min-w-[32px]' : 'h-10 min-w-[40px]',
+            ].join(' ')}
             aria-label={t('workbench.close_dialog', '关闭')}
           >
             <X className="h-5 w-5" />
@@ -576,16 +575,16 @@ export function StandaloneFolderProjectDialog({
 
         {usesRemoteFolderPicker && selectableDevices.length > 0 && !addingRemoteDevice && (
           <label className="mt-5 block">
-            <span className="text-sm font-medium text-white">
+            <span className="text-sm font-medium text-text-primary">
               {t('workbench.remote_host', '远程主机')}
             </span>
-            <span className="mt-2 flex h-10 items-center gap-2.5 rounded-[10px] border border-[#454545] bg-[#2b2b2b] px-3">
-              <Globe2 className="h-4 w-4 text-cyan-400" />
+            <span className="mt-2 flex h-10 items-center gap-2.5 rounded-[10px] border border-border bg-background px-3">
+              <Globe2 className="h-4 w-4 text-primary" />
               <select
                 data-testid="standalone-remote-device-select"
                 value={activeDevice?.device_id ?? ''}
                 onChange={event => setActiveDeviceId(event.target.value)}
-                className="min-w-0 flex-1 bg-transparent text-sm text-white outline-none"
+                className="min-w-0 flex-1 bg-transparent text-sm text-text-primary outline-none"
               >
                 {selectableDevices.map(device => (
                   <option key={device.device_id} value={device.device_id}>
@@ -701,16 +700,16 @@ export function StandaloneFolderProjectDialog({
                         : activeStartupCommand.description}
                   </p>
 
-                  <div className="mt-3 overflow-hidden rounded-lg border border-zinc-800 bg-zinc-950">
-                    <div className="flex h-9 items-center justify-between gap-3 border-b border-zinc-800 px-3">
-                      <span className="truncate text-xs font-semibold text-zinc-300">
+                  <div className="mt-3 overflow-hidden rounded-lg border border-border bg-background">
+                    <div className="flex h-9 items-center justify-between gap-3 border-b border-border px-3">
+                      <span className="truncate text-xs font-semibold text-text-secondary">
                         {t('workbench.remote_device_startup_script_title', '启动脚本')}
                       </span>
                       <button
                         type="button"
                         data-testid="copy-remote-device-startup-command"
                         onClick={() => void copyStartupCommand()}
-                        className="inline-flex h-7 shrink-0 items-center gap-1.5 rounded-md px-2 text-xs font-medium text-zinc-300 hover:bg-zinc-800 hover:text-white"
+                        className="inline-flex h-7 shrink-0 items-center gap-1.5 rounded-md px-2 text-xs font-medium text-text-secondary hover:bg-muted hover:text-text-primary"
                       >
                         {startupCommandCopied ? (
                           <Check className="h-3.5 w-3.5" />
@@ -724,7 +723,7 @@ export function StandaloneFolderProjectDialog({
                     </div>
                     <pre
                       data-testid="remote-device-startup-command"
-                      className="max-h-[220px] overflow-auto whitespace-pre p-3 font-mono text-xs leading-5 text-green-300"
+                      className="max-h-[220px] overflow-auto whitespace-pre p-3 font-mono text-xs leading-5 text-text-primary"
                     >
                       {activeStartupCommand.command}
                     </pre>
@@ -745,7 +744,7 @@ export function StandaloneFolderProjectDialog({
         ) : (
           <div className="mt-5">
             {usesRemoteFolderPicker && (
-              <h3 className="mb-2 text-sm font-medium text-white">
+              <h3 className="mb-2 text-sm font-medium text-text-primary">
                 {t('workbench.project_directory_path', '文件夹路径')}
               </h3>
             )}
@@ -767,7 +766,7 @@ export function StandaloneFolderProjectDialog({
               }}
             />
             {usesRemoteFolderPicker && (
-              <p className="mt-4 text-sm leading-5 text-[#9a9a9a]">
+              <p className="mt-4 text-sm leading-5 text-text-secondary">
                 {t(
                   'workbench.remote_project_directory_note',
                   '此远程文件夹将作为单独项目显示在侧边栏中。'
diff --git a/wework/src/components/settings/AddCloudDeviceDialog.tsx b/wework/src/components/settings/AddCloudDeviceDialog.tsx
index 610bef94d7c..336d748dba3 100644
--- a/wework/src/components/settings/AddCloudDeviceDialog.tsx
+++ b/wework/src/components/settings/AddCloudDeviceDialog.tsx
@@ -182,14 +182,14 @@ export function AddCloudDeviceDialog({
               </div>
 
               {remoteCommand && (
-                <div className="mt-3 overflow-hidden rounded-lg border border-zinc-800 bg-zinc-950">
-                  <div className="flex h-8 items-center justify-between border-b border-zinc-800 px-3">
-                    <span className="text-xs font-semibold text-zinc-300">Docker 命令</span>
+                <div className="mt-3 overflow-hidden rounded-lg border border-border bg-background">
+                  <div className="flex h-8 items-center justify-between border-b border-border px-3">
+                    <span className="text-xs font-semibold text-text-secondary">Docker 命令</span>
                     <button
                       type="button"
                       data-testid="copy-remote-docker-command"
                       onClick={handleCopyRemoteCommand}
-                      className="inline-flex h-6 items-center gap-1 rounded px-2 text-xs text-zinc-300 hover:bg-zinc-800 hover:text-white"
+                      className="inline-flex h-6 items-center gap-1 rounded px-2 text-xs text-text-secondary hover:bg-muted hover:text-text-primary"
                     >
                       {copied ? <Check className="h-3 w-3" /> : <Copy className="h-3 w-3" />}
                       {copied ? '已复制' : '复制'}
@@ -197,7 +197,7 @@ export function AddCloudDeviceDialog({
                   </div>
                   <pre
                     data-testid="remote-docker-command"
-                    className="max-h-[360px] overflow-auto whitespace-pre p-3 font-mono text-xs leading-5 text-green-300"
+                    className="max-h-[360px] overflow-auto whitespace-pre p-3 font-mono text-xs leading-5 text-text-primary"
                   >
                     {remoteCommand.command}
                   </pre>
diff --git a/wework/src/features/cloud-connection/CloudConnectionDialog.tsx b/wework/src/features/cloud-connection/CloudConnectionDialog.tsx
index 3decea86f8b..d5973a0dd3a 100644
--- a/wework/src/features/cloud-connection/CloudConnectionDialog.tsx
+++ b/wework/src/features/cloud-connection/CloudConnectionDialog.tsx
@@ -14,6 +14,7 @@ import type { FormEvent } from 'react'
 import { createPortal } from 'react-dom'
 import { getRuntimeConfig } from '@/config/runtime'
 import { useEscapeKey } from '@/hooks/useEscapeKey'
+import { useEmbeddedBrowserOcclusion } from '@/hooks/useEmbeddedBrowserOcclusion'
 import { useTranslation } from '@/hooks/useTranslation'
 import { openCloudAuthorizationWindow } from '@/lib/cloud-authorization-window'
 import { normalizeCloudBackendUrl } from './cloudConnectionStorage'
@@ -45,6 +46,7 @@ export function CloudConnectionDialog({
 }: CloudConnectionDialogProps) {
   const { t } = useTranslation('common')
   const cloud = useOptionalCloudConnection()
+  useEmbeddedBrowserOcclusion('cloud-connection-dialog', open)
   const [backendUrl, setBackendUrl] = useState(
     () => cloud.backendUrl || getRuntimeConfig().wegentBackendUrl
   )
diff --git a/wework/src/hooks/useEmbeddedBrowserOcclusion.ts b/wework/src/hooks/useEmbeddedBrowserOcclusion.ts
new file mode 100644
index 00000000000..3a190d54eaf
--- /dev/null
+++ b/wework/src/hooks/useEmbeddedBrowserOcclusion.ts
@@ -0,0 +1,11 @@
+import { useEffect } from 'react'
+import { setEmbeddedBrowserOcclusion } from '@/lib/embedded-browser'
+
+export function useEmbeddedBrowserOcclusion(id: string, open: boolean): void {
+  useEffect(() => {
+    setEmbeddedBrowserOcclusion(id, open)
+    return () => {
+      setEmbeddedBrowserOcclusion(id, false)
+    }
+  }, [id, open])
+}
diff --git a/wework/src/lib/macosInputArrowKeyGuard.test.ts b/wework/src/lib/macosInputArrowKeyGuard.test.ts
new file mode 100644
index 00000000000..b018c5d86f6
--- /dev/null
+++ b/wework/src/lib/macosInputArrowKeyGuard.test.ts
@@ -0,0 +1,157 @@
+import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'
+
+const isTauriRuntimeMock = vi.hoisted(() => vi.fn())
+
+vi.mock('@/lib/runtime-environment', () => ({
+  isTauriRuntime: isTauriRuntimeMock,
+}))
+
+import { installMacOSInputArrowKeyGuard } from './macosInputArrowKeyGuard'
+
+describe('installMacOSInputArrowKeyGuard', () => {
+  let userAgent = ''
+
+  beforeEach(() => {
+    userAgent = ''
+    isTauriRuntimeMock.mockReset()
+    vi.stubGlobal('navigator', {
+      ...navigator,
+      get userAgent() {
+        return userAgent
+      },
+    })
+  })
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+    vi.unstubAllGlobals()
+  })
+
+  function createInput(
+    value = '',
+    selectionStart = 0,
+    selectionEnd = selectionStart
+  ): HTMLInputElement {
+    const input = document.createElement('input')
+    input.value = value
+    input.setSelectionRange(selectionStart, selectionEnd)
+    document.body.appendChild(input)
+    return input
+  }
+
+  function dispatchArrowKey(target: HTMLElement, key: 'ArrowLeft' | 'ArrowRight'): KeyboardEvent {
+    const event = new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true })
+    target.dispatchEvent(event)
+    return event
+  }
+
+  test('is a no-op when not running in Tauri', () => {
+    isTauriRuntimeMock.mockReturnValue(false)
+    userAgent = 'Macintosh; Intel Mac OS X 10_15_7'
+    const dispose = installMacOSInputArrowKeyGuard()
+    const input = createInput('', 0, 0)
+    const event = dispatchArrowKey(input, 'ArrowRight')
+    expect(event.defaultPrevented).toBe(false)
+    dispose()
+  })
+
+  test('is a no-op on non-macOS platforms', () => {
+    isTauriRuntimeMock.mockReturnValue(true)
+    userAgent = 'Windows NT 10.0; Win64; x64'
+    const dispose = installMacOSInputArrowKeyGuard()
+    const input = createInput('', 0, 0)
+    const event = dispatchArrowKey(input, 'ArrowRight')
+    expect(event.defaultPrevented).toBe(false)
+    dispose()
+  })
+
+  test('prevents ArrowRight at the end of an input', () => {
+    isTauriRuntimeMock.mockReturnValue(true)
+    userAgent = 'Macintosh; Intel Mac OS X 10_15_7'
+    const dispose = installMacOSInputArrowKeyGuard()
+    const input = createInput('hello', 5, 5)
+    const event = dispatchArrowKey(input, 'ArrowRight')
+    expect(event.defaultPrevented).toBe(true)
+    dispose()
+  })
+
+  test('prevents ArrowLeft at the start of an input', () => {
+    isTauriRuntimeMock.mockReturnValue(true)
+    userAgent = 'Macintosh; Intel Mac OS X 10_15_7'
+    const dispose = installMacOSInputArrowKeyGuard()
+    const input = createInput('hello', 0, 0)
+    const event = dispatchArrowKey(input, 'ArrowLeft')
+    expect(event.defaultPrevented).toBe(true)
+    dispose()
+  })
+
+  test('does not prevent ArrowLeft in the middle of an input', () => {
+    isTauriRuntimeMock.mockReturnValue(true)
+    userAgent = 'Macintosh; Intel Mac OS X 10_15_7'
+    const dispose = installMacOSInputArrowKeyGuard()
+    const input = createInput('hello', 2, 2)
+    const event = dispatchArrowKey(input, 'ArrowLeft')
+    expect(event.defaultPrevented).toBe(false)
+    dispose()
+  })
+
+  test('does not prevent ArrowRight before the end of an input', () => {
+    isTauriRuntimeMock.mockReturnValue(true)
+    userAgent = 'Macintosh; Intel Mac OS X 10_15_7'
+    const dispose = installMacOSInputArrowKeyGuard()
+    const input = createInput('hello', 2, 2)
+    const event = dispatchArrowKey(input, 'ArrowRight')
+    expect(event.defaultPrevented).toBe(false)
+    dispose()
+  })
+
+  test('ignores non-input targets', () => {
+    isTauriRuntimeMock.mockReturnValue(true)
+    userAgent = 'Macintosh; Intel Mac OS X 10_15_7'
+    const dispose = installMacOSInputArrowKeyGuard()
+    const div = document.createElement('div')
+    const event = dispatchArrowKey(div, 'ArrowRight')
+    expect(event.defaultPrevented).toBe(false)
+    dispose()
+  })
+
+  test('ignores IME composing events', () => {
+    isTauriRuntimeMock.mockReturnValue(true)
+    userAgent = 'Macintosh; Intel Mac OS X 10_15_7'
+    const dispose = installMacOSInputArrowKeyGuard()
+    const input = createInput('hello', 5, 5)
+    const event = new KeyboardEvent('keydown', {
+      key: 'ArrowRight',
+      bubbles: true,
+      cancelable: true,
+    })
+    Object.defineProperty(event, 'isComposing', { value: true })
+    input.dispatchEvent(event)
+    expect(event.defaultPrevented).toBe(false)
+    dispose()
+  })
+
+  test('ignores events with non-collapsed selection', () => {
+    isTauriRuntimeMock.mockReturnValue(true)
+    userAgent = 'Macintosh; Intel Mac OS X 10_15_7'
+    const dispose = installMacOSInputArrowKeyGuard()
+    const input = createInput('hello', 1, 4)
+    const event = dispatchArrowKey(input, 'ArrowRight')
+    expect(event.defaultPrevented).toBe(false)
+    dispose()
+  })
+
+  test('ignores disabled and read-only inputs', () => {
+    isTauriRuntimeMock.mockReturnValue(true)
+    userAgent = 'Macintosh; Intel Mac OS X 10_15_7'
+    const dispose = installMacOSInputArrowKeyGuard()
+    const disabledInput = createInput('hello', 5, 5)
+    disabledInput.disabled = true
+    expect(dispatchArrowKey(disabledInput, 'ArrowRight').defaultPrevented).toBe(false)
+
+    const readOnlyInput = createInput('hello', 0, 0)
+    readOnlyInput.readOnly = true
+    expect(dispatchArrowKey(readOnlyInput, 'ArrowLeft').defaultPrevented).toBe(false)
+    dispose()
+  })
+})
diff --git a/wework/src/lib/macosInputArrowKeyGuard.ts b/wework/src/lib/macosInputArrowKeyGuard.ts
new file mode 100644
index 00000000000..09a2892f62b
--- /dev/null
+++ b/wework/src/lib/macosInputArrowKeyGuard.ts
@@ -0,0 +1,53 @@
+import { isImeComposingEvent } from './ime'
+import { isTauriRuntime } from './runtime-environment'
+
+// Work around a macOS WKWebView/Tauri bug where arrow keys at the start/end of
+// a native text input leak through AppKit's insertText: path and insert U+FFFC
+// (object replacement character) / tofu glyphs. See tauri-apps/tauri#5685.
+const ARROW_LEFT = 'ArrowLeft'
+const ARROW_RIGHT = 'ArrowRight'
+
+function isMacOsPlatform(): boolean {
+  if (typeof navigator === 'undefined') return false
+  return /Mac/i.test(navigator.userAgent || '')
+}
+
+function isNativeTextInput(
+  target: EventTarget | null
+): target is HTMLInputElement | HTMLTextAreaElement {
+  if (!(target instanceof HTMLElement)) return false
+  const tagName = target.tagName
+  return tagName === 'INPUT' || tagName === 'TEXTAREA'
+}
+
+function shouldSwallowArrowKey(event: KeyboardEvent): boolean {
+  if (event.defaultPrevented) return false
+  if (event.key !== ARROW_LEFT && event.key !== ARROW_RIGHT) return false
+  if (!isNativeTextInput(event.target)) return false
+  if (event.isComposing || isImeComposingEvent(event)) return false
+
+  const input = event.target
+  if (input.disabled || input.readOnly) return false
+
+  const { selectionStart, selectionEnd, value } = input
+  if (selectionStart === null || selectionEnd === null) return false
+  if (selectionStart !== selectionEnd) return false
+
+  if (event.key === ARROW_LEFT && selectionStart === 0) return true
+  if (event.key === ARROW_RIGHT && selectionEnd === value.length) return true
+  return false
+}
+
+export function installMacOSInputArrowKeyGuard(): () => void {
+  if (!isTauriRuntime() || !isMacOsPlatform()) {
+    return () => undefined
+  }
+
+  const handleKeyDown = (event: KeyboardEvent) => {
+    if (!shouldSwallowArrowKey(event)) return
+    event.preventDefault()
+  }
+
+  document.addEventListener('keydown', handleKeyDown, true)
+  return () => document.removeEventListener('keydown', handleKeyDown, true)
+}