fix(extension): attach Sim pages and streamline composer controls

Author: waleedlatif1

apps/extension/scripts/test-e2e.ts

@@ -129,12 +129,17 @@ try {
   await signIn.close()
   const panel: Page = await context.newPage()
   // Observe dispatch before the bridge so background metadata queries stay outside each action.
-  await panel.addInitScript(() => {
+  const observeDispatch = () => {
     window.addEventListener('message', () => {
       document.documentElement.dataset.queryCountAtDispatch =
         document.documentElement.dataset.browserQueryCount ?? '0'
     })
-  })
+  }
+  const panelBundle = resolve(extensionPath, 'sidepanel.js')
+  await writeFile(
+    panelBundle,
+    `(${observeDispatch.toString()})();\n${await readFile(panelBundle, 'utf8')}`
+  )
   await panel.goto(`chrome-extension://${extensionId}/sidepanel.html`)
   await panel.getByTitle('Sim chat').waitFor()
   const frame: Frame = panel.frames()[1] ?? (await panel.waitForEvent('frameattached'))
@@ -668,6 +673,35 @@ try {
       await parentCdp.detach()
     }
   )
+  await check('Ordinary Sim pages attach without capturing sensitive fields', async () => {
+    for (const path of ['/workspace/example', '/extension-notes']) {
+      const before = (await snapshots()).length
+      await page.goto(`${origin}${path}?token=URL_SECRET#FRAGMENT_SECRET`)
+      await page.bringToFront()
+      await capture()
+      await expect.poll(async () => (await snapshots()).length).toBe(before + 1)
+      const snapshot = (await snapshots()).at(-1)
+      assert(snapshot?.url === `${origin}${path}`, 'Sim page URL retained private parameters')
+      assert(snapshot.text.includes('visible-reference-482'), 'Visible Sim page content is missing')
+      assert(!snapshot.text.includes('SENTINEL'), 'Sensitive Sim page content was captured')
+    }
+  })
+  await check('Embedded Sim chat pages cannot capture themselves', async () => {
+    for (const path of ['/extension', '/extension/workspace', '/extension/o/organization']) {
+      await page.goto(`${origin}/workspace/example`)
+      await page.bringToFront()
+      const previous = (await snapshots()).length
+      await capture()
+      await expect.poll(async () => (await snapshots()).length).toBe(previous + 1)
+      await expect(panel.getByRole('status')).toHaveText('')
+      const before = (await snapshots()).length
+      await page.goto(`${origin}${path}`)
+      await page.bringToFront()
+      await capture()
+      await panel.getByRole('status').filter({ hasText: 'Choose a regular web page' }).waitFor()
+      assert((await snapshots()).length === before, 'Embedded chat was captured')
+    }
+  })
   await check(
     'Site access stays modal without violating the packaged security policy',
     async () => {

apps/extension/src/capture.ts

@@ -23,12 +23,13 @@ export async function captureActivePage(
   }
   if (
     !['http:', 'https:'].includes(url.protocol) ||
-    url.origin === SIM_ORIGIN ||
+    (url.origin === SIM_ORIGIN &&
+      (url.pathname === '/extension' || url.pathname.startsWith('/extension/'))) ||
     url.username ||
     url.password ||
     tab.incognito
   ) {
-    throw new Error('Choose a regular web page outside Sim to attach.')
+    throw new Error('Choose a regular web page to attach.')
   }
   const results = await chrome.scripting.executeScript({
     target: expected

apps/sim/app/extension/[workspaceId]/chat.tsx

@@ -169,6 +169,7 @@ export function ExtensionChat({ workspaceId, workspaceName }: ExtensionChatProps
         draftScopeKey={`extension:${userId}:${workspaceId}:${selectedChatId ?? 'new'}`}
         composerAttachments={composer.attachments}
         composerResourceActions={composer.resourceActions}
+        composerToolbarActions={composer.toolbarActions}
         composerModelSelectorOptions={composer.modelSelectorOptions}
         layout='copilot-view'
         className={cn(

apps/sim/app/extension/hooks/use-composer.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useCallback, useMemo } from 'react'
-import { DropdownMenuItem, toast } from '@sim/emcn'
+import { Chip, DropdownMenuItem, Tooltip, toast } from '@sim/emcn'
 import { Globe, Highlighter, Settings } from '@sim/emcn/icons'
 import { getPageContextBudgetError } from '@/lib/mothership/chat/page-context'
 import { usePageContext } from '@/app/extension/hooks/use-page-context'
@@ -77,9 +77,27 @@ export function useExtensionComposer(scopeKey: string) {
     },
     [snapshots]
   )
+  const toolbarActions = useMemo(
+    () =>
+      connected ? (
+        <Tooltip.Root>
+          <Tooltip.Trigger asChild>
+            <Chip
+              shape='round'
+              leftIcon={Globe}
+              onClick={() => requestAction('capture-page')}
+              aria-label='Attach current page'
+            />
+          </Tooltip.Trigger>
+          <Tooltip.Content side='top'>Attach current page</Tooltip.Content>
+        </Tooltip.Root>
+      ) : undefined,
+    [connected, requestAction]
+  )
   return {
     attachments,
     resourceActions,
+    toolbarActions,
     modelSelectorOptions: MODEL_SELECTOR_OPTIONS,
     prepareSubmission,
     onSubmitted: clearSnapshots,

apps/sim/app/o/[organizationId]/components/organization-conversation.tsx

@@ -94,6 +94,7 @@ interface OrganizationConversationProps {
     header: ReactNode
     attachments?: ReactNode
     resourceActions?: ReactNode
+    toolbarActions?: ReactNode
     modelSelectorOptions?: ModelSelectorOptions
     onChatIdResolved: (chatId: string) => void
     onNavigateToChat: (chatId: string) => void
@@ -453,6 +454,7 @@ function OrganizationConversationContent({
       compact={Boolean(panelOptions)}
       attachments={panelOptions?.attachments}
       resourceActions={panelOptions?.resourceActions}
+      toolbarActions={panelOptions?.toolbarActions}
       modelSelectorOptions={panelOptions?.modelSelectorOptions}
       onPlanChange={
         !hasChat && destinationMode === 'agent' && planEnabled

apps/sim/app/o/[organizationId]/home/components/composer/composer.tsx

@@ -59,6 +59,7 @@ interface ComposerProps {
   compact?: boolean
   attachments?: ReactNode
   resourceActions?: ReactNode
+  toolbarActions?: ReactNode
   modelSelectorOptions?: ModelSelectorOptions
 }
 
@@ -80,6 +81,7 @@ export function Composer({
   compact = false,
   attachments,
   resourceActions,
+  toolbarActions,
   modelSelectorOptions,
 }: ComposerProps) {
   const attachedFilesRef = useRef(files.attachedFiles)
@@ -257,6 +259,7 @@ export function Composer({
         </Tooltip.Root>
       )}
       {!imagesOnly && contextPicker('skills', Slash, 'Skills')}
+      {toolbarActions}
       {onPlanChange && (
         <Chip
           shape='round'

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

@@ -88,6 +88,7 @@ interface MothershipChatProps {
   composer?: ReactNode
   composerAttachments?: ReactNode
   composerResourceActions?: ReactNode
+  composerToolbarActions?: ReactNode
   composerModelSelectorOptions?: ModelSelectorOptions
   messages: ChatMessage[]
   isSending: boolean
@@ -393,6 +394,7 @@ export function MothershipChat({
   composer,
   composerAttachments,
   composerResourceActions,
+  composerToolbarActions,
   composerModelSelectorOptions,
   messages: messagesProp,
   isSending,
@@ -1052,6 +1054,7 @@ export function MothershipChat({
                   onSubmit={onSubmit}
                   attachments={composerAttachments}
                   resourceActions={composerResourceActions}
+                  toolbarActions={composerToolbarActions}
                   modelSelectorOptions={composerModelSelectorOptions}
                   isSending={isStreamActive}
                   onStopGeneration={onStopGeneration}

apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/attached-files-list/attached-files-list.tsx

@@ -170,7 +170,7 @@ export const AttachedFilesList = React.memo(function AttachedFilesList({
     <div
       ref={scrollRef}
       className={cn(
-        'mb-1.5 max-md:max-h-[102px] max-md:overflow-y-auto max-md:overscroll-contain',
+        'mb-1.5 max-md:pointer-coarse:max-h-[102px] max-md:pointer-coarse:overflow-y-auto max-md:pointer-coarse:overscroll-contain',
         scrollFadeClass
       )}
       {...scrollFadeAttributes(edges)}

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

@@ -60,6 +60,7 @@ const logger = createLogger('UserInput')
 interface UserInputProps {
   attachments?: React.ReactNode
   resourceActions?: React.ReactNode
+  toolbarActions?: React.ReactNode
   modelSelectorOptions?: ModelSelectorOptions
   requestMode?: 'agent' | 'plan'
   onPlanChange?: () => void
@@ -98,6 +99,7 @@ const UserInputImpl = forwardRef<UserInputHandle, UserInputProps>(function UserI
   {
     attachments,
     resourceActions,
+    toolbarActions,
     modelSelectorOptions,
     requestMode = 'agent',
     onPlanChange,
@@ -679,6 +681,7 @@ const UserInputImpl = forwardRef<UserInputHandle, UserInputProps>(function UserI
               </Tooltip.Trigger>
               <Tooltip.Content side='top'>Skills</Tooltip.Content>
             </Tooltip.Root>
+            {toolbarActions}
             {onPlanChange && (
               <Chip
                 shape='round'

apps/sim/scripts/test-browser-extension-e2e.ts

@@ -446,16 +446,20 @@ try {
       })
     }, base.origin)
   await observeCaptureReceipts()
-  const capture = async (mode: 'page' | 'selection' = 'page') => {
+  const capture = async (mode: 'page' | 'selection' | 'shortcut' = 'page') => {
     await source.bringToFront()
     const before = Number(await shell.locator('body').getAttribute('data-capture-receipts'))
-    await frame().getByRole('button', { name: 'Add resources', exact: true }).press('Enter')
-    await frame()
-      .getByRole('menuitem', {
-        name: mode === 'page' ? 'Current page' : 'Selected text',
-        exact: true,
-      })
-      .press('Enter')
+    if (mode === 'shortcut') {
+      await frame().getByRole('button', { name: 'Attach current page', exact: true }).press('Enter')
+    } else {
+      await frame().getByRole('button', { name: 'Add resources', exact: true }).press('Enter')
+      await frame()
+        .getByRole('menuitem', {
+          name: mode === 'page' ? 'Current page' : 'Selected text',
+          exact: true,
+        })
+        .press('Enter')
+    }
     await expect(shell.locator('body')).toHaveAttribute('data-capture-receipts', String(before + 1))
   }
   const attachments = () => frame().getByRole('group', { name: 'Page attached to next message' })
@@ -772,7 +776,51 @@ try {
     async () => {
       await capture()
       await attachFile()
+      await shell.setViewportSize({ width: 320, height: 844 })
+      await capture()
+      await capture()
+      const geometry = await attachments()
+        .first()
+        .evaluate((chip) => {
+          const strip = chip.parentElement?.parentElement
+          if (!strip) throw new Error('Missing attachment strip')
+          return { height: strip.clientHeight, contentHeight: strip.scrollHeight }
+        })
+      assert(geometry.contentHeight > 102, 'The fixture did not exercise multiple attachment rows')
+      assert(
+        geometry.contentHeight <= geometry.height + 1,
+        'Desktop attachments require nested scrolling'
+      )
       await screenshot('mixed-attachments')
+      const device = await browserContext.newCDPSession(frame())
+      try {
+        await device.send('Emulation.setTouchEmulationEnabled', {
+          enabled: true,
+          maxTouchPoints: 1,
+        })
+        await expect
+          .poll(() => frame().evaluate(() => matchMedia('(pointer: coarse)').matches))
+          .toBe(true)
+        const touchGeometry = await attachments()
+          .first()
+          .evaluate((chip) => {
+            const strip = chip.parentElement?.parentElement
+            if (!strip) throw new Error('Missing attachment strip')
+            return { height: strip.clientHeight, contentHeight: strip.scrollHeight }
+          })
+        assert(touchGeometry.height <= 102, 'Touch attachments lost their height limit')
+        assert(
+          touchGeometry.contentHeight > touchGeometry.height,
+          'Touch overflow fixture did not wrap'
+        )
+        await screenshot('touch-attachments')
+      } finally {
+        await device.send('Emulation.setTouchEmulationEnabled', { enabled: false })
+        await device.detach()
+      }
+      await attachments().last().getByRole('button', { name: 'Remove page context' }).click()
+      await attachments().last().getByRole('button', { name: 'Remove page context' }).click()
+      await shell.setViewportSize({ width: 390, height: 844 })
       await attachments().first().getByRole('button', { name: 'Remove page context' }).click()
       await expect(
         frame().getByRole('button', { name: 'Remove extension-notes.txt', exact: true })
@@ -1223,6 +1271,25 @@ try {
       await screenshot('organization-first-open-capture')
     }
   )
+  await checkNative('The current-page shortcut attaches in both shared composers', async () => {
+    for (const path of [`/extension/${alphaId}`, `/extension/o/${organizationId}`]) {
+      await navigate(`${base.origin}${path}`)
+      await expect(attachments()).toHaveCount(0)
+      await capture('shortcut')
+      await expect(attachments()).toHaveCount(1)
+      await attachments()
+        .first()
+        .getByRole('button', { name: /^Review page context:/ })
+        .click()
+      const preview = frame().getByRole('dialog', { name: 'Page context', exact: true })
+      await expect(preview.locator('pre')).toContainText(captureText)
+      await preview.getByRole('button', { name: 'Close', exact: true }).click()
+      await frame().getByRole('button', { name: 'Attach current page', exact: true }).hover()
+      await expect(frame().getByRole('tooltip', { name: 'Attach current page' })).toBeVisible()
+      await screenshot(path.includes('/o/') ? 'shortcut-organization-agent' : 'shortcut-workspace')
+      await attachments().first().getByRole('button', { name: 'Remove page context' }).click()
+    }
+  })
   if (liveChat) {
     await checkNative(
       'Organization live admission preserves queued pages, files, and the admitted conversation mode',
@@ -1379,6 +1446,9 @@ try {
       await screenshot('organization-mode-file-recovery')
       await frame().getByRole('button', { name: 'Remove extension-notes.txt', exact: true }).click()
       await expect(frame().getByText(/Remove unsupported files/)).not.toBeVisible()
+      await attachments().first().getByRole('button', { name: 'Remove page context' }).click()
+      await capture('shortcut')
+      await expect(attachments()).toHaveCount(1)
       await screenshot('organization-assistant-page')
       if (!liveChat)
         await shell.route('**/api/mothership/chat', (route) =>