@commandable/mcp 0.4.0 → 0.10.0

package/.output/server/chunks/build/{_id_-Co8jGxsD.mjs → _id_-DA3Q8jun.mjs}

@@ -1,7 +1,7 @@
 import { k as useRoute, m as _sfc_main$b, i as _sfc_main$h, a as __nuxt_component_0$1, g as _sfc_main$m, j as _sfc_main$9, _ as _export_sfc, n as navigateTo, b as useAppConfig, c as useComponentUI, d as useFormField, e as useFieldGroup, f as useComponentIcons, t as tv, h as _sfc_main$k, l as looseToNumber } from './server.mjs';
-import { u as useFetch, _ as _sfc_main$4, a as _sfc_main$3, b as __nuxt_component_3, c as _sfc_main$2$1, d as _sfc_main$1$1 } from './fetch-aDh21opM.mjs';
+import { u as useFetch, _ as _sfc_main$4, a as _sfc_main$3$1, b as __nuxt_component_3, c as _sfc_main$2$1, d as _sfc_main$1$1 } from './fetch-aDh21opM.mjs';
 import { defineComponent, withAsyncContext, computed, ref, watch, mergeProps, withCtx, unref, createTextVNode, createVNode, toDisplayString, isRef, openBlock, createBlock, Fragment, createCommentVNode, reactive, renderList, useSlots, useTemplateRef, renderSlot, useSSRContext } from 'vue';
-import { ssrRenderComponent, ssrInterpolate, ssrRenderClass, ssrRenderAttrs, ssrRenderList, ssrRenderSlot } from 'vue/server-renderer';
+import { ssrRenderComponent, ssrInterpolate, ssrRenderClass, ssrRenderAttrs, ssrRenderList, ssrIncludeBooleanAttr, ssrRenderSlot } from 'vue/server-renderer';
 import { Primitive } from 'reka-ui';
 import { useVModel } from '@vueuse/core';
 import { marked } from 'marked';
@@ -11,27 +11,25 @@ import '@modelcontextprotocol/sdk/server/index.js';
 import '@modelcontextprotocol/sdk/server/streamableHttp.js';
 import '@modelcontextprotocol/sdk/types.js';
 import 'fastest-levenshtein';
-import 'node:url';
-import 'node:vm';
 import 'turndown';
 import 'node:util';
 import 'node:child_process';
 import 'node:fs/promises';
 import 'node:path';
 import 'node:os';
-import 'node:fs';
 import 'drizzle-orm';
+import 'node:url';
+import 'node:vm';
 import 'node:buffer';
 import 'google-auth-library';
 import 'node:http';
 import 'node:https';
 import 'node:events';
+import 'node:fs';
 import 'better-sqlite3';
 import 'drizzle-orm/better-sqlite3';
 import 'drizzle-orm/node-postgres';
 import 'pg';
-import 'drizzle-orm/better-sqlite3/migrator';
-import 'drizzle-orm/node-postgres/migrator';
 import 'drizzle-orm/sqlite-core';
 import 'drizzle-orm/pg-core';
 import 'node:process';
@@ -340,7 +338,7 @@ const theme = {
     "variant": "outline"
   }
 };
-const _sfc_main$2 = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
+const _sfc_main$3 = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
   __name: "UInput",
   __ssrInlineRender: true,
   props: {
@@ -565,13 +563,13 @@ const _sfc_main$2 = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
     };
   }
 });
