From 7a7dca8e4d7837cc39a5c1a3d3e7ec02d1e5efaf Mon Sep 17 00:00:00 2001
From: Jonathan Yeong <hey@jonathanyeong.com>
Date: Tue, 27 Jan 2026 18:37:52 -0500
Subject: [PATCH] feat: add package manager tabs to local connector install
 command

---
 app/components/ConnectorModal.vue     |  8 +++++++
 app/components/PackageManagerTabs.vue | 34 +++++++++++++++++++++++++++
 app/pages/[...package].vue            | 28 +---------------------
 3 files changed, 43 insertions(+), 27 deletions(-)
 create mode 100644 app/components/PackageManagerTabs.vue

diff --git a/app/components/ConnectorModal.vue b/app/components/ConnectorModal.vue
index 064e94c8ca..76a4d96227 100644
--- a/app/components/ConnectorModal.vue
+++ b/app/components/ConnectorModal.vue
@@ -124,6 +124,14 @@ watch(open, isOpen => {
                 {{ $t('connector.modal.run_hint') }}
               </p>
 
+              <div
+                class="inline-flex items-center gap-1 p-0.5 bg-bg-subtle border border-border-subtle rounded-md"
+                role="tablist"
+                :aria-label="$t('package.install.pm_label')"
+              >
+                <PackageManagerTabs v-model="selectedPM" />
+              </div>
+
               <div
                 class="flex items-center p-3 bg-[#0d0d0d] border border-border rounded-lg font-mono text-sm"
               >
diff --git a/app/components/PackageManagerTabs.vue b/app/components/PackageManagerTabs.vue
new file mode 100644
index 0000000000..06d3b66e32
--- /dev/null
+++ b/app/components/PackageManagerTabs.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+const selectedPM = defineModel<PackageManagerId>({ required: true })
+</script>
+
+<template>
+  <ClientOnly>
+    <button
+      v-for="pm in packageManagers"
+      :key="pm.id"
+      type="button"
+      role="tab"
+      :aria-selected="selectedPM === pm.id"
+      class="px-2 py-1 font-mono text-xs rounded transition-colors duration-150 border border-solid focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+      :class="
+        selectedPM === pm.id
+          ? 'bg-bg shadow text-fg border-border'
+          : 'text-fg-subtle hover:text-fg border-transparent'
+      "
+      @click="selectedPM = pm.id"
+    >
+      {{ pm.label }}
+    </button>
+    <template #fallback>
+      <span
+        v-for="pm in packageManagers"
+        :key="pm.id"
+        class="px-2 py-1 font-mono text-xs rounded"
+        :class="pm.id === 'npm' ? 'bg-bg-elevated text-fg' : 'text-fg-subtle'"
+      >
+        {{ pm.label }}
+      </span>
+    </template>
+  </ClientOnly>
+</template>
diff --git a/app/pages/[...package].vue b/app/pages/[...package].vue
index af6e825a97..91529d01c0 100644
--- a/app/pages/[...package].vue
+++ b/app/pages/[...package].vue
@@ -785,33 +785,7 @@ defineOgImageComponent('Package', {
             role="tablist"
             :aria-label="$t('package.install.pm_label')"
           >
-            <ClientOnly>
-              <button
-                v-for="pm in packageManagers"
-                :key="pm.id"
-                role="tab"
-                :aria-selected="selectedPM === pm.id"
-                class="px-2 py-1 font-mono text-xs rounded transition-colors duration-150 border border-solid focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
-                :class="
-                  selectedPM === pm.id
-                    ? 'bg-bg shadow text-fg border-border'
-                    : 'text-fg-subtle hover:text-fg  border-transparent'
-                "
-                @click="selectedPM = pm.id"
-              >
-                {{ pm.label }}
-              </button>
-              <template #fallback>
-                <span
-                  v-for="pm in packageManagers"
-                  :key="pm.id"
-                  class="px-2 py-1 font-mono text-xs rounded"
-                  :class="pm.id === 'npm' ? 'bg-bg-elevated text-fg' : 'text-fg-subtle'"
-                >
-                  {{ pm.label }}
-                </span>
-              </template>
-            </ClientOnly>
+            <PackageManagerTabs v-model="selectedPM" />
           </div>
         </div>
         <div class="relative group">