fix: restore installed composio cli flow

Author: friuns

src/components/content/DirectoryHub.vue

@@ -231,10 +231,10 @@
       <div v-else-if="isLoadingComposio" class="directory-loading">Loading Composio connectors...</div>
       <div v-else-if="!composioStatus?.available" class="directory-empty">
         <div class="directory-empty-copy">
-          <p class="directory-empty-text">Composio could not be started with npx in this environment.</p>
+          <p class="directory-empty-text">Composio CLI is not installed in this environment.</p>
           <div class="directory-card-actions">
             <button class="directory-action primary" type="button" :disabled="isInstallingComposio" @click="installComposioCli">
-              {{ isInstallingComposio ? 'Checking...' : 'Check npx' }}
+              {{ isInstallingComposio ? 'Installing...' : 'Install Composio' }}
             </button>
           </div>
         </div>

src/server/codexAppServerBridge.ts

@@ -1159,7 +1159,7 @@ function readNumber(value: unknown): number {
 
 type ComposioCliInvocation = { command: string; args: string[]; displayCommand: string }
 
-function buildComposioInvocation(args: string[]): ComposioCliInvocation {
+function buildComposioInvocation(args: string[]): ComposioCliInvocation | null {
   const overrideCommand = process.env.CODEXUI_COMPOSIO_COMMAND?.trim()
   if (overrideCommand) {
     const invocation = getSpawnInvocation(overrideCommand, args)
@@ -1169,12 +1169,7 @@ function buildComposioInvocation(args: string[]): ComposioCliInvocation {
       displayCommand: `${overrideCommand} ${args.map(quoteShellTokenIfNeeded).join(' ')}`.trim(),
     }
   }
-  const invocation = getSpawnInvocation('npx', ['--yes', 'composio', ...args])
-  return {
-    command: invocation.command,
-    args: invocation.args,
-    displayCommand: `npx --yes composio ${args.map(quoteShellTokenIfNeeded).join(' ')}`.trim(),
-  }
+  return buildInstalledComposioInvocation(args)
 }
 
 function buildInstalledComposioInvocation(args: string[]): ComposioCliInvocation | null {
@@ -1209,14 +1204,9 @@ function probeComposioInvocation(invocation: ComposioCliInvocation): { available
 }
 
 function resolveComposioInvocation(args: string[]): ComposioCliInvocation | null {
-  const preferred = buildComposioInvocation(args)
-  if (probeComposioInvocation(buildComposioInvocation(['--version'])).available) {
-    return preferred
-  }
-  const installed = buildInstalledComposioInvocation(args)
-  if (!installed) return null
-  const installedVersion = buildInstalledComposioInvocation(['--version'])
-  if (installedVersion && probeComposioInvocation(installedVersion).available) return installed
+  const invocation = buildComposioInvocation(args)
+  const versionInvocation = buildComposioInvocation(['--version'])
+  if (invocation && versionInvocation && probeComposioInvocation(versionInvocation).available) return invocation
   return null
 }
 
@@ -1231,7 +1221,7 @@ function parseComposioJson<T>(stdout: string, fallback: string): T {
 async function runComposioJson<T>(args: string[], fallback: string): Promise<T> {
   const invocation = resolveComposioInvocation(args)
   if (!invocation) {
-    throw new Error('Composio is not available through npx or an installed CLI')
+    throw new Error('Composio CLI is not installed')
   }
   const child = spawn(invocation.command, invocation.args, {
     env: process.env,
@@ -1345,13 +1335,12 @@ async function readComposioConnectionsBySlug(): Promise<Map<string, ComposioConn
 }
 
 async function readComposioStatus(): Promise<ComposioStatusResponse> {
-  const preferredProbe = probeComposioInvocation(buildComposioInvocation(['--version']))
-  const installedVersion = buildInstalledComposioInvocation(['--version'])
-  const installedProbe = preferredProbe.available || !installedVersion
-    ? { available: false, cliVersion: '', output: '' }
-    : probeComposioInvocation(installedVersion)
-  const available = preferredProbe.available || installedProbe.available
-  const cliVersion = preferredProbe.cliVersion || installedProbe.cliVersion
+  const versionInvocation = buildComposioInvocation(['--version'])
+  const probe = versionInvocation
+    ? probeComposioInvocation(versionInvocation)
+    : { available: false, cliVersion: '', output: '' }
+  const available = probe.available
+  const cliVersion = probe.cliVersion
   const userData = await readComposioUserData()
   if (!available) {
     return {
@@ -1481,7 +1470,7 @@ async function startComposioLink(slug: string): Promise<ComposioLinkResult> {
 async function startComposioLogin(): Promise<ComposioLoginResult> {
   const invocation = resolveComposioInvocation(['login', '--no-browser', '-y'])
   if (!invocation) {
-    throw new Error('Composio is not available through npx or an installed CLI')
+    throw new Error('Composio CLI is not installed')
   }
   const proc = spawn(invocation.command, invocation.args, {
     cwd: process.cwd(),
@@ -1535,15 +1524,27 @@ async function startComposioLogin(): Promise<ComposioLoginResult> {
 }
 
 async function installComposioCli(): Promise<ComposioInstallResult> {
-  const invocation = buildComposioInvocation(['--version'])
-  const result = probeComposioInvocation(invocation)
-  if (!result.available) {
-    throw new Error(result.output || 'Failed to run Composio through npx')
+  const command = 'bash'
+  const installScriptUrl = 'https://composio.dev/install'
+  const args = ['-lc', `curl -fsSL ${installScriptUrl} | bash`]
+  const invocation = getSpawnInvocation(command, args)
+  const env = {
+    ...process.env,
+    COMPOSIO_INSTALL_DIR: process.env.COMPOSIO_INSTALL_DIR?.trim() || join(homedir(), '.composio'),
+  }
+  const result = spawnSync(invocation.command, invocation.args, {
+    encoding: 'utf8',
+    env,
+    windowsHide: true,
+  })
+  const output = `${result.stdout ?? ''}${result.stderr ?? ''}`.trim()
+  if (result.error || result.status !== 0) {
+    throw new Error(output || result.error?.message || 'Failed to install Composio CLI')
   }
   return {
     ok: true,
-    command: invocation.displayCommand,
-    output: result.output,
+    command: `curl -fsSL ${installScriptUrl} | bash`,
+    output,
   }
 }
 

src/style.css

@@ -1398,6 +1398,10 @@
   @apply border-zinc-700 bg-zinc-800 text-zinc-100;
 }
 
+:root.dark .directory-action.primary {
+  @apply border-zinc-100 bg-zinc-100 text-zinc-950 hover:bg-white;
+}
+
 :root.dark .directory-sort-group {
   @apply border-zinc-700 bg-zinc-950;
 }

tests.md

@@ -3290,9 +3290,9 @@ The `#/skills` route shows a full Skills & Apps directory with Plugins, Apps, Co
 15. Open a plugin whose detail lists a required app that is absent from the Apps catalog for the current account, such as Gmail on an account without Gmail app access, and verify the footer shows a disabled `ChatGPT Plus` action instead of `Install`
 16. Switch Apps sorting to `A-Z` and verify apps reorder alphabetically; switch to `Date` and verify app-server catalog order is restored; switch back to `Popular` and verify casual-user relevant apps are prioritized and capped to 100 when no search is active
 17. Search Apps and verify matching results are not capped to the Popular top 100 list
-18. Switch to `Composio` and verify the workspace summary card shows the current Composio login state from the preferred `npx --yes composio` path, or the installed CLI fallback when the npm package does not expose a runnable binary
-19. If Composio cannot start through npx, click `Check npx` and verify the app probes `npx --yes composio --version` instead of installing a separate CLI binary
-20. If Composio is available but not authenticated, click `Login` and verify the app opens a new tab, starts `npx --yes composio login --no-browser -y`, captures the returned auth URL, and navigates the new tab to that URL
+18. Switch to `Composio` and verify the workspace summary card shows the current installed Composio CLI login state, or a clear not-installed / not-authenticated message appears
+19. If Composio CLI is not installed, click `Install Composio` and verify the app installs the CLI to `~/.composio/composio` using the official Composio installer
+20. If Composio is available but not authenticated, click `Login` and verify the app opens a new tab, starts the installed `composio login --no-browser -y`, captures the returned auth URL, and navigates the new tab to that URL
 21. Verify Composio connector cards show real connector details such as tool counts, trigger counts, auth mode, and connection state instead of only aggregate totals
 22. In Composio search, type `instagram` and verify the Instagram connector appears first when it is returned by the connector source, ahead of description-only matches such as Meta Ads
 23. Open a disconnected Composio connector and click `Connect` or `Reconnect`; verify the returned `connect.composio.dev` authorization URL opens
@@ -3317,9 +3317,9 @@ The `#/skills` route shows a full Skills & Apps directory with Plugins, Apps, Co
 - App and plugin enable/disable actions update their local card state after a successful config write
 - Plugin detail shows bundled MCP login state and can launch MCP OAuth for `notLoggedIn` servers
 - Disconnected apps are labeled `Login`; connected apps are labeled `Manage`
-- The Composio tab tries `npx --yes composio` by default and falls back to the installed CLI only when the current npm package cannot be executed
-- The Composio check action probes `npx --yes composio --version` instead of installing a separate CLI binary
-- The Composio login action opens a new tab from the click, starts `npx --yes composio login --no-browser -y`, then navigates that tab to the returned auth URL
+- The Composio tab uses the installed Composio CLI, preferring `CODEXUI_COMPOSIO_COMMAND` when set and otherwise `~/.composio/composio` or `composio` on `PATH`
+- The Composio install action uses the official installer and produces a working `~/.composio/composio` binary
+- The Composio login action opens a new tab from the click, starts the installed `composio login --no-browser -y`, then navigates that tab to the returned auth URL
 - Composio connector cards and detail views show concrete connector details, connection rows, and useful tool samples
 - Composio search prioritizes exact slug/name matches above connectors that only mention the query in their description
 - Unit coverage verifies that Composio exact query matches outrank description-only matches and that gateway connector search sends `query`, `cursor`, and `limit` params expected by the server