-const _sfc_setup$2 = _sfc_main$2.setup;
-_sfc_main$2.setup = (props, ctx) => {
+const _sfc_setup$3 = _sfc_main$3.setup;
+_sfc_main$3.setup = (props, ctx) => {
   const ssrContext = useSSRContext();
   (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("../../node_modules/@nuxt/ui/dist/runtime/components/Input.vue");
-  return _sfc_setup$2 ? _sfc_setup$2(props, ctx) : void 0;
+  return _sfc_setup$3 ? _sfc_setup$3(props, ctx) : void 0;
 };
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "IntegrationCredentials",
   __ssrInlineRender: true,
   props: {
@@ -682,7 +680,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       const _component_UModal = _sfc_main$9;
       const _component_UFormField = _sfc_main$2$1;
       const _component_USelect = _sfc_main$1$1;
-      const _component_UInput = _sfc_main$2;
+      const _component_UInput = _sfc_main$3;
       _push(`<div${ssrRenderAttrs(_attrs)} data-v-7de84f63>`);
       if (unref(loading)) {
         _push(`<div class="flex items-center gap-2 text-sm text-muted" data-v-7de84f63>`);
@@ -992,18 +990,437 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const _sfc_setup$2 = _sfc_main$2.setup;
+_sfc_main$2.setup = (props, ctx) => {
+  const ssrContext = useSSRContext();
+  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("components/IntegrationCredentials.vue");
+  return _sfc_setup$2 ? _sfc_setup$2(props, ctx) : void 0;
+};
+const __nuxt_component_6 = /* @__PURE__ */ Object.assign(_export_sfc(_sfc_main$2, [["__scopeId", "data-v-7de84f63"]]), { __name: "IntegrationCredentials" });
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "IntegrationVariantConfigDialog",
+  __ssrInlineRender: true,
+  props: {
+    open: { type: Boolean },
+    integrationId: {},
+    currentType: {},
+    baseType: {},
+    baseName: {},
+    variants: {},
+    saving: { type: Boolean }
+  },
+  emits: ["update:open", "confirm"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const isOpen = computed({
+      get: () => props.open,
+      set: (value) => emit("update:open", value)
+    });
+    const selectedType = ref(props.currentType);
+    const pickerOptions = reactive({});
+    const singleSelections = reactive({});
+    const multiSelections = reactive({});
+    const loadingKeys = reactive({});
+    const loadError = ref(null);
+    const variantTypeItems = computed(() => [
+      { label: `Full ${props.baseName}`, value: props.baseType },
+      ...props.variants.map((variant) => ({
+        label: variant.label || variant.type,
+        value: variant.type
+      }))
+    ]);
+    const activeVariant = computed(
+      () => props.variants.find((variant) => variant.type === selectedType.value) ?? null
+    );
+    const activeVariantConfig = computed(() => activeVariant.value?.variantConfig ?? []);
+    const selectionSignature = computed(
+      () => activeVariantConfig.value.map((item) => {
+        if (item.selectionMode === "multi")
+          return `${item.key}:${(multiSelections[item.key] || []).join(",")}`;
+        return `${item.key}:${singleSelections[item.key] || ""}`;
+      }).join("|")
+    );
+    function clearSelections() {
+      for (const key of Object.keys(singleSelections))
+        delete singleSelections[key];
+      for (const key of Object.keys(multiSelections))
+        delete multiSelections[key];
+    }
+    function resetPickerState() {
+      loadError.value = null;
+      clearSelections();
+      for (const key of Object.keys(pickerOptions))
+        delete pickerOptions[key];
+      for (const key of Object.keys(loadingKeys))
+        delete loadingKeys[key];
+    }
+    function selectedOptionsFor(item) {
+      const options = pickerOptions[item.key] || [];
+      if (item.selectionMode === "multi")
+        return options.filter((option) => (multiSelections[item.key] || []).includes(option.id));
+      return options.filter((option) => option.id === singleSelections[item.key]);
+    }
+    function buildConfig(optionsOnly = false) {
+      const config = {};
+      for (const item of activeVariantConfig.value) {
+        const selected = selectedOptionsFor(item);
+        if (item.selectionMode === "multi") {
+          if (!selected.length)
+            continue;
+          config[`${item.key}Ids`] = selected.map((option) => option.id);
+          if (!optionsOnly)
+            config[`${item.key}Names`] = selected.map((option) => option.name);
+        } else {
+          const option = selected[0];
+          if (!option)
+            continue;
+          config[`${item.key}Id`] = option.id;
+          if (!optionsOnly)
+            config[`${item.key}Name`] = option.name;
+        }
+      }
+      return config;
+    }
+    async function loadOptions() {
+      if (!isOpen.value) {
+        return;
+      }
+      if (!activeVariant.value) {
+        loadError.value = null;
+        return;
+      }
+      loadError.value = null;
+      const partialConfig = {};
+      for (const item of activeVariantConfig.value) {
+        loadingKeys[item.key] = true;
+        try {
+          const response = await $fetch(`/api/integrations/${props.integrationId}/variant-options`, {
+            method: "POST",
+            body: {
+              forIntegrationType: activeVariant.value.type,
+              key: item.key,
+              config: partialConfig
+            }
+          });
+          pickerOptions[item.key] = response.options;
+        } catch (error) {
+          console.error(`Failed to load options for ${item.key}`, error);
+          pickerOptions[item.key] = [];
+          loadError.value = error instanceof Error ? error.message : `Failed to load ${item.label.toLowerCase()} options`;
+        } finally {
+          loadingKeys[item.key] = false;
+        }
+        if (item.selectionMode === "multi") {
+          const validIds = new Set((pickerOptions[item.key] || []).map((option) => option.id));
+          multiSelections[item.key] = (multiSelections[item.key] || []).filter((id) => validIds.has(id));
+        } else if (singleSelections[item.key] && !(pickerOptions[item.key] || []).some((option) => option.id === singleSelections[item.key])) {
+          singleSelections[item.key] = "";
+        }
+        Object.assign(partialConfig, buildConfig());
+      }
+    }
+    function toggleMultiSelection(item, optionId) {
+      const current = new Set(multiSelections[item.key] || []);
+      if (current.has(optionId))
+        current.delete(optionId);
+      else
+        current.add(optionId);
+      multiSelections[item.key] = [...current];
+    }
+    const canConfirm = computed(() => {
+      if (selectedType.value === props.baseType)
+        return true;
+      if (!activeVariant.value)
+        return false;
+      return activeVariantConfig.value.every((item) => {
+        if (item.selectionMode === "multi")
+          return Boolean((multiSelections[item.key] || []).length);
+        return Boolean(singleSelections[item.key]);
+      });
+    });
+    const labelSuffix = computed(
+      () => activeVariantConfig.value.flatMap((item) => selectedOptionsFor(item).map((option) => option.name)).join(" / ") || null
+    );
+    watch(() => props.open, (open) => {
+      if (!open)
+        return;
+      selectedType.value = props.currentType;
+      resetPickerState();
+      void loadOptions();
+    }, { immediate: true });
+    watch(selectedType, () => {
+      if (!isOpen.value)
+        return;
+      resetPickerState();
+      void loadOptions();
+    });
+    watch(selectionSignature, () => {
+      if (!isOpen.value || selectedType.value === props.baseType)
+        return;
+      void loadOptions();
+    });
+    function submit() {
+      emit("confirm", {
+        type: selectedType.value,
+        config: selectedType.value === props.baseType ? null : buildConfig(),
+        labelSuffix: selectedType.value === props.baseType ? null : labelSuffix.value
+      });
+    }
+    return (_ctx, _push, _parent, _attrs) => {
+      const _component_UModal = _sfc_main$9;
+      const _component_UFormField = _sfc_main$2$1;
+      const _component_USelect = _sfc_main$1$1;
+      const _component_UButton = _sfc_main$h;
+      _push(ssrRenderComponent(_component_UModal, mergeProps({
+        open: unref(isOpen),
+        "onUpdate:open": ($event) => isRef(isOpen) ? isOpen.value = $event : null,
+        title: "Reduce integration scope",
+        description: "Choose a reduced scope for this integration or keep full access."
+      }, _attrs), {
+        body: withCtx((_, _push2, _parent2, _scopeId) => {
+          if (_push2) {
+            _push2(`<div class="space-y-4"${_scopeId}>`);
+            _push2(ssrRenderComponent(_component_UFormField, { label: "Scope mode" }, {
+              default: withCtx((_2, _push3, _parent3, _scopeId2) => {
+                if (_push3) {
+                  _push3(ssrRenderComponent(_component_USelect, {
+                    modelValue: unref(selectedType),
+                    "onUpdate:modelValue": ($event) => isRef(selectedType) ? selectedType.value = $event : null,
+                    items: unref(variantTypeItems),
+                    class: "w-full"
+                  }, null, _parent3, _scopeId2));
+                } else {
+                  return [
+                    createVNode(_component_USelect, {
+                      modelValue: unref(selectedType),
+                      "onUpdate:modelValue": ($event) => isRef(selectedType) ? selectedType.value = $event : null,
+                      items: unref(variantTypeItems),
+                      class: "w-full"
+                    }, null, 8, ["modelValue", "onUpdate:modelValue", "items"])
+                  ];
+                }
+              }),
+              _: 1
+            }, _parent2, _scopeId));
+            if (unref(selectedType) !== __props.baseType && unref(activeVariantConfig).length) {
+              _push2(`<!--[-->`);
+              ssrRenderList(unref(activeVariantConfig), (item) => {
+                _push2(ssrRenderComponent(_component_UFormField, {
+                  key: item.key,
+                  label: item.label,
+                  description: item.selectionMode === "multi" ? `Choose one or more ${item.label.toLowerCase()} values.` : `Choose a ${item.label.toLowerCase()} value.`
+                }, {
+                  default: withCtx((_2, _push3, _parent3, _scopeId2) => {
+                    if (_push3) {
+                      if (item.selectionMode === "single") {
+                        _push3(ssrRenderComponent(_component_USelect, {
+                          modelValue: unref(singleSelections)[item.key],
+                          "onUpdate:modelValue": ($event) => unref(singleSelections)[item.key] = $event,
+                          items: (unref(pickerOptions)[item.key] || []).map((option) => ({ label: option.name, value: option.id })),
+                          loading: unref(loadingKeys)[item.key],
+                          disabled: unref(loadingKeys)[item.key],
+                          placeholder: `Select ${item.label.toLowerCase()}...`,
+                          class: "w-full"
+                        }, null, _parent3, _scopeId2));
+                      } else {
+                        _push3(`<div class="space-y-2"${_scopeId2}><!--[-->`);
+                        ssrRenderList(unref(pickerOptions)[item.key] || [], (option) => {
+                          _push3(`<label class="flex items-center gap-2 text-sm"${_scopeId2}><input type="checkbox"${ssrIncludeBooleanAttr((unref(multiSelections)[item.key] || []).includes(option.id)) ? " checked" : ""}${ssrIncludeBooleanAttr(unref(loadingKeys)[item.key]) ? " disabled" : ""}${_scopeId2}><span${_scopeId2}>${ssrInterpolate(option.name)}</span></label>`);
+                        });
+                        _push3(`<!--]--></div>`);
+                      }
+                    } else {
+                      return [
+                        item.selectionMode === "single" ? (openBlock(), createBlock(_component_USelect, {
+                          key: 0,
+                          modelValue: unref(singleSelections)[item.key],
+                          "onUpdate:modelValue": ($event) => unref(singleSelections)[item.key] = $event,
+                          items: (unref(pickerOptions)[item.key] || []).map((option) => ({ label: option.name, value: option.id })),
+                          loading: unref(loadingKeys)[item.key],
+                          disabled: unref(loadingKeys)[item.key],
+                          placeholder: `Select ${item.label.toLowerCase()}...`,
+                          class: "w-full"
+                        }, null, 8, ["modelValue", "onUpdate:modelValue", "items", "loading", "disabled", "placeholder"])) : (openBlock(), createBlock("div", {
+                          key: 1,
+                          class: "space-y-2"
+                        }, [
+                          (openBlock(true), createBlock(Fragment, null, renderList(unref(pickerOptions)[item.key] || [], (option) => {
+                            return openBlock(), createBlock("label", {
+                              key: option.id,
+                              class: "flex items-center gap-2 text-sm"
+                            }, [
+                              createVNode("input", {
+                                type: "checkbox",
+                                checked: (unref(multiSelections)[item.key] || []).includes(option.id),
+                                disabled: unref(loadingKeys)[item.key],
+                                onChange: ($event) => toggleMultiSelection(item, option.id)
+                              }, null, 40, ["checked", "disabled", "onChange"]),
+                              createVNode("span", null, toDisplayString(option.name), 1)
+                            ]);
+                          }), 128))
+                        ]))
+                      ];
+                    }
+                  }),
+                  _: 2
+                }, _parent2, _scopeId));
+              });
+              _push2(`<!--]-->`);
+            } else {
+              _push2(`<!---->`);
+            }
+            if (unref(loadError)) {
+              _push2(`<p class="text-sm text-red-600 dark:text-red-400"${_scopeId}>${ssrInterpolate(unref(loadError))}</p>`);
+            } else {
+              _push2(`<!---->`);
+            }
+            _push2(`</div>`);
+          } else {
+            return [
+              createVNode("div", { class: "space-y-4" }, [
+                createVNode(_component_UFormField, { label: "Scope mode" }, {
+                  default: withCtx(() => [
+                    createVNode(_component_USelect, {
+                      modelValue: unref(selectedType),
+                      "onUpdate:modelValue": ($event) => isRef(selectedType) ? selectedType.value = $event : null,
+                      items: unref(variantTypeItems),
+                      class: "w-full"
+                    }, null, 8, ["modelValue", "onUpdate:modelValue", "items"])
+                  ]),
+                  _: 1
+                }),
+                unref(selectedType) !== __props.baseType && unref(activeVariantConfig).length ? (openBlock(true), createBlock(Fragment, { key: 0 }, renderList(unref(activeVariantConfig), (item) => {
+                  return openBlock(), createBlock(_component_UFormField, {
+                    key: item.key,
+                    label: item.label,
+                    description: item.selectionMode === "multi" ? `Choose one or more ${item.label.toLowerCase()} values.` : `Choose a ${item.label.toLowerCase()} value.`
+                  }, {
+                    default: withCtx(() => [
+                      item.selectionMode === "single" ? (openBlock(), createBlock(_component_USelect, {
+                        key: 0,
+                        modelValue: unref(singleSelections)[item.key],
+                        "onUpdate:modelValue": ($event) => unref(singleSelections)[item.key] = $event,
+                        items: (unref(pickerOptions)[item.key] || []).map((option) => ({ label: option.name, value: option.id })),
+                        loading: unref(loadingKeys)[item.key],
+                        disabled: unref(loadingKeys)[item.key],
+                        placeholder: `Select ${item.label.toLowerCase()}...`,
+                        class: "w-full"
+                      }, null, 8, ["modelValue", "onUpdate:modelValue", "items", "loading", "disabled", "placeholder"])) : (openBlock(), createBlock("div", {
+                        key: 1,
+                        class: "space-y-2"
+                      }, [
+                        (openBlock(true), createBlock(Fragment, null, renderList(unref(pickerOptions)[item.key] || [], (option) => {
+                          return openBlock(), createBlock("label", {
+                            key: option.id,
+                            class: "flex items-center gap-2 text-sm"
+                          }, [
+                            createVNode("input", {
+                              type: "checkbox",
+                              checked: (unref(multiSelections)[item.key] || []).includes(option.id),
+                              disabled: unref(loadingKeys)[item.key],
+                              onChange: ($event) => toggleMultiSelection(item, option.id)
+                            }, null, 40, ["checked", "disabled", "onChange"]),
+                            createVNode("span", null, toDisplayString(option.name), 1)
+                          ]);
+                        }), 128))
+                      ]))
+                    ]),
+                    _: 2
+                  }, 1032, ["label", "description"]);
+                }), 128)) : createCommentVNode("", true),
+                unref(loadError) ? (openBlock(), createBlock("p", {
+                  key: 1,
+                  class: "text-sm text-red-600 dark:text-red-400"
+                }, toDisplayString(unref(loadError)), 1)) : createCommentVNode("", true)
+              ])
+            ];
+          }
+        }),
+        footer: withCtx((_, _push2, _parent2, _scopeId) => {
+          if (_push2) {
+            _push2(`<div class="flex items-center justify-end gap-2 w-full"${_scopeId}>`);
+            _push2(ssrRenderComponent(_component_UButton, {
+              variant: "ghost",
+              color: "neutral",
+              disabled: __props.saving,
+              onClick: ($event) => isOpen.value = false
+            }, {
+              default: withCtx((_2, _push3, _parent3, _scopeId2) => {
+                if (_push3) {
+                  _push3(` Cancel `);
+                } else {
+                  return [
+                    createTextVNode(" Cancel ")
+                  ];
+                }
+              }),
+              _: 1
+            }, _parent2, _scopeId));
+            _push2(ssrRenderComponent(_component_UButton, {
+              disabled: !unref(canConfirm) || __props.saving,
+              loading: __props.saving,
+              onClick: submit
+            }, {
+              default: withCtx((_2, _push3, _parent3, _scopeId2) => {
+                if (_push3) {
+                  _push3(` Save Scope `);
+                } else {
+                  return [
+                    createTextVNode(" Save Scope ")
+                  ];
+                }
+              }),
+              _: 1
+            }, _parent2, _scopeId));
+            _push2(`</div>`);
+          } else {
+            return [
+              createVNode("div", { class: "flex items-center justify-end gap-2 w-full" }, [
+                createVNode(_component_UButton, {
+                  variant: "ghost",
+                  color: "neutral",
+                  disabled: __props.saving,
+                  onClick: ($event) => isOpen.value = false
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(" Cancel ")
+                  ]),
+                  _: 1
+                }, 8, ["disabled", "onClick"]),
+                createVNode(_component_UButton, {
+                  disabled: !unref(canConfirm) || __props.saving,
+                  loading: __props.saving,
+                  onClick: submit
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(" Save Scope ")
+                  ]),
+                  _: 1
+                }, 8, ["disabled", "loading"])
+              ])
+            ];
+          }
+        }),
+        _: 1
+      }, _parent));
+    };
+  }
+});
 const _sfc_setup$1 = _sfc_main$1.setup;
 _sfc_main$1.setup = (props, ctx) => {
   const ssrContext = useSSRContext();
-  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("components/IntegrationCredentials.vue");
+  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("components/IntegrationVariantConfigDialog.vue");
   return _sfc_setup$1 ? _sfc_setup$1(props, ctx) : void 0;
 };
