Add Composio connector suggestions to composer

AGENTS.md

@@ -15,7 +15,8 @@
   1. commit task in feature worktree
   2. create/switch feature branch
   3. rebase feature branch on `main`
-  4. from main worktree: `git checkout main && git merge --no-ff <feature-branch>`
+  4. if a GitHub PR exists or GitHub merge is available, prefer updating/creating the PR, rebasing the branch, and merging the PR on GitHub instead of merging locally
+  5. if no PR/GitHub merge path is available, from main worktree: `git checkout main && git merge --no-ff <feature-branch>`
 - If user explicitly asks for a single merge commit, use:
   - `git checkout main`
   - `git reset --hard <pre-merge-main-commit>`

src/App.vue

@@ -241,6 +241,10 @@
                 <span class="sidebar-settings-label">{{ t('Chat width') }}</span>
                 <span class="sidebar-settings-value">{{ chatWidthLabel }}</span>
               </button>
+              <button class="sidebar-settings-row" type="button" :title="SETTINGS_HELP.composioSuggestions" @click="toggleComposioSuggestions">
+                <span class="sidebar-settings-label">{{ t('Connector suggestions') }}</span>
+                <span class="sidebar-settings-toggle" :class="{ 'is-on': composioSuggestionsEnabled }" />
+              </button>
               <button class="sidebar-settings-row" type="button" :title="SETTINGS_HELP.dictationClickToToggle" @click="toggleDictationClickToToggle">
                 <span class="sidebar-settings-label">{{ t('Click to toggle dictation') }}</span>
                 <span class="sidebar-settings-toggle" :class="{ 'is-on': dictationClickToToggle }" />
@@ -938,11 +942,13 @@
                   :is-interrupting-turn="false" :send-with-enter="sendWithEnter" :in-progress-submit-mode="inProgressSendMode"
                   :dictation-click-to-toggle="dictationClickToToggle" :dictation-auto-send="dictationAutoSend"
                   :dictation-language="dictationLanguage"
+                  :composio-suggestions-enabled="composioSuggestionsEnabled"
                   @submit="onSubmitThreadMessage"
                   @update:selected-collaboration-mode="onSelectCollaborationMode"
                   @update:selected-model="onSelectModel"
                   @update:selected-reasoning-effort="onSelectReasoningEffort"
-                  @update:selected-speed-mode="onSelectSpeedMode" />
+                  @update:selected-speed-mode="onSelectSpeedMode"
+                  @open-composio-connector="onOpenComposioConnectorFromComposer" />
               </div>
             </div>
           </template>
@@ -1023,10 +1029,12 @@
                     :send-with-enter="sendWithEnter" :in-progress-submit-mode="inProgressSendMode"
                     :dictation-click-to-toggle="dictationClickToToggle" :dictation-auto-send="dictationAutoSend"
                     :dictation-language="dictationLanguage"
+                    :composio-suggestions-enabled="composioSuggestionsEnabled"
                     @update:selected-collaboration-mode="onSelectCollaborationMode"
                     @submit="onSubmitThreadMessage" @update:selected-model="onSelectModel"
                     @update:selected-reasoning-effort="onSelectReasoningEffort"
                     @update:selected-speed-mode="onSelectSpeedMode"
+                    @open-composio-connector="onOpenComposioConnectorFromComposer"
                     @interrupt="onInterruptTurn" />
                 </div>
               </template>
