fix(composer): include Browser in the resource picker

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/plus-menu-dropdown/plus-menu-dropdown.test.tsx

@@ -0,0 +1,208 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act, createRef } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+const fixtures = vi.hoisted(() => ({
+  browserAvailable: vi.fn(() => true),
+  terminalAvailable: vi.fn(() => true),
+  resources: { data: [{ id: 'resource-1', name: 'Example' }], isPending: false },
+  folders: { data: [], isPending: false },
+  tabs: [],
+  logs: {
+    data: {
+      pages: [{ logs: [{ id: 'log-1', createdAt: '2026-01-01T12:00:00Z', status: 'success' }] }],
+    },
+    isPending: false,
+  },
+}))
+
+vi.mock('@/lib/browser-agent/transport', () => ({
+  isBrowserAgentAvailable: fixtures.browserAvailable,
+}))
+vi.mock('@/lib/terminal/transport', () => ({
+  isTerminalAvailable: fixtures.terminalAvailable,
+}))
+vi.mock('@/hooks/queries/workflows', () => ({ useWorkflows: () => fixtures.resources }))
+vi.mock('@/hooks/queries/tables', () => ({ useTablesList: () => fixtures.resources }))
+vi.mock('@/hooks/queries/workspace-files', () => ({ useWorkspaceFiles: () => fixtures.resources }))
+vi.mock('@/hooks/queries/kb/knowledge', () => ({
+  useKnowledgeBasesQuery: () => fixtures.resources,
+}))
+vi.mock('@/hooks/queries/folders', () => ({ useFolders: () => fixtures.folders }))
+vi.mock('@/hooks/queries/workspace-file-folders', () => ({
+  useWorkspaceFileFolders: () => fixtures.folders,
+}))
+vi.mock('@/hooks/queries/mothership-chats', () => ({
+  useMothershipChats: () => fixtures.resources,
+}))
+vi.mock('@/hooks/queries/logs', () => ({ useLogsList: () => fixtures.logs }))
+vi.mock('@/blocks/integration-matcher', () => ({
+  listIntegrationsByPopularity: () => [
+    { blockType: 'example', name: 'Example integration', icon: () => null },
+  ],
+}))
+vi.mock('@/stores/browser-session/store', () => ({ useBrowserSessionStore: () => fixtures.tabs }))
+vi.mock('@/stores/copilot-terminal/store', () => ({ useCopilotTerminalStore: () => fixtures.tabs }))
+
+import {
+  BROWSER_SESSION_RESOURCE_ID,
+  TERMINAL_SESSION_RESOURCE_ID,
+} from '@/lib/copilot/resources/types'
+import {
+  mapResourceToContext,
+  type PlusMenuHandle,
+} from '@/app/workspace/[workspaceId]/home/components/user-input/components/constants'
+import { PlusMenuDropdown } from '@/app/workspace/[workspaceId]/home/components/user-input/components/plus-menu-dropdown/plus-menu-dropdown'
+
+let root: Root
+let container: HTMLDivElement
+
+function openMenu(mention = false) {
+  const ref = createRef<PlusMenuHandle>()
+  const onResourceSelect = vi.fn()
+  act(() =>
+    root.render(
+      <PlusMenuDropdown
+        ref={ref}
+        workspaceId='workspace-1'
+        onResourceSelect={onResourceSelect}
+        onClose={vi.fn()}
+        textareaRef={createRef<HTMLTextAreaElement>()}
+        pendingCursorRef={{ current: null }}
+      />
+    )
+  )
+  act(() => ref.current?.open({ left: 0, top: 0 }, { mention }))
+  return { ref, onResourceSelect }
+}
+
+function menuItems(): HTMLElement[] {
+  return Array.from(document.querySelectorAll<HTMLElement>('[role="menuitem"]')).filter(
+    (item) => !item.closest('[hidden]')
+  )
+}
+
+function selectItem(name: string) {
+  const item = menuItems().find((item) => item.textContent === name)
+  if (!item) throw new Error(`Missing menu item: ${name}`)
+  act(() => item.click())
+}
+
+describe('PlusMenuDropdown desktop resources', () => {
+  const originalScrollIntoView = Object.getOwnPropertyDescriptor(
+    Element.prototype,
+    'scrollIntoView'
+  )
+
+  beforeEach(() => {
+    vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true)
+    vi.stubGlobal(
+      'ResizeObserver',
+      class {
+        observe() {}
+        unobserve() {}
+        disconnect() {}
+      }
+    )
+    vi.clearAllMocks()
+    fixtures.browserAvailable.mockReturnValue(true)
+    fixtures.terminalAvailable.mockReturnValue(true)
+    Object.defineProperty(Element.prototype, 'scrollIntoView', {
+      configurable: true,
+      value: vi.fn(),
+    })
+    container = document.createElement('div')
+    document.body.appendChild(container)
+    root = createRoot(container)
+  })
+
+  afterEach(() => {
+    act(() => root.unmount())
+    container.remove()
+    if (originalScrollIntoView) {
+      Object.defineProperty(Element.prototype, 'scrollIntoView', originalScrollIntoView)
+    } else {
+      Reflect.deleteProperty(Element.prototype, 'scrollIntoView')
+    }
+    vi.unstubAllGlobals()
+  })
+
+  it('keeps shared categories in the same order in browse and mention modes', () => {
+    const { ref } = openMenu()
+    const browseOrder = menuItems().map((item) => item.textContent)
+    expect(browseOrder).toEqual([
+      'Chats',
+      'Tables',
+      'Files',
+      'Knowledge Bases',
+      'Workflows',
+      'Logs',
+      'Browser',
+      'Terminal',
+    ])
+
+    act(() => ref.current?.open({ left: 0, top: 0 }, { mention: true }))
+    const headings = menuItems().map((item) => item.previousElementSibling?.textContent)
+    expect(headings).toEqual(['Integrations', ...browseOrder])
+  })
+
+  it.each([false, true])('selects the same whole Browser in mention=%s mode', (mention) => {
+    const { onResourceSelect } = openMenu(mention)
+    selectItem('Browser')
+
+    expect(onResourceSelect).toHaveBeenCalledExactlyOnceWith({
+      type: 'browser',
+      id: BROWSER_SESSION_RESOURCE_ID,
+      title: 'Browser',
+    })
+    expect(mapResourceToContext(onResourceSelect.mock.calls[0][0])).toEqual({
+      kind: 'browser_tab',
+      tabId: BROWSER_SESSION_RESOURCE_ID,
+      label: 'Browser',
+    })
+  })
+
+  it('finds Browser through plus-menu search and selects it with Enter', () => {
+    const { onResourceSelect } = openMenu()
+    const search = document.querySelector<HTMLInputElement>(
+      'input[placeholder="Search resources..."]'
+    )
+    const valueSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set
+    if (!search || !valueSetter) throw new Error('Search input is unavailable')
+    act(() => {
+      valueSetter.call(search, 'browser')
+      search.dispatchEvent(new Event('input', { bubbles: true }))
+    })
+    expect(menuItems().map((item) => item.textContent)).toEqual(['Browser'])
+    act(() => search.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true })))
+    expect(onResourceSelect).toHaveBeenCalledExactlyOnceWith({
+      type: 'browser',
+      id: BROWSER_SESSION_RESOURCE_ID,
+      title: 'Browser',
+    })
+  })
+
+  it.each([false, true])('keeps unavailable Browser hidden in mention=%s mode', (mention) => {
+    fixtures.browserAvailable.mockReturnValue(false)
+    const { onResourceSelect } = openMenu(mention)
+    expect(menuItems().some((item) => item.textContent === 'Browser')).toBe(false)
+    selectItem('Terminal')
+    expect(onResourceSelect).toHaveBeenCalledExactlyOnceWith({
+      type: 'terminal',
+      id: TERMINAL_SESSION_RESOURCE_ID,
+      title: 'Terminal',
+    })
+  })
+
+  it.each([false, true])('omits both desktop resources on web in mention=%s mode', (mention) => {
+    fixtures.browserAvailable.mockReturnValue(false)
+    fixtures.terminalAvailable.mockReturnValue(false)
+    openMenu(mention)
+    const names = menuItems().map((item) => item.textContent)
+    expect(names).not.toContain('Browser')
+    expect(names).not.toContain('Terminal')
+  })
+})

apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/plus-menu-dropdown/plus-menu-dropdown.tsx

@@ -52,7 +52,6 @@ const MENTION_MAX_HEIGHT_CLASS = 'max-h-[min(280px,var(--radix-popper-available-
  * (`ADD_RESOURCE_EXCLUDED_TYPES` in `resource-tabs`).
  */
 const MENTION_ONLY_RESOURCE_TYPES = new Set<MothershipResourceType>(['integration'])
-const NON_ATTACHABLE_RESOURCE_TYPES = new Set<MothershipResourceType>(['browser'])
 const EMPTY_BROWSER_TABS = [] as const
 const EMPTY_TERMINAL_TABS = [] as const
 
@@ -121,17 +120,11 @@ export const PlusMenuDropdown = React.memo(
       setOpen(false)
     }, [])
 
-    // The `+` browse menu hides non-attachable and mention-only resource types.
-    // `@` mode exposes the full catalog and adds each live Browser/Terminal tab
-    // after its always-present whole-resource row.
     const visibleResources = useMemo(() => {
       if (isMention) {
         return withDesktopTabMentions(availableResources, browserTabs, terminalTabs)
       }
-      const attachable = availableResources.filter(
-        ({ type }) => !NON_ATTACHABLE_RESOURCE_TYPES.has(type)
-      )
-      return attachable.filter(({ type }) => !MENTION_ONLY_RESOURCE_TYPES.has(type))
+      return availableResources.filter(({ type }) => !MENTION_ONLY_RESOURCE_TYPES.has(type))
     }, [availableResources, browserTabs, isMention, terminalTabs])
 
     const treeSections = useResourceTreeSections({