-const __nuxt_component_6 = /* @__PURE__ */ Object.assign(_export_sfc(_sfc_main$1, [["__scopeId", "data-v-7de84f63"]]), { __name: "IntegrationCredentials" });
+const IntegrationVariantConfigDialog = Object.assign(_sfc_main$1, { __name: "IntegrationVariantConfigDialog" });
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "[id]",
   __ssrInlineRender: true,
   async setup(__props) {
     let __temp, __restore;
+    const HYPHEN_REGEX = /-/g;
+    const WHITESPACE_SPLIT_REGEX = /\s+/;
     const route = useRoute();
     const integrationId = route.params.id;
     const { data: integrations, pending, error, refresh } = ([__temp, __restore] = withAsyncContext(() => useFetch(
@@ -1011,6 +1428,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       "$tUtKcl3GqX"
       /* nuxt-injected */
     )), __temp = await __temp, __restore(), __temp);
+    const { data: catalog } = ([__temp, __restore] = withAsyncContext(() => useFetch(
+      "/api/catalog",
+      "$NlPmMk6-3b"
+      /* nuxt-injected */
+    )), __temp = await __temp, __restore(), __temp);
     const integration = computed(() => integrations.value?.find((i) => i.id === integrationId) ?? null);
     const formEnabled = ref(true);
     const formMaxScope = ref(null);
@@ -1019,6 +1441,54 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const toolsTreeRef = ref(null);
     const removeModalOpen = ref(false);
     const saving = ref(false);
+    const variantConfigDialogOpen = ref(false);
+    const savingVariantConfig = ref(false);
+    const connectionHealthStatus = ref(null);
+    const connectionStatusLoading = ref(false);
+    function humanizeType(type) {
+      return type.replace(HYPHEN_REGEX, " ").split(WHITESPACE_SPLIT_REGEX).filter(Boolean).map((word) => word[0] ? `${word[0].toUpperCase()}${word.slice(1)}` : word).join(" ");
+    }
+    const baseCatalogEntry = computed(
+      () => (catalog.value || []).find(
+        (entry) => entry.type === integration.value?.type || entry.variants?.some((variant) => variant.type === integration.value?.type)
+      ) ?? null
+    );
+    const baseType = computed(() => baseCatalogEntry.value?.type ?? integration.value?.type ?? null);
+    const familyVariants = computed(
+      () => baseCatalogEntry.value?.variants?.filter((variant) => (variant.variantConfig?.length ?? 0) > 0) ?? []
+    );
+    const showsVariantScopeAction = computed(
+      () => familyVariants.value.length > 0 && Boolean(integration.value)
+    );
+    const isConnected = computed(() => connectionHealthStatus.value === "connected");
+    const canConfigureVariantScope = computed(
+      () => showsVariantScopeAction.value && isConnected.value
+    );
+    const baseIntegrationName = computed(() => baseCatalogEntry.value?.name || (baseType.value ? humanizeType(baseType.value) : "Integration"));
+    const variantScopeBlockedMessage = computed(() => {
+      if (!showsVariantScopeAction.value || canConfigureVariantScope.value)
+        return null;
+      if (connectionStatusLoading.value)
+        return "Checking connection before enabling reduced scope...";
+      if (connectionHealthStatus.value === "invalid_credentials")
+        return "Reconnect this integration before choosing a reduced scope.";
+      return "Connect this integration before choosing a reduced scope.";
+    });
+    async function refreshConnectionStatus() {
+      if (!integration.value || !showsVariantScopeAction.value) {
+        connectionHealthStatus.value = null;
+        return;
+      }
+      connectionStatusLoading.value = true;
+      try {
+        const status = await $fetch(`/api/integrations/${integration.value.id}/credentials-status`);
+        connectionHealthStatus.value = status?.health_status ?? "disconnected";
+      } catch {
+        connectionHealthStatus.value = "disconnected";
+      } finally {
+        connectionStatusLoading.value = false;
+      }
+    }
     function initForm() {
       if (!integration.value)
         return;
@@ -1030,6 +1500,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       formEnabledToolsets.value = integration.value.enabledToolsets?.length ? [...integration.value.enabledToolsets] : allKeys;
     }
     watch(integration, () => initForm(), { immediate: true });
+    watch(() => integration.value?.id, () => {
+      void refreshConnectionStatus();
+    }, { immediate: true });
     watch(() => toolsTreeRef.value?.toolsets, (toolsets) => {
       if (!integration.value || !toolsets?.length)
         return;
@@ -1078,8 +1551,37 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       await $fetch(`/api/integrations/${integration.value.id}`, { method: "DELETE" });
       navigateTo("/integrations");
     }
-    function onCredentialChange() {
-      refresh();
+    async function openVariantScopeDialog() {
+      if (!canConfigureVariantScope.value)
+        return;
+      variantConfigDialogOpen.value = true;
+    }
+    async function onCredentialChange() {
+      await refresh();
+      await refreshConnectionStatus();
+      if (canConfigureVariantScope.value)
+        variantConfigDialogOpen.value = true;
+    }
+    async function saveVariantScope(payload) {
+      if (!integration.value || !baseType.value)
+        return;
+      savingVariantConfig.value = true;
+      try {
+        const nextLabel = payload.type === baseType.value ? baseIntegrationName.value : payload.labelSuffix ? `${baseIntegrationName.value}: ${payload.labelSuffix}` : integration.value.label;
+        await $fetch("/api/integrations", {
+          method: "POST",
+          body: {
+            ...integration.value,
+            type: payload.type,
+            label: nextLabel,
+            config: payload.config
+          }
+        });
+        variantConfigDialogOpen.value = false;
+        await refresh();
+      } finally {
+        savingVariantConfig.value = false;
+      }
     }
     return (_ctx, _push, _parent, _attrs) => {
       const _component_UContainer = _sfc_main$b;
@@ -1087,7 +1589,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const _component_NuxtLink = __nuxt_component_0$1;
       const _component_UIcon = _sfc_main$m;
       const _component_UBadge = _sfc_main$4;
-      const _component_USwitch = _sfc_main$3;
+      const _component_USwitch = _sfc_main$3$1;
       const _component_IntegrationCredentials = __nuxt_component_6;
       const _component_IntegrationToolsTree = __nuxt_component_3;
       const _component_UModal = _sfc_main$9;
@@ -1164,7 +1666,32 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 "onUpdate:modelValue": ($event) => isRef(formEnabled) ? formEnabled.value = $event : null,
                 size: "lg"
               }, null, _parent2, _scopeId));
-              _push2(`</div><p class="text-sm text-muted mt-1"${_scopeId}>${ssrInterpolate(unref(integration).type)} · ${ssrInterpolate(unref(integration).referenceId)}</p></div><section${_scopeId}><div class="flex items-center justify-between gap-4 mb-1"${_scopeId}><h2 class="text-lg font-medium"${_scopeId}> Connection </h2></div><div class="border border-[var(--ui-border)] rounded-lg px-4 py-3"${_scopeId}>`);
+              _push2(`</div><p class="text-sm text-muted mt-1"${_scopeId}>${ssrInterpolate(unref(integration).type)} · ${ssrInterpolate(unref(integration).referenceId)}</p></div><section${_scopeId}><div class="flex items-center justify-between gap-4 mb-1"${_scopeId}><h2 class="text-lg font-medium"${_scopeId}> Connection </h2>`);
+              if (unref(showsVariantScopeAction)) {
+                _push2(ssrRenderComponent(_component_UButton, {
+                  size: "xs",
+                  variant: "soft",
+                  color: "neutral",
+                  icon: "i-lucide-filter",
+                  disabled: !unref(canConfigureVariantScope) || unref(connectionStatusLoading),
+                  loading: unref(connectionStatusLoading),
+                  onClick: openVariantScopeDialog
+                }, {
+                  default: withCtx((_2, _push3, _parent3, _scopeId2) => {
+                    if (_push3) {
+                      _push3(` Reduce Scope `);
+                    } else {
+                      return [
+                        createTextVNode(" Reduce Scope ")
+                      ];
+                    }
+                  }),
+                  _: 1
+                }, _parent2, _scopeId));
+              } else {
+                _push2(`<!---->`);
+              }
+              _push2(`</div><div class="border border-[var(--ui-border)] rounded-lg px-4 py-3"${_scopeId}>`);
               _push2(ssrRenderComponent(_component_IntegrationCredentials, {
                 "integration-id": unref(integration).id,
                 "integration-type": unref(integration).type,
@@ -1172,7 +1699,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 onSaved: onCredentialChange,
                 onDisconnected: onCredentialChange
               }, null, _parent2, _scopeId));
-              _push2(`</div></section><section class="space-y-3"${_scopeId}><h2 class="text-lg font-medium"${_scopeId}> Access Level </h2><div class="flex gap-2"${_scopeId}><button type="button" class="${ssrRenderClass([unref(formMaxScope) !== "read" ? "border-green-500 bg-green-50 text-green-700 font-medium dark:bg-green-950 dark:text-green-300" : "border-[var(--ui-border)] text-muted hover:bg-[var(--ui-bg-elevated)]", "px-4 py-2 text-sm rounded-lg border transition-colors"])}"${_scopeId}> Read + Write </button><button type="button" class="${ssrRenderClass([unref(formMaxScope) === "read" ? "border-green-500 bg-green-50 text-green-700 font-medium dark:bg-green-950 dark:text-green-300" : "border-[var(--ui-border)] text-muted hover:bg-[var(--ui-bg-elevated)]", "px-4 py-2 text-sm rounded-lg border transition-colors"])}"${_scopeId}> Read-only </button></div>`);
+              _push2(`</div>`);
+              if (unref(variantScopeBlockedMessage)) {
+                _push2(`<p class="mt-2 text-xs text-muted"${_scopeId}>${ssrInterpolate(unref(variantScopeBlockedMessage))}</p>`);
+              } else {
+                _push2(`<!---->`);
+              }
+              _push2(`</section><section class="space-y-3"${_scopeId}><h2 class="text-lg font-medium"${_scopeId}> Access Level </h2><div class="flex gap-2"${_scopeId}><button type="button" class="${ssrRenderClass([unref(formMaxScope) !== "read" ? "border-green-500 bg-green-50 text-green-700 font-medium dark:bg-green-950 dark:text-green-300" : "border-[var(--ui-border)] text-muted hover:bg-[var(--ui-bg-elevated)]", "px-4 py-2 text-sm rounded-lg border transition-colors"])}"${_scopeId}> Read + Write </button><button type="button" class="${ssrRenderClass([unref(formMaxScope) === "read" ? "border-green-500 bg-green-50 text-green-700 font-medium dark:bg-green-950 dark:text-green-300" : "border-[var(--ui-border)] text-muted hover:bg-[var(--ui-bg-elevated)]", "px-4 py-2 text-sm rounded-lg border transition-colors"])}"${_scopeId}> Read-only </button></div>`);
               if (unref(formMaxScope) === "read") {
                 _push2(`<p class="text-xs text-amber-600 dark:text-amber-400"${_scopeId}> Only read tools will be available. Write and admin tools will be greyed out below. </p>`);
               } else {
@@ -1295,6 +1828,21 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 }),
                 _: 1
               }, _parent2, _scopeId));