@@ -1189,6 +1197,7 @@ const SETTINGS_HELP = {
   inProgressSendMode: t('If a turn is still running, choose whether a new prompt should steer the current turn or be queued.'),
   appearance: t('Switch between system theme, light mode, and dark mode.'),
   chatWidth: t('Choose how wide the conversation column and composer can grow on desktop screens.'),
+  composioSuggestions: t('Show connector suggestions in the composer while typing connector names.'),
   dictationClickToToggle: t('Use click-to-start and click-to-stop dictation instead of hold-to-talk.'),
   dictationAutoSend: t('Automatically send transcribed dictation when recording stops.'),
   dictationLanguage: t('Choose transcription language or keep auto-detect.'),
@@ -1216,6 +1225,7 @@ type DirectoryTryItemPayload = {
   skillPath?: string
   prompt?: string
   attachedSkills?: Array<{ name: string; path: string }>
+  fileAttachments?: Array<{ label: string; path: string; fsPath: string }>
 }
 
 type ChatWidthPreset = {
@@ -1540,6 +1550,7 @@ const DARK_MODE_KEY = 'codex-web-local.dark-mode.v1'
 const DICTATION_CLICK_TO_TOGGLE_KEY = 'codex-web-local.dictation-click-to-toggle.v1'
 const DICTATION_AUTO_SEND_KEY = 'codex-web-local.dictation-auto-send.v1'
 const DICTATION_LANGUAGE_KEY = 'codex-web-local.dictation-language.v1'
+const COMPOSIO_SUGGESTIONS_ENABLED_KEY = 'codex-web-local.composio-suggestions-enabled.v1'
 
 const CHAT_WIDTH_KEY = 'codex-web-local.chat-width.v1'
 const MOBILE_RESUME_RELOAD_MIN_HIDDEN_MS = 400
@@ -1550,6 +1561,7 @@ const chatWidth = ref<ChatWidthMode>(loadChatWidthPref())
 const dictationClickToToggle = ref(loadBoolPref(DICTATION_CLICK_TO_TOGGLE_KEY, false))
 const dictationAutoSend = ref(loadBoolPref(DICTATION_AUTO_SEND_KEY, true))
 const dictationLanguage = ref(loadDictationLanguagePref())
+const composioSuggestionsEnabled = ref(loadBoolPref(COMPOSIO_SUGGESTIONS_ENABLED_KEY, true))
 const dictationLanguageOptions = computed(() => buildDictationLanguageOptions())
 const showFirstLaunchPluginsCard = ref(false)
 const freeModeEnabled = ref(false)
@@ -1753,6 +1765,12 @@ function onOpenPluginsHomeCard(): void {
   void router.push({ name: 'skills', query: { tab: 'plugins' } })
 }
 
+function onOpenComposioConnectorFromComposer(slug: string): void {
+  const normalizedSlug = slug.trim()
+  if (!normalizedSlug) return
+  void router.push({ name: 'skills', query: { tab: 'composio', connector: normalizedSlug } })
+}
+
 const threadContextBadgeState = computed(() => {
   const remainingPercent = selectedThreadTokenUsage.value?.remainingContextPercent
   if (remainingPercent === null || typeof remainingPercent !== 'number') return 'pending'
@@ -4029,6 +4047,11 @@ function toggleDictationAutoSend(): void {
   window.localStorage.setItem(DICTATION_AUTO_SEND_KEY, dictationAutoSend.value ? '1' : '0')
 }
 
+function toggleComposioSuggestions(): void {
+  composioSuggestionsEnabled.value = !composioSuggestionsEnabled.value
+  window.localStorage.setItem(COMPOSIO_SUGGESTIONS_ENABLED_KEY, composioSuggestionsEnabled.value ? '1' : '0')
+}
+
 
 async function onProviderChange(provider: string): Promise<void> {
   if (freeModeLoading.value) return
@@ -4631,9 +4654,10 @@ async function onTryDirectoryItem(payload: DirectoryTryItemPayload): Promise<voi
     : payload.kind === 'skill' && payload.skillPath
     ? [{ name: payload.name, path: payload.skillPath }]
     : []
+  const fileAttachments = payload.fileAttachments?.length ? payload.fileAttachments : []
   try {
     const targetCwd = directoryCwd.value.trim() || composerCwd.value.trim()
-    const threadId = await sendMessageToNewThread(text, targetCwd, [], skills, [])
+    const threadId = await sendMessageToNewThread(text, targetCwd, [], skills, fileAttachments)
     if (!threadId) return
     await router.replace({ name: 'thread', params: { threadId } })
     scheduleMobileConversationJumpToLatest()

src/api/codexGateway.test.ts

@@ -1,5 +1,5 @@
 import { afterEach, describe, expect, it, vi } from 'vitest'
-import { getAvailableModelIds, getThreadDetail, listDirectoryComposioConnectors, resumeThread, startThreadTurn } from './codexGateway'
+import { getAvailableModelIds, getThreadDetail, listDirectoryComposioConnectors, logoutDirectoryComposioCli, resumeThread, startThreadTurn } from './codexGateway'
 
 function mockRpcFetch(): { requests: Array<{ method: string, params: Record<string, unknown> }> } {
   const requests: Array<{ method: string, params: Record<string, unknown> }> = []
@@ -88,6 +88,36 @@ describe('listDirectoryComposioConnectors', () => {
   })
 })
 
+describe('logoutDirectoryComposioCli', () => {
+  afterEach(() => {
+    vi.unstubAllGlobals()
+  })
+
+  it('posts to the logout endpoint', async () => {
+    const requests: Array<{ input: string, method: string }> = []
+    vi.stubGlobal('fetch', vi.fn(async (input: RequestInfo | URL, init?: RequestInit) => {
+      requests.push({
+        input: String(input),
+        method: String(init?.method ?? 'GET'),
+      })
+      return new Response(JSON.stringify({
+        ok: true,
+        command: 'composio logout',
+        output: '',
+      }), {
+        status: 200,
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      })
+    }))
+
+    await logoutDirectoryComposioCli()
+
+    expect(requests).toEqual([{ input: '/codex-api/composio/logout', method: 'POST' }])
+  })
+})
+
 describe('getAvailableModelIds', () => {
   afterEach(() => {
     vi.unstubAllGlobals()

src/api/codexGateway.ts

@@ -241,6 +241,12 @@ export type DirectoryComposioInstallResult = {
   output: string
 }
 
+export type DirectoryComposioLogoutResult = {
+  ok: boolean
+  command: string
+  output: string
+}
+
 type DirectoryComposioConnectorPage = {
   data: DirectoryComposioConnector[]
   nextCursor: string | null
@@ -2306,8 +2312,8 @@ export async function startDirectoryMcpLogin(name: string): Promise<DirectoryMcp
   }
 }
 
-export async function getDirectoryComposioStatus(): Promise<DirectoryComposioStatus> {
-  const response = await fetch('/codex-api/composio/status')
+export async function getDirectoryComposioStatus(force = false): Promise<DirectoryComposioStatus> {
+  const response = await fetch(`/codex-api/composio/status${force ? '?force=1' : ''}`)
   if (!response.ok) {
     throw new Error(`Failed to load Composio status (${response.status})`)
   }
@@ -2336,8 +2342,10 @@ export async function listDirectoryComposioConnectors(
   }
 }
 
-export async function readDirectoryComposioConnector(slug: string): Promise<DirectoryComposioConnectorDetail> {
-  const response = await fetch(`/codex-api/composio/connector?slug=${encodeURIComponent(slug)}`)
+export async function readDirectoryComposioConnector(slug: string, force = false): Promise<DirectoryComposioConnectorDetail> {
+  const params = new URLSearchParams({ slug })
+  if (force) params.set('force', '1')
+  const response = await fetch(`/codex-api/composio/connector?${params.toString()}`)
   if (!response.ok) {
     throw new Error(`Failed to load Composio connector (${response.status})`)
   }
@@ -2376,6 +2384,16 @@ export async function installDirectoryComposioCli(): Promise<DirectoryComposioIn
   return await response.json() as DirectoryComposioInstallResult
 }
 
+export async function logoutDirectoryComposioCli(): Promise<DirectoryComposioLogoutResult> {
+  const response = await fetch('/codex-api/composio/logout', {
+    method: 'POST',
+  })
+  if (!response.ok) {
+    throw new Error(`Failed to logout Composio CLI (${response.status})`)
+  }
+  return await response.json() as DirectoryComposioLogoutResult
+}
+
 export async function getAccountRateLimitsResponse(): Promise<GetAccountRateLimitsResponse> {
   return await callRpc<GetAccountRateLimitsResponse>('account/rateLimits/read')
 }