+              if (unref(integration) && unref(baseType)) {
+                _push2(ssrRenderComponent(IntegrationVariantConfigDialog, {
+                  open: unref(variantConfigDialogOpen),
+                  "onUpdate:open": ($event) => isRef(variantConfigDialogOpen) ? variantConfigDialogOpen.value = $event : null,
+                  "integration-id": unref(integration).id,
+                  "current-type": unref(integration).type,
+                  "base-type": unref(baseType),
+                  "base-name": unref(baseIntegrationName),
+                  variants: unref(familyVariants),
+                  saving: unref(savingVariantConfig),
+                  onConfirm: saveVariantScope
+                }, null, _parent2, _scopeId));
+              } else {
+                _push2(`<!---->`);
+              }
               _push2(`<!--]-->`);
             }
           } else {
@@ -1357,7 +1905,22 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 ]),
                 createVNode("section", null, [
                   createVNode("div", { class: "flex items-center justify-between gap-4 mb-1" }, [
-                    createVNode("h2", { class: "text-lg font-medium" }, " Connection ")
+                    createVNode("h2", { class: "text-lg font-medium" }, " Connection "),
+                    unref(showsVariantScopeAction) ? (openBlock(), createBlock(_component_UButton, {
+                      key: 0,
+                      size: "xs",
+                      variant: "soft",
+                      color: "neutral",
+                      icon: "i-lucide-filter",
+                      disabled: !unref(canConfigureVariantScope) || unref(connectionStatusLoading),
+                      loading: unref(connectionStatusLoading),
+                      onClick: openVariantScopeDialog
+                    }, {
+                      default: withCtx(() => [
+                        createTextVNode(" Reduce Scope ")
+                      ]),
+                      _: 1
+                    }, 8, ["disabled", "loading"])) : createCommentVNode("", true)
                   ]),
                   createVNode("div", { class: "border border-[var(--ui-border)] rounded-lg px-4 py-3" }, [
                     createVNode(_component_IntegrationCredentials, {
@@ -1367,7 +1930,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       onSaved: onCredentialChange,
                       onDisconnected: onCredentialChange
                     }, null, 8, ["integration-id", "integration-type", "current-variant"])
-                  ])
+                  ]),
+                  unref(variantScopeBlockedMessage) ? (openBlock(), createBlock("p", {
+                    key: 0,
+                    class: "mt-2 text-xs text-muted"
+                  }, toDisplayString(unref(variantScopeBlockedMessage)), 1)) : createCommentVNode("", true)
                 ]),
                 createVNode("section", { class: "space-y-3" }, [
                   createVNode("h2", { class: "text-lg font-medium" }, " Access Level "),
@@ -1455,7 +2022,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     ])
                   ]),
                   _: 1
-                }, 8, ["open", "onUpdate:open", "description"])
+                }, 8, ["open", "onUpdate:open", "description"]),
+                unref(integration) && unref(baseType) ? (openBlock(), createBlock(IntegrationVariantConfigDialog, {
+                  key: 0,
+                  open: unref(variantConfigDialogOpen),
+                  "onUpdate:open": ($event) => isRef(variantConfigDialogOpen) ? variantConfigDialogOpen.value = $event : null,
+                  "integration-id": unref(integration).id,
+                  "current-type": unref(integration).type,
+                  "base-type": unref(baseType),
+                  "base-name": unref(baseIntegrationName),
+                  variants: unref(familyVariants),
+                  saving: unref(savingVariantConfig),
+                  onConfirm: saveVariantScope
+                }, null, 8, ["open", "onUpdate:open", "integration-id", "current-type", "base-type", "base-name", "variants", "saving"])) : createCommentVNode("", true)
               ], 64))
             ];
           }
@@ -1473,4 +2052,4 @@ _sfc_main.setup = (props, ctx) => {
 };
 
 export { _sfc_main as default };
-//# sourceMappingURL=_id_-Co8jGxsD.mjs.map
+//# sourceMappingURL=_id_-DA3Q8jun.mjs.map